ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix playback state (paused) and events (play/pause)

Browse Source
This commit is contained in:
Albin Larsson 2018-05-18 00:34:59 +02:00
parent 3ab2295fe7
commit 333435a9c2
2 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/js/plugins/vimeo.js
View File

@ -7,6 +7,14 @@ import controls from './../controls';
import ui from './../ui'; import ui from './../ui';
import utils from './../utils'; import utils from './../utils';
// Set playback state and trigger change (only on actual change)
function assurePlaybackState(play) {
if (this.media.paused === play) {
this.media.paused = !play;
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
}
}
const vimeo = { const vimeo = {
setup() { setup() {
// Add embed class for responsive // Add embed class for responsive
@ -120,15 +128,13 @@ const vimeo = {
// Create a faux HTML5 API using the Vimeo API // Create a faux HTML5 API using the Vimeo API
player.media.play = () => { player.media.play = () => {
player.embed.play().then(() => { assurePlaybackState.call(player, true);
player.media.paused = false; return player.embed.play();
});
}; };
player.media.pause = () => { player.media.pause = () => {
player.embed.pause().then(() => { assurePlaybackState.call(player, false);
player.media.paused = true; return player.embed.pause();
});
}; };
player.media.stop = () => { player.media.stop = () => {
@ -315,17 +321,12 @@ const vimeo = {
}); });
player.embed.on('play', () => { player.embed.on('play', () => {
// Only fire play if paused before assurePlaybackState.call(player, true);
if (player.media.paused) {
utils.dispatchEvent.call(player, player.media, 'play');
}
player.media.paused = false;
utils.dispatchEvent.call(player, player.media, 'playing'); utils.dispatchEvent.call(player, player.media, 'playing');
}); });
player.embed.on('pause', () => { player.embed.on('pause', () => {
player.media.paused = true; assurePlaybackState.call(player, false);
utils.dispatchEvent.call(player, player.media, 'pause');
}); });
player.embed.on('timeupdate', data => { player.embed.on('timeupdate', data => {

26
src/js/plugins/youtube.js
View File

@ -64,6 +64,14 @@ function mapQualityUnits(levels) {
return utils.dedupe(levels.map(level => mapQualityUnit(level))); return utils.dedupe(levels.map(level => mapQualityUnit(level)));
} }
// Set playback state and trigger change (only on actual change)
function assurePlaybackState(play) {
if (this.media.paused === play) {
this.media.paused = !play;
utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause');
}
}
const youtube = { const youtube = {
setup() { setup() {
// Add embed class for responsive // Add embed class for responsive
@ -264,10 +272,12 @@ const youtube = {
// Create a faux HTML5 API using the YouTube API // Create a faux HTML5 API using the YouTube API
player.media.play = () => { player.media.play = () => {
assurePlaybackState.call(player, true);
instance.playVideo(); instance.playVideo();
}; };
player.media.pause = () => { player.media.pause = () => {
assurePlaybackState.call(player, false);
instance.pauseVideo(); instance.pauseVideo();
}; };
@ -438,7 +448,8 @@ const youtube = {
break; break;
case 0: case 0:
player.media.paused = true; // Assure state and event
assurePlaybackState.call(player, false);
// YouTube doesn't support loop for a single video, so mimick it. // YouTube doesn't support loop for a single video, so mimick it.
if (player.media.loop) { if (player.media.loop) {
@ -455,14 +466,11 @@ const youtube = {
// If we were seeking, fire seeked event // If we were seeking, fire seeked event
if (player.media.seeking) { if (player.media.seeking) {
utils.dispatchEvent.call(player, player.media, 'seeked'); utils.dispatchEvent.call(player, player.media, 'seeked');
player.media.seeking = false;
} }
player.media.seeking = false;
// Only fire play if paused before // Assure state and event (must be done after seeked event)
if (player.media.paused) { assurePlaybackState.call(player, true);
utils.dispatchEvent.call(player, player.media, 'play');
}
player.media.paused = false;
utils.dispatchEvent.call(player, player.media, 'playing'); utils.dispatchEvent.call(player, player.media, 'playing');
@ -485,9 +493,7 @@ const youtube = {
break; break;
case 2: case 2:
player.media.paused = true; assurePlaybackState.call(player, false);
utils.dispatchEvent.call(player, player.media, 'pause');
break; break;