Added seek event fixes (fixes #409), Added support for URLs (fixes #345)

1 files changed, 44 insertions, 23 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index 4ebb060a..37500fe5 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -175,7 +175,7 @@
             fullscreen:         null
         },
         // Events to watch on HTML5 media elements
-        events:                 ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'emptied'],
+        events:                 ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'seeked', 'emptied'],
         // Logging
         logPrefix:              '[Plyr]'
     };
@@ -596,6 +596,18 @@
         }
     };
 
+    // Parse YouTube ID from url
+    function _parseYouTubeId(url) {
+        var regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
+        return (url.match(regex)) ? RegExp.$2 : url;
+    }
+
+    // Parse Vimeo ID from url
+    function _parseVimeoId(url) {
+        var regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
+        return (url.match(regex)) ? RegExp.$2 : url;
+    }
+
     // Fullscreen API
     function _fullscreen() {
         var fullscreen = {
@@ -1505,9 +1517,23 @@
         // Setup YouTube/Vimeo
         function _setupEmbed() {
             var container = document.createElement('div'),
-                mediaId = plyr.embedId,
+                mediaId,
                 id = plyr.type + '-' + Math.floor(Math.random() * (10000));
 
+            // Parse IDs from URLs if supplied
+            switch (plyr.type) {
+                case 'youtube':
+                    mediaId = _parseYouTubeId(plyr.embedId);
+                    break;
+
+                case 'vimeo':
+                    mediaId = _parseVimeoId(plyr.embedId);
+                    break;
+
+                default: 
+                    mediaId = plyr.embedId;
+            }
+
             // Remove old containers
             var containers = _getElements('[id^="' + plyr.type + '-"]');
             for (var i = containers.length - 1; i >= 0; i--) {
@@ -1724,6 +1750,12 @@
 
                             case 1:
                                 plyr.media.paused = false;
+
+                                // If we were seeking, fire seeked event
+                                if (plyr.media.seeking) {
+                                    _triggerEvent(plyr.media, 'seeked');
+                                }
+
                                 plyr.media.seeking = false;
                                 _triggerEvent(plyr.media, 'play');
                                 _triggerEvent(plyr.media, 'playing');
@@ -1848,6 +1880,12 @@
                 }
             });
 
+            plyr.embed.on('seeked', function() {
+                plyr.media.seeking = false;
+                _triggerEvent(plyr.media, 'seeked');
+                _triggerEvent(plyr.media, 'play');
+            });
+
             plyr.embed.on('ended', function() {
                 plyr.media.paused = true;
                 _triggerEvent(plyr.media, 'ended');
@@ -2009,7 +2047,6 @@
 
             // Embeds
             if (_inArray(config.types.embed, plyr.type)) {
-                // YouTube
                 switch(plyr.type) {
                     case 'youtube':
                         plyr.embed.seekTo(targetTime);
@@ -2029,11 +2066,14 @@
                     _pause();
                 }
 
-                // Trigger timeupdate for embeds
+                // Trigger timeupdate
                 _triggerEvent(plyr.media, 'timeupdate');
 
                 // Set seeking flag
                 plyr.media.seeking = true;
+
+                // Trigger seeking
+                _triggerEvent(plyr.media, 'seeking');
             }
 
             // Logging
@@ -3259,19 +3299,6 @@
             }
         }
 
-        // Taken from https://gist.github.com/takien/4077195
-        function parseYoutubeVideoId(url) {
-            var videoId;
-            url = url.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
-            if(url[2] !== undefined) {
-                videoId = url[2].split(/[^0-9a-z_\-]/i);
-                videoId = videoId[0];
-            } else {
-                videoId = url;
-            }
-            return videoId;
-        }
-
         // Setup a player
         function _init() {
             // Bail if the element is initialized
@@ -3300,12 +3327,6 @@
                 plyr.type     = media.getAttribute('data-type');
                 plyr.embedId  = media.getAttribute('data-video-id');
 
-                switch(plyr.type) {
-                    case 'youtube':
-                        plyr.embedId = parseYoutubeVideoId(plyr.embedId);
-                        break;
-                }
-
                 // Clean up
                 media.removeAttribute('data-type');
                 media.removeAttribute('data-video-id');