Support promise based play as defined in Chrome 50 - see https://developers.google.com/web/updates/2016/03/play-returns-promise

static/js/services/playpromise.js

@@ -0,0 +1,53 @@
+/*
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2015 struktur AG
+ *
+ * This file is part of Spreed WebRTC.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+"use strict";
+define(["underscore"], function(_) {
+	function noopThen() {
+		// Automatic playback started.
+	}
+	function noopCatch(error) {
+		// Automatic playback failed.
+	}
+
+	// playPromise
+	return function() {
+		return function(elem, thenFunc, catchFunc) {
+			// Starting with Chome 50 play() returns a promise.
+			// https://developers.google.com/web/updates/2016/03/play-returns-promise
+			var playPromise = elem.play()
+			if (playPromise !== undefined) {
+				if (!thenFunc) {
+					thenFunc = noopThen;
+				}
+				if (!catchFunc) {
+					catchFunc = noopCatch;
+				}
+				playPromise.then(thenFunc).catch(catchFunc);
+			} else {
+				if (thenFunc) {
+					_.defer(thenFunc);
+				}
+			}
+			return playPromise;
+		}
+	};
+});

static/js/services/services.js

@@ -70,7 +70,8 @@ define([
 	'services/mediadevices',
 	'services/sandbox',
 	'services/dummystream',
-	'services/usermedia'], function(_,
+	'services/usermedia',
+	'services/playpromise'], function(_,
 desktopNotify,
 playSound,
 safeApply,
@@ -118,7 +119,8 @@ modules,
 mediaDevices,
 sandbox,
 dummyStream,
-userMedia) {
+userMedia,
+playPromise) {
 
 	var services = {
 		desktopNotify: desktopNotify,
@@ -168,7 +170,8 @@ userMedia) {
 		mediaDevices: mediaDevices,
 		sandbox: sandbox,
 		dummyStream: dummyStream,
-		userMedia: userMedia
+		userMedia: userMedia,
+		playPromise: playPromise
 	};
 
 	var initialize = function(angModule) {

static/js/services/videolayout.js

@@ -59,7 +59,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 	var objectFitSupport = Modernizr["object-fit"] && true;
 
 	// videoLayout
-	return ["$window", function($window) {
+	return ["$window", "playPromise", function($window, playPromise) {
 
 		// Invisible layout (essentially shows nothing).
 		var Invisible = function(container, scope, controller) {};
@@ -189,7 +189,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 			var $mini = $(scope.mini);
 			this.miniParent = $mini.parent();
 			$mini.prependTo(scope.remoteVideos);
-			$mini.find("video")[0].play();
+			playPromise($mini.find("video")[0]);
 			this.countSelfAsRemote = true;
 		}
 		Democrazy.prototype = Object.create(OnePeople.prototype);
@@ -199,7 +199,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 			OnePeople.prototype.close.call(this, container, scope, controller);
 			var $mini = $(scope.mini);
 			$mini.appendTo(this.miniParent);
-			$mini.find("video")[0].play();
+			playPromise($mini.find("video")[0]);
 			this.miniParent = null;
 		};
 
@@ -232,12 +232,12 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 			if (this.big) {
 				// Add old video back.
 				this.big.insertAfter(remoteVideo);
-				this.big.find("video")[0].play();
+				playPromise(this.big.find("video")[0]);
 			}
 
 			this.big = remoteVideo;
 			remoteVideo.appendTo(this.bigVideo);
-			remoteVideo.find("video")[0].play();
+			playPromise(remoteVideo.find("video")[0]);
 
 		};
 
@@ -292,7 +292,7 @@ define(["jquery", "underscore", "modernizr", "injectCSS"], function($, _, Modern
 			this.closed = true;
 			if (this.big) {
 				this.remoteVideos.append(this.big);
-				this.big.find("video")[0].play();
+				playPromise(this.big.find("video")[0]);
 			}
 			this.big = null;
 			this.bigVideo.remove()