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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
changelog.md
View File

@ -1,5 +1,8 @@
# Changelog
## v1.0.23
- Handling loading states in the UI
## v1.0.22
- Added support() API method for checking mimetype support
- Added source() API method for setting media source(s)

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/error.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.22/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/docs.css">
</head>
<body>
<main>

10
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.22/plyr.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.22/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/docs.css">
</head>
<body>
<header>
@ -67,13 +67,13 @@
<!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script>
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.22/sprite.svg");
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.23/sprite.svg");
</script>
<!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.22/plyr.js"></script>
<script src="//cdn.plyr.io/1.0.23/plyr.js"></script>
<!-- Docs script -->
<script src="//cdn.plyr.io/1.0.22/docs.js"></script>
<script src="//cdn.plyr.io/1.0.23/docs.js"></script>
</body>
</html>

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "1.0.22",
"version": "1.0.23",
"description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io",
"main": "gulpfile.js",

20
readme.md
View File

@ -38,7 +38,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.21/plyr.js` to `https://cdn.plyr.io/1.0.21/plyr.js`
**Heads up**, the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.0.23/plyr.js` to `https://cdn.plyr.io/1.0.23/plyr.js`
### Bower
If bower is your thang, you can grab Plyr using:
@ -51,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/plyr.css">
<script src="//cdn.plyr.io/1.0.21/plyr.js"></script>
<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/plyr.css">
<script src="//cdn.plyr.io/1.0.23/plyr.js"></script>
```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.21/sprite.svg`.
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.23/sprite.svg`.
### CSS
If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@ -349,19 +349,21 @@ Fullscreen in Plyr is supported for all browsers that [currently support it](htt
</thead>
<tbody>
<tr>
<td>✔&sup1;</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td>✖&sup1;</td>
<td>✔&sup2;</td>
<td>✖&sup2;</td>
<td>✔&sup3;</td>
</tr>
</tbody>
</table>
&sup1; Native player used (no support for `<progress>` or `<input type="range">`)
&sup1; iPhone forces the native player for `<video>` so no customisation possible
&sup2; IE10 has no native fullscreen support, fallback can be used (see options)
&sup2; Native player used (no support for `<progress>` or `<input type="range">`)
&sup3; IE10 has no native fullscreen support, fallback can be used (see options)
The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:

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

29
src/less/plyr.less
View File

@ -27,6 +27,8 @@
@progress-bg: lighten(@gray, 10%);
@progress-playing-bg: @blue;
@progress-buffered-bg: @gray;
@progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15);
// Volume
@volume-track-height: 6px;
@ -59,13 +61,18 @@
&:after { content: ""; display: table; }
&:after { clear: both; }
}
// Tab focus styles
.tab-focus() {
outline: thin dotted #000;
outline-offset: 0;
}
// Animation
// ---------------------------------------
@keyframes progress {
to { background-position: @progress-loading-size 0; }
}
// <input type="range"> styling
// ---------------------------------------
.volume-thumb() {
@ -86,7 +93,7 @@
.seek-thumb() {
background: transparent;
border: 0;
width: 2px;
width: (@control-spacing * 2);
height: @control-spacing;
}
.seek-track() {
@ -345,6 +352,24 @@
}
}
// Loading state
&.loading .player-progress-buffer {
animation: progress 1s linear infinite;
background-size: @progress-loading-size @progress-loading-size;
background-repeat: repeat-x;
background-color: @progress-buffered-bg;
background-image: linear-gradient(
-45deg,
@progress-loading-bg 25%,
transparent 25%,
transparent 50%,
@progress-loading-bg 50%,
@progress-loading-bg 75%,
transparent 75%,
transparent);
color: transparent;
}
// States
&-controls [data-player='pause'],
&.playing .player-controls [data-player='play'] {

30
src/sass/plyr.scss
View File

@ -21,13 +21,14 @@ $controls-bg: $gray-dark;
$control-bg-hover: $blue;
$control-color: $gray-light;
$control-color-inactive: $gray;
$control-color-focus: #fff;
$control-color-hover: #fff;
// Progress
$progress-bg: lighten($gray, 10%);
$progress-playing-bg: $blue;
$progress-buffered-bg: $gray;
$progress-loading-size: 40px;
$progress-loading-bg: rgba(0,0,0, .15);
// Range
$volume-track-height: 6px;
@ -61,7 +62,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
&:after { content: ""; display: table; }
&:after { clear: both; }
}
// Tab focus styles
@mixin tab-focus()
{
@ -69,6 +69,12 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
outline-offset: 0;
}
// Animation
// ---------------------------------------
@keyframes progress {
to { background-position: @progress-loading-size 0; }
}
// <input type="range"> styling
// ---------------------------------------
@mixin volume-thumb()
@ -91,7 +97,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
@mixin seek-thumb() {
background: transparent;
border: 0;
width: 2px;
width: ($control-spacing * 2);
height: $control-spacing;
}
@mixin seek-track() {
@ -350,6 +356,24 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
}
}
// Loading state
&.loading .player-progress-buffer {
animation: progress 1s linear infinite;
background-size: $progress-loading-size $progress-loading-size;
background-repeat: repeat-x;
background-color: $progress-buffered-bg;
background-image: linear-gradient(
-45deg,
$progress-loading-bg 25%,
transparent 25%,
transparent 50%,
$progress-loading-bg 50%,
$progress-loading-bg 75%,
transparent 75%,
transparent);
color: transparent;
}
// States
&-controls [data-player='pause'],
&.playing .player-controls [data-player='play'] {