diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plugins/vimeo.js | 7 | ||||
| -rw-r--r-- | src/js/plugins/youtube.js | 13 | ||||
| -rw-r--r-- | src/js/plyr.js | 8 | ||||
| -rw-r--r-- | src/js/ui.js | 8 |
4 files changed, 30 insertions, 6 deletions
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index f033a969..50c49748 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -190,6 +190,13 @@ const vimeo = { }, }); + // Ended + Object.defineProperty(player.media, 'ended', { + get() { + return player.currentTime === player.duration; + }, + }); + // Set aspect ratio based on video size Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index a46773a0..3e8b8079 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -254,6 +254,13 @@ const youtube = { }, }); + // Ended + Object.defineProperty(player.media, 'ended', { + get() { + return player.currentTime === player.duration; + }, + }); + // Get available speeds if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates()); @@ -316,6 +323,8 @@ const youtube = { // 5 Video cued switch (event.data) { case 0: + player.media.paused = true; + // YouTube doesn't support loop for a single video, so mimick it. if (player.media.loop) { // YouTube needs a call to `stopVideo` before playing again @@ -323,21 +332,19 @@ const youtube = { instance.playVideo(); } else { utils.dispatchEvent.call(player, player.media, 'ended'); - player.media.paused = true; } break; case 1: player.media.paused = false; + player.media.seeking = false; // If we were seeking, fire seeked event if (player.media.seeking) { utils.dispatchEvent.call(player, player.media, 'seeked'); } - player.media.seeking = false; - utils.dispatchEvent.call(player, player.media, 'play'); utils.dispatchEvent.call(player, player.media, 'playing'); diff --git a/src/js/plyr.js b/src/js/plyr.js index af9d57bf..4f985a31 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -283,6 +283,14 @@ class Plyr { return this.media.paused; } + get playing() { + return this.currentTime > 0 && !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true); + } + + get ended() { + return this.media.ended; + } + /** * Toggle playback based on current status * @param {boolean} toggle diff --git a/src/js/ui.js b/src/js/ui.js index fe8fac0f..14b8d1cb 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -138,11 +138,13 @@ const ui = { // Check playing state checkPlaying() { - utils.toggleClass(this.elements.container, this.config.classNames.playing, !this.paused); + window.setTimeout(() => { + utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing); - utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused); + utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused); - this.toggleControls(this.paused); + this.toggleControls(!this.playing); + }, 10); }, // Check if media is loading |