aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2016-01-14 23:50:00 +1100
committerSam Potts <me@sampotts.me>2016-01-14 23:50:00 +1100
commit9fbbb474db34ca949b755fbe38684aa034a3e478 (patch)
tree6b74beee2fda120dd654aea6c1615df8f7971b0d /src
parentbc7a6ebdde36a4f092f41196e2f7f9ea5007bc04 (diff)
downloadplyr-9fbbb474db34ca949b755fbe38684aa034a3e478.tar.lz
plyr-9fbbb474db34ca949b755fbe38684aa034a3e478.tar.xz
plyr-9fbbb474db34ca949b755fbe38684aa034a3e478.zip
Clean up
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js428
-rw-r--r--src/less/plyr.less2
2 files changed, 217 insertions, 213 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 1953f864..4d5fa3fe 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -980,6 +980,11 @@
}
}
+ // Toggle style hook
+ function _toggleStyleHook() {
+ _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), plyr.supported.full);
+ }
+
// Setup aria attribute for play and iframe title
function _setTitle(iframe) {
// Find the current text
@@ -1136,20 +1141,11 @@
// When embeds are ready
function _embedReady() {
- // Inject and update UI
- if (plyr.supported.full) {
- // Only setup controls once
- if (!plyr.container.querySelectorAll(config.selectors.controls.wrapper).length) {
- _setupInterface();
- }
- }
+ // Setup the UI
+ _setupInterface();
// Set title
_setTitle(_getElement('iframe'));
-
- // Set the volume
- _setVolume();
- _updateVolume();
}
// Handle YouTube API ready
@@ -1165,7 +1161,7 @@
plyr.embed = new YT.Player(container.id, {
videoId: videoId,
playerVars: {
- autoplay: (config.autoplay ? 1 : 0),
+ autoplay: 0,
controls: (plyr.supported.full ? 0 : 1),
rel: 0,
showinfo: 0,
@@ -1196,7 +1192,7 @@
plyr.media.paused = true;
};
plyr.media.duration = instance.getDuration();
- plyr.media.paused = !config.autoplay;
+ plyr.media.paused = true;
plyr.media.currentTime = instance.getCurrentTime();
plyr.media.muted = instance.isMuted();
@@ -1224,9 +1220,7 @@
_embedReady();
// Display duration if available
- if (config.displayDuration) {
- _displayDuration();
- }
+ _displayDuration();
},
'onStateChange': function(event) {
// Get the instance
@@ -1250,6 +1244,7 @@
case 1:
plyr.media.paused = false;
+ plyr.media.seeking = false;
_triggerEvent(plyr.media, 'play');
// Poll to get playback progress
@@ -1259,7 +1254,7 @@
// Trigger timeupdate
_triggerEvent(plyr.media, 'timeupdate');
- }, 200);
+ }, 100);
break;
@@ -1293,7 +1288,7 @@
plyr.embed.api('stop');
plyr.media.paused = true;
};
- plyr.media.paused = !config.autoplay;
+ plyr.media.paused = true;
plyr.media.currentTime = 0;
// Update UI
@@ -1310,9 +1305,7 @@
plyr.media.duration = value;
// Display duration if available
- if (plyr.supported.full && config.displayDuration) {
- _displayDuration();
- }
+ _displayDuration();
});
plyr.embed.addEvent('play', function() {
@@ -1326,6 +1319,7 @@
});
plyr.embed.addEvent('playProgress', function(data) {
+ plyr.media.seeking = false;
plyr.media.currentTime = data.seconds;
_triggerEvent(plyr.media, 'timeupdate');
});
@@ -1352,149 +1346,151 @@
// Setup captions
function _setupCaptions() {
- if (plyr.type === 'video') {
- // Inject the container
- if (!_getElement(config.selectors.captions)) {
- plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>');
- }
+ if (plyr.type !== 'video') {
+ return;
+ }
- // Cache selector
- plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
+ // Inject the container
+ if (!_getElement(config.selectors.captions)) {
+ plyr.videoContainer.insertAdjacentHTML('afterbegin', '<div class="' + _getClassname(config.selectors.captions) + '"><span></span></div>');
+ }
- // Determine if HTML5 textTracks is supported
- plyr.usingTextTracks = false;
- if (plyr.media.textTracks) {
- plyr.usingTextTracks = true;
- }
+ // Cache selector
+ plyr.captionsContainer = _getElement(config.selectors.captions).querySelector('span');
- // Get URL of caption file if exists
- var captionSrc = '',
- kind,
- children = plyr.media.childNodes;
+ // Determine if HTML5 textTracks is supported
+ plyr.usingTextTracks = false;
+ if (plyr.media.textTracks) {
+ plyr.usingTextTracks = true;
+ }
- for (var i = 0; i < children.length; i++) {
- if (children[i].nodeName.toLowerCase() === 'track') {
- kind = children[i].kind;
- if (kind === 'captions' || kind === 'subtitles') {
- captionSrc = children[i].getAttribute('src');
- }
+ // Get URL of caption file if exists
+ var captionSrc = '',
+ kind,
+ children = plyr.media.childNodes;
+
+ for (var i = 0; i < children.length; i++) {
+ if (children[i].nodeName.toLowerCase() === 'track') {
+ kind = children[i].kind;
+ if (kind === 'captions' || kind === 'subtitles') {
+ captionSrc = children[i].getAttribute('src');
}
}
+ }
- // Record if caption file exists or not
- plyr.captionExists = true;
- if (captionSrc === '') {
- plyr.captionExists = false;
- _log('No caption track found.');
- }
- else {
- _log('Caption track found; URI: ' + captionSrc);
- }
+ // Record if caption file exists or not
+ plyr.captionExists = true;
+ if (captionSrc === '') {
+ plyr.captionExists = false;
+ _log('No caption track found.');
+ }
+ else {
+ _log('Caption track found; URI: ' + captionSrc);
+ }
- // If no caption file exists, hide container for caption text
- if (!plyr.captionExists) {
- _toggleClass(plyr.container, config.classes.captions.enabled);
+ // If no caption file exists, hide container for caption text
+ if (!plyr.captionExists) {
+ _toggleClass(plyr.container, config.classes.captions.enabled);
+ }
+ // If caption file exists, process captions
+ else {
+ // Turn off native caption rendering to avoid double captions
+ // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
+ var tracks = plyr.media.textTracks;
+ for (var x = 0; x < tracks.length; x++) {
+ tracks[x].mode = 'hidden';
}
- // If caption file exists, process captions
- else {
- // Turn off native caption rendering to avoid double captions
- // This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
- var tracks = plyr.media.textTracks;
- for (var x = 0; x < tracks.length; x++) {
- tracks[x].mode = 'hidden';
- }
- // Enable UI
- _showCaptions(plyr);
+ // Enable UI
+ _showCaptions(plyr);
- // Disable unsupported browsers than report false positive
- if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
- (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) ||
- (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
- (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
- // Debugging
- _log('Detected unsupported browser for HTML5 captions. Using fallback.');
+ // Disable unsupported browsers than report false positive
+ if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
+ (plyr.browser.name === 'Firefox' && plyr.browser.version >= 31) ||
+ (plyr.browser.name === 'Chrome' && plyr.browser.version >= 43) ||
+ (plyr.browser.name === 'Safari' && plyr.browser.version >= 7)) {
+ // Debugging
+ _log('Detected unsupported browser for HTML5 captions. Using fallback.');
- // Set to false so skips to 'manual' captioning
- plyr.usingTextTracks = false;
- }
+ // Set to false so skips to 'manual' captioning
+ plyr.usingTextTracks = false;
+ }
- // Rendering caption tracks
- // Native support required - http://caniuse.com/webvtt
- if (plyr.usingTextTracks) {
- _log('TextTracks supported.');
+ // Rendering caption tracks
+ // Native support required - http://caniuse.com/webvtt
+ if (plyr.usingTextTracks) {
+ _log('TextTracks supported.');
- for (var y = 0; y < tracks.length; y++) {
- var track = tracks[y];
+ for (var y = 0; y < tracks.length; y++) {
+ var track = tracks[y];
- if (track.kind === 'captions' || track.kind === 'subtitles') {
- _on(track, 'cuechange', function() {
- // Clear container
- plyr.captionsContainer.innerHTML = '';
+ if (track.kind === 'captions' || track.kind === 'subtitles') {
+ _on(track, 'cuechange', function() {
+ // Clear container
+ plyr.captionsContainer.innerHTML = '';
- // Display a cue, if there is one
- if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) {
- plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim());
- }
- });
- }
+ // Display a cue, if there is one
+ if (this.activeCues[0] && this.activeCues[0].hasOwnProperty('text')) {
+ plyr.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML().trim());
+ }
+ });
}
}
- // Caption tracks not natively supported
- else {
- _log('TextTracks not supported so rendering captions manually.');
+ }
+ // Caption tracks not natively supported
+ else {
+ _log('TextTracks not supported so rendering captions manually.');
- // Render captions from array at appropriate time
- plyr.currentCaption = '';
- plyr.captions = [];
+ // Render captions from array at appropriate time
+ plyr.currentCaption = '';
+ plyr.captions = [];
- if (captionSrc !== '') {
- // Create XMLHttpRequest Object
- var xhr = new XMLHttpRequest();
+ if (captionSrc !== '') {
+ // Create XMLHttpRequest Object
+ var xhr = new XMLHttpRequest();
- xhr.onreadystatechange = function() {
- if (xhr.readyState === 4) {
- if (xhr.status === 200) {
- var records = [],
- record,
- req = xhr.responseText;
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ var records = [],
+ record,
+ req = xhr.responseText;
- records = req.split('\n\n');
+ records = req.split('\n\n');
- for (var r = 0; r < records.length; r++) {
- record = records[r];
- plyr.captions[r] = [];
- plyr.captions[r] = record.split('\n');
- }
+ for (var r = 0; r < records.length; r++) {
+ record = records[r];
+ plyr.captions[r] = [];
+ plyr.captions[r] = record.split('\n');
+ }
- // Remove first element ('VTT')
- plyr.captions.shift();
+ // Remove first element ('VTT')
+ plyr.captions.shift();
- _log('Successfully loaded the caption file via AJAX.');
- }
- else {
- _log('There was a problem loading the caption file via AJAX.', true);
- }
+ _log('Successfully loaded the caption file via AJAX.');
}
- };
+ else {
+ _log('There was a problem loading the caption file via AJAX.', true);
+ }
+ }
+ };
- xhr.open('get', captionSrc, true);
+ xhr.open('get', captionSrc, true);
- xhr.send();
- }
+ xhr.send();
}
+ }
- // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above]
- if (plyr.browser.name === 'Safari' && plyr.browser.version >= 7) {
- _log('Safari 7+ detected; removing track from DOM.');
+ // If Safari 7+, removing track from DOM [see 'turn off native caption rendering' above]
+ if (plyr.browser.name === 'Safari' && plyr.browser.version >= 7) {
+ _log('Safari 7+ detected; removing track from DOM.');
- // Find all <track> elements
- tracks = plyr.media.getElementsByTagName('track');
+ // Find all <track> elements
+ tracks = plyr.media.getElementsByTagName('track');
- // Loop through and remove one by one
- for (var t = 0; t < tracks.length; t++) {
- plyr.media.removeChild(tracks[t]);
- }
+ // Loop through and remove one by one
+ for (var t = 0; t < tracks.length; t++) {
+ plyr.media.removeChild(tracks[t]);
}
}
}
@@ -1502,6 +1498,10 @@
// Setup fullscreen
function _setupFullscreen() {
+ if (!plyr.supported.full) {
+ return;
+ }
+
if ((plyr.type != 'audio' || config.fullscreen.allowAudio) && config.fullscreen.enabled) {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
@@ -1609,24 +1609,28 @@
}
catch(e) {}
- // Trigger timeupdate for embed and restore pause state
- if ('embed' in plyr) {
+ // Embeds
+ if(_inArray(config.types.embed, plyr.type)) {
// YouTube
- if (plyr.type === 'youtube') {
- plyr.embed.seekTo(targetTime);
- }
+ switch(plyr.type) {
+ case 'youtube':
+ plyr.embed.seekTo(targetTime);
+ break;
- // Vimeo
- if (plyr.type === 'vimeo') {
- plyr.embed.api('seekTo', targetTime);
+ case 'vimeo':
+ plyr.embed.api('seekTo', targetTime);
+ break;
}
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'timeupdate');
-
if (paused) {
_pause();
}
+
+ // Trigger timeupdate for embeds
+ _triggerEvent(plyr.media, 'timeupdate');
+
+ // Set seeking flag
+ plyr.media.seeking = true;
}
// Logging
@@ -1754,24 +1758,20 @@
// Set mute on the player
plyr.media.muted = muted;
- // YouTube
- if (plyr.type === 'youtube') {
- plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
-
- // Trigger timeupdate
- _triggerEvent(plyr.media, 'volumechange');
- }
+ // Embeds
+ if(_inArray(config.types.embed, plyr.type)) {
+ // YouTube
+ switch(plyr.type) {
+ case 'youtube':
+ plyr.embed[plyr.media.muted ? 'mute' : 'unMute']();
+ break;
- // Vimeo
- if (plyr.type === 'vimeo') {
- if (plyr.media.muted) {
- plyr.embed.api('setVolume', 0);
- }
- else {
- plyr.embed.api('setVolume', parseFloat(config.volume / 10));
+ case 'vimeo':
+ plyr.embed.api('setVolume', plyr.media.muted ? 0 : parseFloat(config.volume / 10));
+ break;
}
- // Trigger timeupdate
+ // Trigger volumechange for embeds
_triggerEvent(plyr.media, 'volumechange');
}
}
@@ -1803,18 +1803,20 @@
// Store in config
config.volume = volume;
- // YouTube
- if (plyr.type === 'youtube') {
- plyr.embed.setVolume(plyr.media.volume * 100);
- }
+ // Embeds
+ if(_inArray(config.types.embed, plyr.type)) {
+ // YouTube
+ switch(plyr.type) {
+ case 'youtube':
+ plyr.embed.setVolume(plyr.media.volume * 100);
+ break;
- // Vimeo
- if (plyr.type === 'vimeo') {
- plyr.embed.api('setVolume', plyr.media.volume);
- }
+ case 'vimeo':
+ plyr.embed.api('setVolume', plyr.media.volume);
+ break;
+ }
- // Trigger volumechange for embeds
- if ('embed' in plyr) {
+ // Trigger volumechange for embeds
_triggerEvent(plyr.media, 'volumechange');
}
@@ -1970,6 +1972,10 @@
// Show the duration on metadataloaded
function _displayDuration() {
+ if (!plyr.supported.full) {
+ return;
+ }
+
var duration = plyr.media.duration || 0;
// If there's only one time display, display duration there
@@ -1988,6 +1994,11 @@
// Duration
_updateTimeDisplay(plyr.media.currentTime, plyr.currentTime);
+ // Ignore updates while seeking
+ if(event && event.type == 'timeupdate' && plyr.media.seeking) {
+ return;
+ }
+
// Playing progress
_updateProgress(event);
}
@@ -2041,7 +2052,7 @@
window.clearInterval(plyr.timer.buffering);
window.clearInterval(plyr.timer.playing);
}
- else if (plyr.type === 'video') {
+ else if (plyr.type === 'video' && plyr.videoContainer) {
// Remove video wrapper
_remove(plyr.videoContainer);
}
@@ -2105,6 +2116,7 @@
// Restore class hooks
_toggleClass(plyr.container, config.classes.fullscreen.active, plyr.isFullscreen);
_toggleClass(plyr.container, config.classes.captions.active, plyr.captionsEnabled);
+ _toggleStyleHook();
// Autoplay the new source?
config.autoplay = (source.autoplay || config.autoplay);
@@ -2117,41 +2129,29 @@
// Set up from scratch
_setupMedia();
- // Trigger media updated
- _mediaUpdated();
-
// HTML5 stuff
if (_inArray(config.types.html5, plyr.type)) {
- // Set volume
- _setVolume();
- _updateVolume();
-
- // UI updates
- if (plyr.supported.full) {
- // Reset time display
- _timeUpdate();
-
- // Update the UI
- _checkPlaying();
- }
-
// Setup captions
if ('tracks' in source) {
_insertChildElements('track', source.tracks);
-
- // Captions
- _setupCaptions();
}
// Load HTML5 sources
plyr.media.load();
- // Play if autoplay attribute is present
- if (config.autoplay) {
- _play();
- }
+ // Display duration if available
+ _displayDuration();
+
+ // Setup interface
+ _setupInterface();
}
+ // Play if autoplay attribute is present
+ if (config.autoplay) {
+ _play();
+ }
+
+ // Set aria title and iframe title
if ('title' in source) {
config.title = source.title;
_setTitle();
@@ -2376,9 +2376,6 @@
// Get the media element
plyr.media = plyr.container.querySelectorAll('audio, video, div')[0];
- // Add style hook
- _toggleClass(plyr.container, defaults.selectors.container.replace('.', ''), true);
-
// Get original classname
plyr.originalClassName = plyr.container.className;
@@ -2403,6 +2400,9 @@
// Check for full support
plyr.supported = api.supported(plyr.type);
+ // Add style hook
+ _toggleStyleHook();
+
// If no native support, bail
if (!plyr.supported.basic) {
return false;
@@ -2415,7 +2415,7 @@
_setupMedia();
// Setup interface
- if (plyr.type == 'video' || plyr.type == 'audio') {
+ if (_inArray(config.types.html5, plyr.type)) {
// Bail if no support
if (!plyr.supported.full) {
// Successful setup
@@ -2428,11 +2428,6 @@
// Setup UI
_setupInterface();
- // Display duration if available
- if (config.displayDuration) {
- _displayDuration();
- }
-
// Set title on button and frame
_setTitle();
}
@@ -2442,31 +2437,40 @@
}
function _setupInterface() {
+ // Don't setup interface if no support
+ if (!plyr.supported.full) {
+ return;
+ }
+
// Inject custom controls
- _injectControls();
+ if (!plyr.container.querySelectorAll(config.selectors.controls.wrapper).length) {
+ // Inject custom controls
+ _injectControls();
+ }
// Find the elements
if (!_findElements()) {
- return false;
+ return;
}
+ // Setup fullscreen
+ _setupFullscreen();
+
+ // Listeners
+ _listeners();
+
// Captions
_setupCaptions();
- // Media updated
- _mediaUpdated();
-
// Set volume
_setVolume();
_updateVolume();
- }
- function _mediaUpdated() {
- // Setup fullscreen
- _setupFullscreen();
+ // Reset time display
+ _timeUpdate();
- // Listeners
- _listeners();
+ // Update the UI
+ _checkPlaying();
}
// Initialize instance
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 891b6f9d..fde725d7 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -583,7 +583,7 @@
// Hide sound controls on iOS
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
- &--is-ios &-volume,
+ &--is-ios &__volume,
&--is-ios [data-plyr='mute'],
&--is-ios.plyr--audio &__controls--right {
display: none;