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 # Changelog
## v1.0.23
- Handling loading states in the UI
## v1.0.22 ## v1.0.22
- Added support() API method for checking mimetype support - Added support() API method for checking mimetype support
- Added source() API method for setting media source(s) - 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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- 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> </head>
<body> <body>
<main> <main>

10
docs/index.html
View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- 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 --> <!-- 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> </head>
<body> <body>
<header> <header>
@ -67,13 +67,13 @@
<!-- Load SVG defs --> <!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script> <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> </script>
<!-- Plyr core 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 --> <!-- 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> </body>
</html> </html>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.22", "version": "1.0.23",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "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. 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 ### Bower
If bower is your thang, you can grab Plyr using: 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. If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html ```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.23/plyr.css">
<script src="//cdn.plyr.io/1.0.21/plyr.js"></script> <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 ### 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. 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> </thead>
<tbody> <tbody>
<tr> <tr>
<td>✔&sup1;</td>
<td>✔</td> <td>✔</td>
<td>✔</td> <td>✔</td>
<td>✔</td> <td>✔</td>
<td>✔</td> <td>✖&sup2;</td>
<td>✖&sup1;</td> <td>✔&sup3;</td>
<td>✔&sup2;</td>
</tr> </tr>
</tbody> </tbody>
</table> </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: 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
// plyr.js v1.0.22 // plyr.js v1.0.23
// https://github.com/sampotts/plyr // https://github.com/sampotts/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -50,6 +50,7 @@
stopped: "stopped", stopped: "stopped",
playing: "playing", playing: "playing",
muted: "muted", muted: "muted",
loading: "loading",
captions: { captions: {
enabled: "captions-enabled", enabled: "captions-enabled",
active: "captions-active" active: "captions-active"
@ -626,7 +627,7 @@
player.media.removeAttribute("controls"); player.media.removeAttribute("controls");
// Set media type // Set media type
player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio"); player.type = (player.media.tagName == "VIDEO" ? "video" : "audio");
// Add type class // Add type class
_toggleClass(player.container, config.classes[player.type], true); _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)); _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 // Update <progress> elements
function _updateProgress(event) { function _updateProgress(event) {
var progress = player.progress.played.bar, var progress = player.progress.played.bar,
@ -1232,6 +1246,9 @@
// Handle native play/pause // Handle native play/pause
_on(player.media, "play pause", _checkPlaying); _on(player.media, "play pause", _checkPlaying);
// Loading
_on(player.media, "waiting canplay seeked", _checkLoading);
} }
function _init() { function _init() {
@ -1321,6 +1338,13 @@
// Get the current element // Get the current element
var element = elements[i]; 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 // Setup a player instance and add to the element
if(typeof element.plyr === "undefined") { if(typeof element.plyr === "undefined") {
element.plyr = new Plyr(element); element.plyr = new Plyr(element);

29
src/less/plyr.less
View File

@ -27,6 +27,8 @@
@progress-bg: lighten(@gray, 10%); @progress-bg: lighten(@gray, 10%);
@progress-playing-bg: @blue; @progress-playing-bg: @blue;
@progress-buffered-bg: @gray; @progress-buffered-bg: @gray;
@progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15);
// Volume // Volume
@volume-track-height: 6px; @volume-track-height: 6px;
@ -59,13 +61,18 @@
&:after { content: ""; display: table; } &:after { content: ""; display: table; }
&:after { clear: both; } &:after { clear: both; }
} }
// Tab focus styles // Tab focus styles
.tab-focus() { .tab-focus() {
outline: thin dotted #000; outline: thin dotted #000;
outline-offset: 0; outline-offset: 0;
} }
// Animation
// ---------------------------------------
@keyframes progress {
to { background-position: @progress-loading-size 0; }
}
// <input type="range"> styling // <input type="range"> styling
// --------------------------------------- // ---------------------------------------
.volume-thumb() { .volume-thumb() {
@ -86,7 +93,7 @@
.seek-thumb() { .seek-thumb() {
background: transparent; background: transparent;
border: 0; border: 0;
width: 2px; width: (@control-spacing * 2);
height: @control-spacing; height: @control-spacing;
} }
.seek-track() { .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 // States
&-controls [data-player='pause'], &-controls [data-player='pause'],
&.playing .player-controls [data-player='play'] { &.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-bg-hover: $blue;
$control-color: $gray-light; $control-color: $gray-light;
$control-color-inactive: $gray; $control-color-inactive: $gray;
$control-color-focus: #fff;
$control-color-hover: #fff; $control-color-hover: #fff;
// Progress // Progress
$progress-bg: lighten($gray, 10%); $progress-bg: lighten($gray, 10%);
$progress-playing-bg: $blue; $progress-playing-bg: $blue;
$progress-buffered-bg: $gray; $progress-buffered-bg: $gray;
$progress-loading-size: 40px;
$progress-loading-bg: rgba(0,0,0, .15);
// Range // Range
$volume-track-height: 6px; $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 { content: ""; display: table; }
&:after { clear: both; } &:after { clear: both; }
} }
// Tab focus styles // Tab focus styles
@mixin tab-focus() @mixin tab-focus()
{ {
@ -69,6 +69,12 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
outline-offset: 0; outline-offset: 0;
} }
// Animation
// ---------------------------------------
@keyframes progress {
to { background-position: @progress-loading-size 0; }
}
// <input type="range"> styling // <input type="range"> styling
// --------------------------------------- // ---------------------------------------
@mixin volume-thumb() @mixin volume-thumb()
@ -91,7 +97,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
@mixin seek-thumb() { @mixin seek-thumb() {
background: transparent; background: transparent;
border: 0; border: 0;
width: 2px; width: ($control-spacing * 2);
height: $control-spacing; height: $control-spacing;
} }
@mixin seek-track() { @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 // States
&-controls [data-player='pause'], &-controls [data-player='pause'],
&.playing .player-controls [data-player='play'] { &.playing .player-controls [data-player='play'] {