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

Work on source update and caption fixes

Browse Source
This commit is contained in:
Sam Potts 2015-03-06 17:46:06 +11:00
parent c48afb7880
commit 4f47ec49b1
2 changed files with 179 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

315
src/js/plyr.js
View File

@ -204,6 +204,36 @@
// Return data // Return data
return [browserName, majorVersion]; return [browserName, majorVersion];
} }
// Check for mime type support against a player instance
// Credits: http://diveintohtml5.info/everything.html
// Related: http://www.leanbackplayer.com/test/h5mt.html
function _support(player, mimeType) {
var media = player.media;
// Only check video types for video players
if(player.type == "video") {
// Check type
switch(mimeType) {
case "video/webm": return !!(media.canPlayType && media.canPlayType("video/webm; codecs=\"vp8, vorbis\"").replace(/no/, ""));
case "video/mp4": return !!(media.canPlayType && media.canPlayType("video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"").replace(/no/, ""));
case "video/ogg": return !!(media.canPlayType && media.canPlayType("video/ogg; codecs=\"theora\"").replace(/no/, ""));
}
}
// Only check audio types for audio players
else if(player.type == "audio") {
// Check type
switch(mimeType) {
case "audio/mpeg": return !!(media.canPlayType && media.canPlayType("audio/mpeg;").replace(/no/, ""));
case "audio/ogg": return !!(media.canPlayType && media.canPlayType("audio/ogg; codecs=\"vorbis\"").replace(/no/, ""));
case "audio/wav": return !!(media.canPlayType && media.canPlayType("audio/wav; codecs=\"1\"").replace(/no/, ""));
}
}
// If we got this far, we're stuffed
return false;
}
// Replace all // Replace all
function _replaceAll(string, find, replace) { function _replaceAll(string, find, replace) {
@ -242,6 +272,11 @@
} }
} }
// Remove an element
function _remove(element) {
element.parentNode.removeChild(element);
}
// Toggle class on an element // Toggle class on an element
function _toggleClass(element, name, state) { function _toggleClass(element, name, state) {
if(element){ if(element){
@ -264,18 +299,6 @@
} }
} }
// Set attributes
function _setAttributes(element, attributes) {
for(var key in attributes) {
element.setAttribute(key, attributes[key]);
}
}
// Prepend child
function _prependChild(parent, element) {
parent.insertBefore(element, parent.firstChild);
}
// Bind event // Bind event
function _on(element, events, callback) { function _on(element, events, callback) {
_toggleHandler(element, events, callback, true); _toggleHandler(element, events, callback, true);
@ -404,19 +427,45 @@
player.container = container; player.container = container;
// Captions functions // Captions functions
// Credits: http://paypal.github.io/accessible-html5-video-player/ // Seek the manual caption time and update UI
function _seekManualCaptions(time) {
// If it's not video, or we're using textTracks, bail.
if (player.usingTextTracks || player.type !== "video") {
return;
}
// For "manual" captions, adjust caption position when play time changed (via rewind, clicking progress bar, etc.) // Reset subcount
function _adjustManualCaptions() {
player.subcount = 0; player.subcount = 0;
while (_timecodeMax(player.captions[player.subcount][0]) < player.media.currentTime.toFixed(1)) {
// Check time is a number, if not use currentTime
// IE has a bug where currentTime doesn't go to 0
// https://twitter.com/Sam_Potts/status/573715746506731521
time = typeof time === "number" ? time : player.media.currentTime;
while (_timecodeMax(player.captions[player.subcount][0]) < time.toFixed(1)) {
player.subcount++; player.subcount++;
if (player.subcount > player.captions.length-1) { if (player.subcount > player.captions.length-1) {
player.subcount = player.captions.length-1; player.subcount = player.captions.length-1;
break; break;
} }
} }
// Check if the next caption is in the current time range
if (player.media.currentTime.toFixed(1) >= _timecodeMin(player.captions[player.subcount][0]) &&
player.media.currentTime.toFixed(1) <= _timecodeMax(player.captions[player.subcount][0])) {
player.currentCaption = player.captions[player.subcount][1];
}
// Is there a next timecode?
if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) &&
player.subcount < (player.captions.length-1)) {
player.subcount++;
}
// Render the caption
player.captionsContainer.innerHTML = player.currentCaption;
} }
// Display captions container and button (for initialization) // Display captions container and button (for initialization)
function _showCaptions() { function _showCaptions() {
_toggleClass(player.container, config.classes.captions.enabled, true); _toggleClass(player.container, config.classes.captions.enabled, true);
@ -426,6 +475,7 @@
player.buttons.captions.setAttribute("checked", "checked"); player.buttons.captions.setAttribute("checked", "checked");
} }
} }
// Utilities for caption time codes // Utilities for caption time codes
function _timecodeMin(tc) { function _timecodeMin(tc) {
var tcpair = []; var tcpair = [];
@ -600,9 +650,9 @@
player.captionsContainer = _getElement(config.selectors.captions); player.captionsContainer = _getElement(config.selectors.captions);
// Determine if HTML5 textTracks is supported // Determine if HTML5 textTracks is supported
player.isTextTracks = false; player.usingTextTracks = false;
if (player.media.textTracks) { if (player.media.textTracks) {
player.isTextTracks = true; player.usingTextTracks = true;
} }
// Get URL of caption file if exists // Get URL of caption file if exists
@ -654,12 +704,12 @@
_log("Detected IE 10/11 or Firefox 31+ or Safari 7+."); _log("Detected IE 10/11 or Firefox 31+ or Safari 7+.");
// Set to false so skips to "manual" captioning // Set to false so skips to "manual" captioning
player.isTextTracks = false; player.usingTextTracks = false;
} }
// Rendering caption tracks // Rendering caption tracks
// Native support required - http://caniuse.com/webvtt // Native support required - http://caniuse.com/webvtt
if (player.isTextTracks) { if (player.usingTextTracks) {
_log("TextTracks supported."); _log("TextTracks supported.");
for (var y=0; y < tracks.length; y++) { for (var y=0; y < tracks.length; y++) {
@ -685,21 +735,6 @@
player.subcount = 0; player.subcount = 0;
player.captions = []; player.captions = [];
_on(player.media, "timeupdate", function() {
// Check if the next caption is in the current time range
if (player.media.currentTime.toFixed(1) > _timecodeMin(player.captions[player.subcount][0]) &&
player.media.currentTime.toFixed(1) < _timecodeMax(player.captions[player.subcount][0])) {
player.currentCaption = player.captions[player.subcount][1];
}
// Is there a next timecode?
if (player.media.currentTime.toFixed(1) > _timecodeMax(player.captions[player.subcount][0]) &&
player.subcount < (player.captions.length-1)) {
player.subcount++;
}
// Render the caption
player.captionsContainer.innerHTML = player.currentCaption;
});
if (captionSrc !== "") { if (captionSrc !== "") {
// Create XMLHttpRequest Object // Create XMLHttpRequest Object
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
@ -780,17 +815,6 @@
player.media.pause(); player.media.pause();
} }
// Restart playback
function _restart() {
// Move to beginning
player.media.currentTime = 0;
// Special handling for "manual" captions
if (!player.isTextTracks) {
player.subcount = 0;
}
}
// Rewind // Rewind
function _rewind(seekTime) { function _rewind(seekTime) {
// Use default if needed // Use default if needed
@ -810,8 +834,8 @@
} }
// Seek to time // Seek to time
// The parameter can be an event or a number
var _seek = function(input) { var _seek = function(input) {
//var value = config.seekTime;
var targetTime = 0; var targetTime = 0;
// If no event or time is passed, bail // If no event or time is passed, bail
@ -826,19 +850,25 @@
else if (input.type === "change" || input.type === "input") { else if (input.type === "change" || input.type === "input") {
// It's the seek slider // It's the seek slider
// Seek to the selected time // Seek to the selected time
targetTime = ((this.value / this.max) * player.media.duration).toFixed(1); targetTime = ((this.value / this.max) * player.media.duration);
}
// Normalise targetTime
if (targetTime < 0) {
targetTime = 0;
}
else if (targetTime > player.media.duration) {
targetTime = player.media.duration;
} }
// Set the current time // Set the current time
player.media.currentTime = targetTime; player.media.currentTime = targetTime.toFixed(1);
// Logging // Logging
_log("Seeking to " + player.media.currentTime + " seconds"); _log("Seeking to " + player.media.currentTime + " seconds");
// Special handling for "manual" captions // Special handling for "manual" captions
if (!player.isTextTracks && player.type === "video") { _seekManualCaptions(targetTime);
_adjustManualCaptions(player);
}
} }
// Check playing state // Check playing state
@ -958,53 +988,52 @@
// Update <progress> elements // Update <progress> elements
function _updateProgress(event) { function _updateProgress(event) {
var progress, text, value = 0; var progress = player.progress.played.bar,
text = player.progress.played.text,
value = 0;
switch(event.type) { if(event) {
// Video playing switch(event.type) {
case "timeupdate": // Video playing
case "seeking": case "timeupdate":
progress = player.progress.played.bar; case "seeking":
text = player.progress.played.text; value = _getPercentage(player.media.currentTime, player.media.duration);
value = _getPercentage(player.media.currentTime, player.media.duration);
// Set seek range value only if it's a "natural" time event // Set seek range value only if it's a "natural" time event
if(event.type == "timeupdate") { if(event.type == "timeupdate") {
player.buttons.seek.value = value; player.buttons.seek.value = value;
} }
break; break;
// Events from seek range // Events from seek range
case "change": case "change":
case "input": case "input":
progress = player.progress.played.bar; value = event.target.value;
text = player.progress.played.text; break;
value = event.target.value;
break;
// Check buffer status // Check buffer status
case "playing": case "playing":
case "progress": case "progress":
progress = player.progress.buffer.bar; progress = player.progress.buffer.bar;
text = player.progress.buffer.text; text = player.progress.buffer.text;
value = (function() { value = (function() {
var buffered = player.media.buffered; var buffered = player.media.buffered;
if(buffered.length) { if(buffered.length) {
return _getPercentage(buffered.end(0), player.media.duration); return _getPercentage(buffered.end(0), player.media.duration);
} }
return 0; return 0;
})(); })();
break; break;
}
} }
if (progress && value > 0) { // Set values
progress.value = value; progress.value = value;
text.innerHTML = value; text.innerHTML = value;
}
} }
// Update the displayed play time // Update the displayed play time
@ -1024,20 +1053,19 @@
function _timeUpdate(event) { function _timeUpdate(event) {
// Duration // Duration
_updateTimeDisplay(); _updateTimeDisplay();
// Playing progress // Playing progress
_updateProgress(event); _updateProgress(event);
} }
// Remove an element // Remove <source> children and src attribute
function _remove(element) {
element.parentNode.removeChild(element);
}
// Remove sources
function _removeSources() { function _removeSources() {
// Remove child <source> elements // Find child <source> elements
var sources = player.media.querySelectorAll("source"); var sources = player.media.querySelectorAll("source");
// Remove each
for (var i = sources.length - 1; i >= 0; i--) { for (var i = sources.length - 1; i >= 0; i--) {
_log(sources[i]);
_remove(sources[i]); _remove(sources[i]);
} }
@ -1045,51 +1073,60 @@
player.media.removeAttribute("src"); player.media.removeAttribute("src");
} }
// Inject a source // Set source
function _addSource(attributes) { function _setSource(source) {
// Create a new <source> if(source.type && source.src) {
var element = document.createElement("source"); // Check if it's supported first
if(_support(player, source.type)) {
// Pause playback (webkit freaks out)
_pause();
// Set all passed attributes // Update the UI
_setAttributes(element, attributes); _checkPlaying();
// Inject the new source // Remove current sources
_prependChild(player.media, element); _removeSources();
// Set the src attribute
player.media.setAttribute("src", source.src);
// Restart
_seek();
// Reset time display
_timeUpdate();
// Play if autoplay attribute is present
if(player.media.getAttribute("autoplay") !== null) {
_play();
}
}
else {
_log("No support for: " + source.src + " [" + source.type + "]");
}
}
} }
// Update source // Update source
function _updateSource(sources) { function _parseSource(sources) {
// Pause on update // If a single source object is provided
// Play automatically if autoplay set or already playing // ({ src: "//cdn.selz.com/plyr/1.0/movie.webm", type: "video/webm" })
if(typeof sources === "object" && sources.constructor !== Array) {
// Remove current sources
_removeSources();
// If a single source is provided
// ("path/to/src.mp4")
if(typeof sources === "string") {
// Set src attribute on the element // Set src attribute on the element
player.media.setAttribute("src", sources); _setSource(sources);
} }
// Single source but using object to pass attributes
// ({ src: "path/to/src.mp4", type: "video/mp4" }) // An array of source objects
else if (typeof sources === "object") { // Check if a source exists, use that or set the "src" attribute?
_addSource(sources); // [{ src: "path/to/src.mp4", type: "video/mp4" },{ src: "path/to/src.webm", type: "video/webm" }]
}
// Array of source objects to pass attributes
// ([{ src: "path/to/src.mp4", type: "video/mp4" },{ src: "path/to/src.webm", type: "video/webm" }])
else if (sources.constructor === Array) { else if (sources.constructor === Array) {
for (var key in sources) { for (var index in sources) {
_addSource(sources[key]); _setSource(sources[index]);
} }
} }
// Not an object or an array
// Restart else {
_restart(); _log("Bad source format...");
// Play if autoplay attribute is present
if(player.media.getAttribute("autoplay") !== null) {
_play();
} }
} }
@ -1115,7 +1152,7 @@
}); });
// Restart // Restart
_on(player.buttons.restart, "click", _restart); _on(player.buttons.restart, "click", _seek);
// Rewind // Rewind
_on(player.buttons.rewind, "click", _rewind); _on(player.buttons.rewind, "click", _rewind);
@ -1147,7 +1184,7 @@
_play(); _play();
} }
else if(player.media.ended) { else if(player.media.ended) {
_restart(); _seek();
_play(); _play();
} }
else { else {
@ -1159,6 +1196,9 @@
// Time change on media // Time change on media
_on(player.media, "timeupdate seeking", _timeUpdate); _on(player.media, "timeupdate seeking", _timeUpdate);
// Update manual captions
_on(player.media, "timeupdate", _seekManualCaptions);
// Seek // Seek
_on(player.buttons.seek, "change input", _seek); _on(player.buttons.seek, "change input", _seek);
@ -1243,15 +1283,16 @@
media: player.media, media: player.media,
play: _play, play: _play,
pause: _pause, pause: _pause,
restart: _restart, restart: _seek,
rewind: _rewind, rewind: _rewind,
forward: _forward, forward: _forward,
seek: _seek, seek: _seek,
setVolume: _setVolume, setVolume: _setVolume,
toggleMute: _toggleMute, toggleMute: _toggleMute,
toggleCaptions: _toggleCaptions, toggleCaptions: _toggleCaptions,
source: _updateSource, source: _parseSource,
poster: _updatePoster poster: _updatePoster,
support: _support
} }
} }