Added ended and playing getters
This commit is contained in:
@ -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
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js.map
vendored
2
dist/plyr.js.map
vendored
File diff suppressed because one or more lines are too long
@ -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]);
|
||||||
|
@ -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');
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
|
Reference in New Issue
Block a user