Added ended and playing getters

This commit is contained in:
Sam Potts
2017-11-20 10:48:28 +11:00
parent dc391c98c6
commit feae00224e
7 changed files with 34 additions and 9 deletions

View File

@ -82,9 +82,10 @@
</header> </header>
<main> <main>
<video controls crossorigin playsinline loop poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"> <video controls crossorigin playsinline poster="media/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player">
<!-- Video files --> <!-- Video files -->
<source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> <source src="media/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
<source src="media/View_From_A_Blue_Moon_Trailer-UHD.mp4" type="video/mp4">
<!-- Text track file --> <!-- Text track file -->
<track kind="captions" label="English" srclang="en" src="media/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default> <track kind="captions" label="English" srclang="en" src="media/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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 // Set aspect ratio based on video size
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]); const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]);

View File

@ -254,6 +254,13 @@ const youtube = {
}, },
}); });
// Ended
Object.defineProperty(player.media, 'ended', {
get() {
return player.currentTime === player.duration;
},
});
// Get available speeds // Get available speeds
if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) { if (player.config.controls.includes('settings') && player.config.settings.includes('speed')) {
controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates()); controls.setSpeedMenu.call(player, instance.getAvailablePlaybackRates());
@ -316,6 +323,8 @@ const youtube = {
// 5 Video cued // 5 Video cued
switch (event.data) { switch (event.data) {
case 0: case 0:
player.media.paused = true;
// 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) {
// YouTube needs a call to `stopVideo` before playing again // YouTube needs a call to `stopVideo` before playing again
@ -323,21 +332,19 @@ const youtube = {
instance.playVideo(); instance.playVideo();
} else { } else {
utils.dispatchEvent.call(player, player.media, 'ended'); utils.dispatchEvent.call(player, player.media, 'ended');
player.media.paused = true;
} }
break; break;
case 1: case 1:
player.media.paused = false; player.media.paused = false;
player.media.seeking = false;
// 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;
utils.dispatchEvent.call(player, player.media, 'play'); utils.dispatchEvent.call(player, player.media, 'play');
utils.dispatchEvent.call(player, player.media, 'playing'); utils.dispatchEvent.call(player, player.media, 'playing');

View File

@ -283,6 +283,14 @@ class Plyr {
return this.media.paused; 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 * Toggle playback based on current status
* @param {boolean} toggle * @param {boolean} toggle

View File

@ -138,11 +138,13 @@ const ui = {
// Check playing state // Check playing state
checkPlaying() { 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 // Check if media is loading