Compare commits

...

17 Commits

Author SHA1 Message Date
5370fc5c83 Loading state handling
Fixes #36
2015-03-08 01:24:23 +11:00
8482a1a320 Updated captions 2015-03-07 19:39:01 +11:00
f3603ac3fa Size updated 2015-03-07 19:27:11 +11:00
44fe647a49 Typo 2015-03-07 19:25:25 +11:00
928a89e599 More formatting 2015-03-07 19:24:41 +11:00
80d6d806c4 Formatting 2015-03-07 19:21:54 +11:00
aeecf40191 Slight tweaks 2015-03-07 19:17:57 +11:00
f368ed572d source(), poster() and supports() API methods 2015-03-07 19:12:56 +11:00
5291bf616e More work on source change 2015-03-07 12:24:07 +11:00
a00407a475 Removed extra log 2015-03-06 17:47:08 +11:00
4f47ec49b1 Work on source update and caption fixes 2015-03-06 17:46:06 +11:00
c48afb7880 Merge remote-tracking branch 'origin/master' into develop 2015-03-06 12:21:51 +11:00
5d3fb359b8 Note about demo code 2015-03-06 12:20:47 +11:00
0227dfa7d8 Working on source() api method 2015-03-06 01:51:12 +11:00
b9915b4b94 Removed notes 2015-03-06 01:50:37 +11:00
f4c1313c19 Updated screenshot 2015-03-05 23:36:45 +11:00
7681d63876 Removed progress transition as it feels laggy 2015-03-05 23:27:53 +11:00
11 changed files with 383 additions and 150 deletions

View File

@ -1,5 +1,14 @@
# 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)
- Added poster() API method for setting poster source
- Refactored captions logic for manual captions
## v1.0.21
- Added an <input type="range"> for seeking to improve experience (and support dragging)
- Icons for restart and captions improved (and some IDs changed)

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

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.21/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/docs.css">
</head>
<body>
<main>

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.21/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.21/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.23/docs.css">
</head>
<body>
<header>
@ -29,7 +29,7 @@
<source src="//cdn.selz.com/plyr/1.0/movie.webm" type="video/webm">
<!-- Text track file -->
<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/movie_en_captions.vtt" default>
<track kind="captions" label="English" srclang="en" src="//cdn.selz.com/plyr/1.0/en.vtt" default>
<!-- Fallback for browsers that don't support the <video> element -->
<div>
@ -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.21/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.21/plyr.js"></script>
<script src="//cdn.plyr.io/1.0.23/plyr.js"></script>
<!-- Docs script -->
<script src="//cdn.plyr.io/1.0.21/docs.js"></script>
<script src="//cdn.plyr.io/1.0.23/docs.js"></script>
</body>
</html>

View File

@ -1,9 +0,0 @@
Loading
--------------
http://stackoverflow.com/questions/8685038/tell-whether-video-is-loaded-or-not-in-javascript
http://stackoverflow.com/questions/5181865/checking-if-a-html5-video-is-ready
Events
--------------
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

View File

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

View File

