Added ended and playing getters

demo/index.html

@@ -82,9 +82,10 @@
         </header>
 
         <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 -->
                 <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 -->
                 <track kind="captions" label="English" srclang="en" src="media/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>

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]);

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');
 

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

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);
 
-        this.toggleControls(this.paused);
+            this.toggleControls(!this.playing);
+        }, 10);
     },
 
     // Check if media is loading