ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sam Potts
2016-11-02 18:09:40 +11:00
parent 10561d6c83
commit efe54fbba4
5 changed files with 74 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/js/plyr.js
View File

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