@ -3,14 +3,14 @@ A simple, accessible HTML5 media player.
[Checkout the demo](http://plyr.io)
[![Image of Plyr](https://cdn.plyr.io/static/plyr.png)](http://plyr.io)
[![Image of Plyr](https://cdn.plyr.io/static/plyr.png?1)](http://plyr.io)
## Why?
We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
## Features
- **Accessible** - full support for captions and screen readers.
- **Lightweight** - just 5.3KB minified and gzipped.
- **Lightweight** - just 5.7KB minified and gzipped.
- **Customisable** - make the player look how you want with the markup you want.
- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
- **Responsive** - as you'd expect these days.
@ -38,6 +38,8 @@ 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.23/plyr.js` to `https://cdn.plyr.io/1.0.23/plyr.js`
### Bower
If bower is your thang, you can grab Plyr using:
```
@ -49,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.
@ -188,13 +190,13 @@ You can pass the following options to the setup method.
<td><code>click</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Click (or tap) will toggle pause/play of a `<video>`.</td>
<td>Click (or tap) will toggle pause/play of a <code>&lt;video&gt;</code>.</td>
</tr>
<tr>
<td><code>selectors</code></td>
<td>Object</td>
<td>&mdash;</td>
<td>See `plyr.js` in `/src` for more info. The only option you might want to change is `player` which is the hook used for Plyr, the default is `.player`.</td>
<td>See <code>plyr.js</code> in <code>/src</code> for more info. The only option you might want to change is <code>player</code> which is the hook used for Plyr, the default is <code>.player</code>.</td>
</tr>
<tr>
<td><code>classes</code></td>
@ -206,13 +208,13 @@ You can pass the following options to the setup method.
<td><code>captions</code></td>
<td>Object</td>
<td>&mdash;</td>
<td>This currently contains one property `defaultActive` which toggles if captions should be on by default. The default value is `false`.</td>
<td>This currently contains one property `defaultActive` which toggles if captions should be on by default. The default value is <code>false</code>.</td>
</tr>
<tr>
<td><code>fullscreen</code></td>
<td>Object</td>
<td>&mdash;</td>
<td>This currently contains two properties; `enabled` which toggles if fullscreen should be enabled (if the browser supports it). The default value is `true`. Also an extra property called `fallback` which will enable a 'full window' view for older browsers. The default value is `true`.</td>
<td>This currently contains two properties;<code>enabled</code> which toggles if fullscreen should be enabled (if the browser supports it). The default value is <code>true</code>. Also an extra property called <code>fallback</code> which will enable a full window view for older browsers. The default value is <code>true</code>.</td>
</tr>
<tr>
<td><code>storage</code></td>
@ -243,50 +245,75 @@ Here's a list of the methods supported:
</thead>
<tbody>
<tr>
<td><code>play</code></td>
<td><code>play()</code></td>
<td>&mdash;</td>
<td>Plays the media</td>
</tr>
<tr>
<td><code>pause</code></td>
<td><code>pause()</code></td>
<td>&mdash;</td>
<td>Pauses the media</td>
</tr>
<tr>
<td><code>restart</code></td>
<td><code>restart()</code></td>
<td>&mdash;</td>
<td>Restarts playback</td>
</tr>
<tr>
<td><code>rewind</code></td>
<td><code>rewind(...)</code></td>
<td>Number</td>
<td>Rewinds by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
</tr>
<tr>
<td><code>forward</code></td>
<td><code>forward(...)</code></td>
<td>Number</td>
<td>Fast forwards by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
</tr>
<tr>
<td><code>seek</code></td>
<td><code>seek(...)</code></td>
<td>Number</td>
<td>Seeks the media to the provided parameter, time in seconds.</td>
</tr>
<tr>
<td><code>setVolume</code></td>
<td><code>setVolume(...)</code></td>
<td>Number</td>
<td>Sets the player volume to the provided parameter. The value should be between 0 (muted) and 10 (loudest). If no parameter is provided, the default volume is used (5). Values over 10 are ignored.</td>
</tr>
<tr>
<td><code>toggleMute</code></td>
<td><code>toggleMute()</code></td>
<td>&mdash;</td>
<td>Toggles mute for the player.</td>
</tr>
<tr>
<td><code>toggleCaptions</code></td>
<td><code>toggleCaptions()</code></td>
<td>&mdash;</td>
<td>Toggles whether captions are enabled.</td>
</tr>
<tr>
<td><code>support(...)</code></td>
<td>String</td>
<td>Determine if a player supports a certain MIME type.</td>
</tr>
<tr>
<td><code>source(...)</code></td>
<td>String or Array</td>
<td>
Set the media source.
<br><br>
<strong>string</strong><br>
<code>.source("/path/to/video.mp4")</code><br>
This will set the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element.
<br><br>
<strong>array</strong><br>
<code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
</td>
</tr>
<tr>
<td><code>poster(...)</code></td>
<td>String</td>
<td>Set the poster url. This is supported for the <code>video</code> element only.</td>
</tr>
</tbody>
</table>
@ -322,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:

View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.21
// 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"
@ -142,7 +143,7 @@
}
// Credits: http://paypal.github.io/accessible-html5-video-player/
// Unfortunately, due to scattered support, browser sniffing is required
// Unfortunately, due to mixed support, UA sniffing is required
function _browserSniff() {
var nAgt = navigator.userAgent,
browserName = navigator.appName,
@ -205,6 +206,36 @@
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
function _replaceAll(string, find, replace) {
return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace);
@ -242,6 +273,23 @@
}
}
// Remove an element
function _remove(element) {
element.parentNode.removeChild(element);
}
// Prepend child
function _prependChild(parent, element) {
parent.insertBefore(element, parent.firstChild);
}
// Set attributes
function _setAttributes(element, attributes) {
for(var key in attributes) {
element.setAttribute(key, attributes[key]);
}
}
// Toggle class on an element
function _toggleClass(element, name, state) {
if(element){
@ -276,6 +324,9 @@
// Get percentage
function _getPercentage(current, max) {
if(current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
return 0;
}
return ((current / max) * 100).toFixed(2);
}
@ -392,19 +443,43 @@
player.container = container;
// 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.)
function _adjustManualCaptions() {
// Reset subcount
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++;
if (player.subcount > player.captions.length-1) {
player.subcount = player.captions.length-1;
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];
// Render the caption
player.captionsContainer.innerHTML = player.currentCaption;
}
else {
// Clear the caption
player.captionsContainer.innerHTML = "";
}
}
// Display captions container and button (for initialization)
function _showCaptions() {
_toggleClass(player.container, config.classes.captions.enabled, true);
@ -414,6 +489,7 @@
player.buttons.captions.setAttribute("checked", "checked");
}
}
// Utilities for caption time codes
function _timecodeMin(tc) {
var tcpair = [];
@ -551,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);
@ -571,6 +647,11 @@
// Cache the container
player.videoContainer = wrapper;
}
// Autoplay
if(player.media.getAttribute("autoplay") !== null) {
_play();
}
}
// Setup captions
@ -583,9 +664,9 @@
player.captionsContainer = _getElement(config.selectors.captions);
// Determine if HTML5 textTracks is supported
player.isTextTracks = false;
player.usingTextTracks = false;
if (player.media.textTracks) {
player.isTextTracks = true;
player.usingTextTracks = true;
}
// Get URL of caption file if exists
@ -637,12 +718,12 @@
_log("Detected IE 10/11 or Firefox 31+ or Safari 7+.");
// Set to false so skips to "manual" captioning
player.isTextTracks = false;
player.usingTextTracks = false;
}
// Rendering caption tracks
// Native support required - http://caniuse.com/webvtt
if (player.isTextTracks) {
if (player.usingTextTracks) {
_log("TextTracks supported.");
for (var y=0; y < tracks.length; y++) {
@ -665,24 +746,8 @@
// Render captions from array at appropriate time
player.currentCaption = "";
player.subcount = 0;
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 !== "") {
// Create XMLHttpRequest Object
var xhr = new XMLHttpRequest();
@ -763,20 +828,6 @@
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;
}
// Play and ensure the play button is in correct state
_play();
}
// Rewind
function _rewind(seekTime) {
// Use default if needed
@ -796,35 +847,37 @@
}
// Seek to time
var _seek = function(input) {
//var value = config.seekTime;
// The input parameter can be an event or a number
function _seek(input) {
var targetTime = 0;
// If no event or time is passed, bail
if (typeof input === "undefined") {
return;
}
// Explicit position
else if (typeof input === "number") {
if (typeof input === "number") {
targetTime = input;
}
// Event
else if (input.type === "change" || input.type === "input") {
else if (typeof input === "object" && (input.type === "change" || input.type === "input")) {
// It's the seek slider
// Seek to the selected time
targetTime = ((this.value / this.max) * player.media.duration).toFixed(1);
targetTime = ((input.target.value / input.target.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
player.media.currentTime = targetTime;
player.media.currentTime = targetTime.toFixed(1);
// Logging
_log("Seeking to " + player.media.currentTime + " seconds");
// Special handling for "manual" captions
if (!player.isTextTracks && player.type === "video") {
_adjustManualCaptions(player);
}
_seekManualCaptions(targetTime);
}
// Check playing state
@ -942,16 +995,30 @@
_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, text, value = 0;
var progress = player.progress.played.bar,
text = player.progress.played.text,
value = 0;
if(event) {
switch(event.type) {
// Video playing
case "timeupdate":
case "seeking":
progress = player.progress.played.bar;
text = player.progress.played.text;
value = _getPercentage(player.media.currentTime, player.media.duration);
// Set seek range value only if it's a "natural" time event
@ -964,8 +1031,6 @@
// Events from seek range
case "change":
case "input":
progress = player.progress.played.bar;
text = player.progress.played.text;
value = event.target.value;
break;
@ -986,13 +1051,11 @@
})();
break;
}
if (progress && value > 0) {
progress.value = value;
text.innerHTML = value;
}
//_log(event);
// Set values
progress.value = value;
text.innerHTML = value;
}
// Update the displayed play time
@ -1008,13 +1071,92 @@
player.duration.innerHTML = player.mins + ":" + player.secs;
}
// Handle time change event
function _timeUpdate(event) {
// Duration
_updateTimeDisplay();
// Playing progress
_updateProgress(event);
}
// Remove <source> children and src attribute
function _removeSources() {
// Find child <source> elements
var sources = player.media.querySelectorAll("source");
// Remove each
for (var i = sources.length - 1; i >= 0; i--) {
_remove(sources[i]);
}
// Remove src attribute
player.media.removeAttribute("src");
}
// Inject a source
function _addSource(attributes) {
if(attributes.src) {
// Create a new <source>
var element = document.createElement("source");
// Set all passed attributes
_setAttributes(element, attributes);
// Inject the new source
_prependChild(player.media, element);
}
}
// Update source
// Sources are not checked for support so be careful
function _parseSource(sources) {
// Pause playback (webkit freaks out)
_pause();
// Restart
_seek();
// Update the UI
_checkPlaying();
// Remove current sources
_removeSources();
// If a single source is passed
// .source("path/to/video.mp4")
if(typeof sources === "string") {
player.media.setAttribute("src", sources);
}
// An array of source objects
// Check if a source exists, use that or set the "src" attribute?
// .source([{ src: "path/to/video.mp4", type: "video/mp4" },{ src: "path/to/video.webm", type: "video/webm" }])
else if (sources.constructor === Array) {
for (var index in sources) {
_addSource(sources[index]);
}
}
// Reset time display
_timeUpdate();
// Re-load sources
player.media.load();
// Play if autoplay attribute is present
if(player.media.getAttribute("autoplay") !== null) {
_play();
}
}
// Update poster
function _updatePoster(source) {
if(player.type === "video") {
player.media.setAttribute("poster", source);
}
}
// Listen for events
function _listeners() {
// Play
@ -1030,7 +1172,7 @@
});
// Restart
_on(player.buttons.restart, "click", _restart);
_on(player.buttons.restart, "click", _seek);
// Rewind
_on(player.buttons.rewind, "click", _rewind);
@ -1062,7 +1204,8 @@
_play();
}
else if(player.media.ended) {
_restart();
_seek();
_play();
}
else {
_pause();
@ -1073,6 +1216,9 @@
// Time change on media
_on(player.media, "timeupdate seeking", _timeUpdate);
// Update manual captions
_on(player.media, "timeupdate", _seekManualCaptions);
// Seek
_on(player.buttons.seek, "change input", _seek);
@ -1100,6 +1246,9 @@
// Handle native play/pause
_on(player.media, "play pause", _checkPlaying);
// Loading
_on(player.media, "waiting canplay seeked", _checkLoading);
}
function _init() {
@ -1157,13 +1306,16 @@
media: player.media,
play: _play,
pause: _pause,
restart: _restart,
restart: _seek,
rewind: _rewind,
forward: _forward,
seek: _seek,
setVolume: _setVolume,
toggleMute: _toggleMute,
toggleCaptions: _toggleCaptions
toggleCaptions: _toggleCaptions,
source: _parseSource,
poster: _updatePoster,
support: function(mimeType) { return _support(player, mimeType); }
}
}
@ -1186,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);

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() {
@ -284,11 +291,9 @@
// Inherit from currentColor;
&::-webkit-progress-value {
background: currentColor;
transition: width .1s ease;
}
&::-moz-progress-bar {
background: currentColor;
transition: width .1s ease;
}
}
&-played[value] {
@ -347,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'] {

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() {
@ -289,11 +295,9 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
// Inherit from currentColor;
&::-webkit-progress-value {
background: currentColor;
transition: width .1s ease;
}
&::-moz-progress-bar {
background: currentColor;
transition: width .1s ease;
}
}
&-played[value] {
@ -352,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'] {