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

Loading state handling

Browse Source 
Fixes #36
This commit is contained in:
Sam Potts
2015-03-08 01:24:23 +11:00
parent 8482a1a320
commit 5370fc5c83
10 changed files with 103 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.22
// plyr.js v1.0.23
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -50,6 +50,7 @@
stopped: "stopped",
playing: "playing",
muted: "muted",
loading: "loading",
captions: {
enabled: "captions-enabled",
active: "captions-active"
@ -626,7 +627,7 @@
player.media.removeAttribute("controls");
// Set media type
player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio");
player.type = (player.media.tagName == "VIDEO" ? "video" : "audio");
// Add type class
_toggleClass(player.container, config.classes[player.type], true);
@ -994,6 +995,19 @@
_toggleClass(player.container, config.classes.muted, (player.media.volume === 0 || player.media.muted));
}
// Check if media is loading
function _checkLoading(event) {
var loading = (event.type === "waiting");
// Clear timer
clearTimeout(player.loadingTimer);
// Timer to prevent flicker when seeking
player.loadingTimer = setTimeout(function() {
_toggleClass(player.container, config.classes.loading, loading);
}, (loading ? 250 : 0));
}
// Update <progress> elements
function _updateProgress(event) {
var progress = player.progress.played.bar,
@ -1232,6 +1246,9 @@
// Handle native play/pause
_on(player.media, "play pause", _checkPlaying);
// Loading
_on(player.media, "waiting canplay seeked", _checkLoading);
}
function _init() {
@ -1321,6 +1338,13 @@
// Get the current element
var element = elements[i];
// Disabled for <video> for iPhone
// Since it doesn't allow customisation
if (element.querySelectorAll("audio, video")[0].tagName === "VIDEO"
&& /iPhone/i.test(navigator.userAgent)) {
continue;
}
// Setup a player instance and add to the element
if(typeof element.plyr === "undefined") {
element.plyr = new Plyr(element);