Embed: mews: don't fail terribly when autoplay is disabled
This commit is contained in:
parent
53612aa092
commit
f5313b4bc0
4 changed files with 81 additions and 38 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -355,7 +355,7 @@ MistSkins["default"] = {
|
||||||
//improve autoplay behaviour
|
//improve autoplay behaviour
|
||||||
if (MistVideo.options.autoplay) {
|
if (MistVideo.options.autoplay) {
|
||||||
//because Mist doesn't send data instantly (but real time), it can take a little while before canplaythrough is fired. Rather than wait, we can just start playing at the canplay event
|
//because Mist doesn't send data instantly (but real time), it can take a little while before canplaythrough is fired. Rather than wait, we can just start playing at the canplay event
|
||||||
MistUtil.event.addListener(MistVideo.video,"canplay",function(){
|
var canplay = MistUtil.event.addListener(MistVideo.video,"canplay",function(){
|
||||||
if (MistVideo.player.api && MistVideo.player.api.paused) {
|
if (MistVideo.player.api && MistVideo.player.api.paused) {
|
||||||
var promise = MistVideo.player.api.play();
|
var promise = MistVideo.player.api.play();
|
||||||
if (promise) {
|
if (promise) {
|
||||||
|
@ -374,33 +374,6 @@ MistSkins["default"] = {
|
||||||
if (promise) {
|
if (promise) {
|
||||||
promise.then(function(){
|
promise.then(function(){
|
||||||
if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "success"; }
|
if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "success"; }
|
||||||
}).catch(function(){
|
|
||||||
if (MistVideo.destroyed) { return; }
|
|
||||||
MistVideo.log("Autoplay failed even with muted video. Unmuting and showing play button.");
|
|
||||||
if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "failed"; }
|
|
||||||
MistVideo.player.api.muted = false;
|
|
||||||
|
|
||||||
//play has failed
|
|
||||||
|
|
||||||
//show large centered play button
|
|
||||||
var largePlayButton = MistVideo.skin.icons.build("largeplay",150);
|
|
||||||
MistUtil.class.add(largePlayButton,"mistvideo-pointer");
|
|
||||||
MistVideo.container.appendChild(largePlayButton);
|
|
||||||
|
|
||||||
//start playing on click
|
|
||||||
MistUtil.event.addListener(largePlayButton,"click",function(){
|
|
||||||
if (MistVideo.player.api.paused) {
|
|
||||||
MistVideo.player.api.play();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//remove large button on play
|
|
||||||
var f = function (){
|
|
||||||
MistVideo.container.removeChild(largePlayButton);
|
|
||||||
MistVideo.video.removeEventListener("play",f);
|
|
||||||
};
|
|
||||||
MistUtil.event.addListener(MistVideo.video,"play",f);
|
|
||||||
|
|
||||||
}).then(function(){
|
}).then(function(){
|
||||||
if (MistVideo.destroyed) { return; }
|
if (MistVideo.destroyed) { return; }
|
||||||
|
|
||||||
|
@ -449,7 +422,45 @@ MistSkins["default"] = {
|
||||||
}
|
}
|
||||||
MistUtil.event.addListener(MistVideo.video,"volumechange",fu);
|
MistUtil.event.addListener(MistVideo.video,"volumechange",fu);
|
||||||
|
|
||||||
},function(){});
|
}).catch(function(){
|
||||||
|
if (MistVideo.destroyed) { return; }
|
||||||
|
MistVideo.log("Autoplay failed even with muted video. Unmuting and showing play button.");
|
||||||
|
//wait 5 seconds and then pause the download
|
||||||
|
MistVideo.timers.start(function(){
|
||||||
|
if (MistVideo.player.api.paused) {
|
||||||
|
//don't question it
|
||||||
|
//if the video is paused, also request the player api to pause
|
||||||
|
//for example, for mews, this would pause the download
|
||||||
|
MistVideo.player.api.pause();
|
||||||
|
if (MistVideo.monitor) { MistVideo.monitor.destroy(); }
|
||||||
|
}
|
||||||
|
},5e3);
|
||||||
|
|
||||||
|
if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "failed"; }
|
||||||
|
MistVideo.player.api.muted = false;
|
||||||
|
|
||||||
|
//play has failed
|
||||||
|
|
||||||
|
//show large centered play button
|
||||||
|
var largePlayButton = MistVideo.skin.icons.build("largeplay",150);
|
||||||
|
MistUtil.class.add(largePlayButton,"mistvideo-pointer");
|
||||||
|
MistVideo.container.appendChild(largePlayButton);
|
||||||
|
|
||||||
|
//start playing on click
|
||||||
|
MistUtil.event.addListener(largePlayButton,"click",function(){
|
||||||
|
if (MistVideo.player.api.paused) {
|
||||||
|
MistVideo.player.api.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//remove large button on play
|
||||||
|
var f = function (){
|
||||||
|
MistVideo.container.removeChild(largePlayButton);
|
||||||
|
MistVideo.video.removeEventListener("play",f);
|
||||||
|
};
|
||||||
|
MistUtil.event.addListener(MistVideo.video,"play",f);
|
||||||
|
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "failed"; }
|
else if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "failed"; }
|
||||||
|
@ -457,6 +468,8 @@ MistSkins["default"] = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "success"; }
|
else if (MistVideo.reporting) { MistVideo.reporting.stats.d.autoplay = "success"; }
|
||||||
|
|
||||||
|
MistUtil.event.removeListener(canplay); //only fire once
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -110,7 +110,7 @@ p.prototype.build = function (MistVideo,callback) {
|
||||||
if ((player.ws.readyState == player.ws.OPEN) && (player.ms.readyState == "open") && (player.sb)) {
|
if ((player.ws.readyState == player.ws.OPEN) && (player.ms.readyState == "open") && (player.sb)) {
|
||||||
callback(video);
|
callback(video);
|
||||||
if (MistVideo.options.autoplay) {
|
if (MistVideo.options.autoplay) {
|
||||||
player.api.play();
|
player.api.play().catch(function(){});
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
|
@ -396,7 +396,7 @@ p.prototype.build = function (MistVideo,callback) {
|
||||||
var f = function(msg){
|
var f = function(msg){
|
||||||
//got codec data, set up source buffer
|
//got codec data, set up source buffer
|
||||||
if (!player.sb) { player.sbinit(msg.data.codecs); }
|
if (!player.sb) { player.sbinit(msg.data.codecs); }
|
||||||
else { player.api.play(); }
|
else { player.api.play().catch(function(){}); }
|
||||||
|
|
||||||
player.ws.removeListener("codec_data",f);
|
player.ws.removeListener("codec_data",f);
|
||||||
};
|
};
|
||||||
|
@ -766,6 +766,11 @@ p.prototype.build = function (MistVideo,callback) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "pause": {
|
||||||
|
if (player.sb) { player.sb.paused = true; }
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (msg.type in this.listeners) {
|
if (msg.type in this.listeners) {
|
||||||
|
@ -905,6 +910,18 @@ p.prototype.build = function (MistVideo,callback) {
|
||||||
this.api = {
|
this.api = {
|
||||||
play: function(skipToLive){
|
play: function(skipToLive){
|
||||||
return new Promise(function(resolve,reject){
|
return new Promise(function(resolve,reject){
|
||||||
|
if (!video.paused) {
|
||||||
|
//we're already playing, what are you doing?
|
||||||
|
resolve();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (("paused" in player.sb) && !player.sb.paused) {
|
||||||
|
video.play().then(resolve).catch(reject);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
var f = function(e){
|
var f = function(e){
|
||||||
if (!player.sb) {
|
if (!player.sb) {
|
||||||
MistVideo.log("Attempting to play, but the source buffer is being cleared. Waiting for next on_time.");
|
MistVideo.log("Attempting to play, but the source buffer is being cleared. Waiting for next on_time.");
|
||||||
|
@ -921,7 +938,10 @@ p.prototype.build = function (MistVideo,callback) {
|
||||||
video.currentTime = e.data.current*1e-3;
|
video.currentTime = e.data.current*1e-3;
|
||||||
MistVideo.log("Setting live playback position to "+MistUtil.format.time(video.currentTime));
|
MistVideo.log("Setting live playback position to "+MistUtil.format.time(video.currentTime));
|
||||||
}
|
}
|
||||||
video.play().then(resolve).catch(reject);
|
video.play().then(resolve).catch(function(){
|
||||||
|
//could not play video, pause the download
|
||||||
|
return reject.apply(this,arguments);
|
||||||
|
});
|
||||||
player.sb.paused = false;
|
player.sb.paused = false;
|
||||||
player.sb.removeEventListener("updateend",g);
|
player.sb.removeEventListener("updateend",g);
|
||||||
}
|
}
|
||||||
|
@ -931,19 +951,29 @@ p.prototype.build = function (MistVideo,callback) {
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
player.sb.paused = false;
|
player.sb.paused = false;
|
||||||
video.play().then(resolve).catch(reject);
|
video.play().then(resolve).catch(function(){
|
||||||
|
//could not play video, pause the download
|
||||||
|
player.api.pause();
|
||||||
|
return reject.apply(this,arguments);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
player.ws.removeListener("on_time",f);
|
player.ws.removeListener("on_time",f);
|
||||||
}
|
}
|
||||||
else if (e.data.current > video.currentTime) {
|
else if (e.data.current > video.currentTime) {
|
||||||
player.sb.paused = false;
|
player.sb.paused = false;
|
||||||
video.currentTime = e.data.current*1e-3;
|
video.play().then(resolve).catch(function(){
|
||||||
video.play().then(resolve).catch(reject);
|
if (video.buffered.length && video.buffered.start(0) > video.currentTime) {
|
||||||
|
video.currentTime = video.buffered.start(0);
|
||||||
|
video.play().then(resolve).catch(reject);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
reject.apply(this,arguments);
|
||||||
|
}
|
||||||
|
});
|
||||||
player.ws.removeListener("on_time",f);
|
player.ws.removeListener("on_time",f);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
player.ws.addListener("on_time",f);
|
player.ws.addListener("on_time",f);
|
||||||
|
|
||||||
var cmd = {type:"play"};
|
var cmd = {type:"play"};
|
||||||
if (skipToLive) { cmd.seek_time = "live"; }
|
if (skipToLive) { cmd.seek_time = "live"; }
|
||||||
send(cmd);
|
send(cmd);
|
||||||
|
|
Loading…
Add table
Reference in a new issue