Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| aeecf40191 | |||
| f368ed572d | |||
| 5291bf616e | |||
| a00407a475 | |||
| 4f47ec49b1 | |||
| c48afb7880 | |||
| 5d3fb359b8 | |||
| 0227dfa7d8 | |||
| b9915b4b94 | |||
| f4c1313c19 | |||
| 7681d63876 |
@ -1,5 +1,11 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## 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
|
## v1.0.21
|
||||||
- Added an <input type="range"> for seeking to improve experience (and support dragging)
|
- Added an <input type="range"> for seeking to improve experience (and support dragging)
|
||||||
- Icons for restart and captions improved (and some IDs changed)
|
- Icons for restart and captions improved (and some IDs changed)
|
||||||
|
|||||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -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.21/docs.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.0.22/docs.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
|
|||||||
@ -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.21/plyr.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.0.22/plyr.css">
|
||||||
|
|
||||||
<!-- Docs styles -->
|
<!-- Docs styles -->
|
||||||
<link rel="stylesheet" href="//cdn.plyr.io/1.0.21/docs.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.0.22/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.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.22/sprite.svg");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Plyr core script -->
|
<!-- Plyr core script -->
|
||||||
<script src="//cdn.plyr.io/1.0.21/plyr.js"></script>
|
<script src="//cdn.plyr.io/1.0.22/plyr.js"></script>
|
||||||
|
|
||||||
<!-- Docs script -->
|
<!-- Docs script -->
|
||||||
<script src="//cdn.plyr.io/1.0.21/docs.js"></script>
|
<script src="//cdn.plyr.io/1.0.22/docs.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
9
notes.md
9
notes.md
@ -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
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "1.0.21",
|
"version": "1.0.22",
|
||||||
"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",
|
||||||
|
|||||||
49
readme.md
49
readme.md
@ -3,7 +3,7 @@ A simple, accessible HTML5 media player.
|
|||||||
|
|
||||||
[Checkout the demo](http://plyr.io)
|
[Checkout the demo](http://plyr.io)
|
||||||
|
|
||||||
[](http://plyr.io)
|
[](http://plyr.io)
|
||||||
|
|
||||||
## Why?
|
## 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.
|
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.
|
||||||
@ -36,7 +36,9 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
|||||||
|
|
||||||
## Implementation
|
## Implementation
|
||||||
|
|
||||||
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`
|
||||||
|
|
||||||
### Bower
|
### Bower
|
||||||
If bower is your thang, you can grab Plyr using:
|
If bower is your thang, you can grab Plyr using:
|
||||||
@ -243,50 +245,75 @@ Here's a list of the methods supported:
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>play</code></td>
|
<td><code>play()</code></td>
|
||||||
<td>—</td>
|
<td>—</td>
|
||||||
<td>Plays the media</td>
|
<td>Plays the media</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>pause</code></td>
|
<td><code>pause()</code></td>
|
||||||
<td>—</td>
|
<td>—</td>
|
||||||
<td>Pauses the media</td>
|
<td>Pauses the media</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>restart</code></td>
|
<td><code>restart()</code></td>
|
||||||
<td>—</td>
|
<td>—</td>
|
||||||
<td>Restarts playback</td>
|
<td>Restarts playback</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>rewind</code></td>
|
<td><code>rewind(...)</code></td>
|
||||||
<td>Number</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>
|
<td>Rewinds by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>forward</code></td>
|
<td><code>forward(...)</code></td>
|
||||||
<td>Number</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>
|
<td>Fast forwards by the provided parameter, in seconds. If no parameter is provided, the default seekInterval is used (10 seconds).</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>seek</code></td>
|
<td><code>seek(...)</code></td>
|
||||||
<td>Number</td>
|
<td>Number</td>
|
||||||
<td>Seeks the media to the provided parameter, time in seconds.</td>
|
<td>Seeks the media to the provided parameter, time in seconds.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>setVolume</code></td>
|
<td><code>setVolume(...)</code></td>
|
||||||
<td>Number</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>
|
<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>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>toggleMute</code></td>
|
<td><code>toggleMute()</code></td>
|
||||||
<td>—</td>
|
<td>—</td>
|
||||||
<td>Toggles mute for the player.</td>
|
<td>Toggles mute for the player.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>toggleCaptions</code></td>
|
<td><code>toggleCaptions()</code></td>
|
||||||
<td>—</td>
|
<td>—</td>
|
||||||
<td>Toggles whether captions are enabled.</td>
|
<td>Toggles whether captions are enabled.</td>
|
||||||
</tr>
|
</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>
|
||||||
|
<em>.source("/path/to/video.mp4")</em><br>
|
||||||
|
This will set the "src" attribute on the `video` or `audio` element.
|
||||||
|
<br><br>
|
||||||
|
<strong>array</strong><br>
|
||||||
|
<em>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])</em><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 `video` element only.</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|||||||
329
src/js/plyr.js
329
src/js/plyr.js
@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr
|
// Plyr
|
||||||
// plyr.js v1.0.21
|
// plyr.js v1.0.22
|
||||||
// https://github.com/sampotts/plyr
|
// https://github.com/sampotts/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
@ -142,7 +142,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Credits: http://paypal.github.io/accessible-html5-video-player/
|
// 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() {
|
function _browserSniff() {
|
||||||
var nAgt = navigator.userAgent,
|
var nAgt = navigator.userAgent,
|
||||||
browserName = navigator.appName,
|
browserName = navigator.appName,
|
||||||
@ -204,6 +204,36 @@
|
|||||||
// Return data
|
// Return data
|
||||||
return [browserName, majorVersion];
|
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
|
// Replace all
|
||||||
function _replaceAll(string, find, replace) {
|
function _replaceAll(string, find, replace) {
|
||||||
@ -242,6 +272,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
|
// Toggle class on an element
|
||||||
function _toggleClass(element, name, state) {
|
function _toggleClass(element, name, state) {
|
||||||
if(element){
|
if(element){
|
||||||
@ -276,6 +323,9 @@
|
|||||||
|
|
||||||
// Get percentage
|
// Get percentage
|
||||||
function _getPercentage(current, max) {
|
function _getPercentage(current, max) {
|
||||||
|
if(current === 0 || max === 0 || isNaN(current) || isNaN(max)) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
return ((current / max) * 100).toFixed(2);
|
return ((current / max) * 100).toFixed(2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -392,19 +442,43 @@
|
|||||||
player.container = container;
|
player.container = container;
|
||||||
|
|
||||||
// Captions functions
|
// 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.)
|
// Reset subcount
|
||||||
function _adjustManualCaptions() {
|
|
||||||
player.subcount = 0;
|
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++;
|
player.subcount++;
|
||||||
if (player.subcount > player.captions.length-1) {
|
if (player.subcount > player.captions.length-1) {
|
||||||
player.subcount = player.captions.length-1;
|
player.subcount = player.captions.length-1;
|
||||||
break;
|
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)
|
// Display captions container and button (for initialization)
|
||||||
function _showCaptions() {
|
function _showCaptions() {
|
||||||
_toggleClass(player.container, config.classes.captions.enabled, true);
|
_toggleClass(player.container, config.classes.captions.enabled, true);
|
||||||
@ -414,6 +488,7 @@
|
|||||||
player.buttons.captions.setAttribute("checked", "checked");
|
player.buttons.captions.setAttribute("checked", "checked");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Utilities for caption time codes
|
// Utilities for caption time codes
|
||||||
function _timecodeMin(tc) {
|
function _timecodeMin(tc) {
|
||||||
var tcpair = [];
|
var tcpair = [];
|
||||||
@ -571,6 +646,11 @@
|
|||||||
// Cache the container
|
// Cache the container
|
||||||
player.videoContainer = wrapper;
|
player.videoContainer = wrapper;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Autoplay
|
||||||
|
if(player.media.getAttribute("autoplay") !== null) {
|
||||||
|
_play();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Setup captions
|
// Setup captions
|
||||||
@ -583,9 +663,9 @@
|
|||||||
player.captionsContainer = _getElement(config.selectors.captions);
|
player.captionsContainer = _getElement(config.selectors.captions);
|
||||||
|
|
||||||
// Determine if HTML5 textTracks is supported
|
// Determine if HTML5 textTracks is supported
|
||||||
player.isTextTracks = false;
|
player.usingTextTracks = false;
|
||||||
if (player.media.textTracks) {
|
if (player.media.textTracks) {
|
||||||
player.isTextTracks = true;
|
player.usingTextTracks = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Get URL of caption file if exists
|
// Get URL of caption file if exists
|
||||||
@ -637,12 +717,12 @@
|
|||||||
_log("Detected IE 10/11 or Firefox 31+ or Safari 7+.");
|
_log("Detected IE 10/11 or Firefox 31+ or Safari 7+.");
|
||||||
|
|
||||||
// Set to false so skips to "manual" captioning
|
// Set to false so skips to "manual" captioning
|
||||||
player.isTextTracks = false;
|
player.usingTextTracks = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Rendering caption tracks
|
// Rendering caption tracks
|
||||||
// Native support required - http://caniuse.com/webvtt
|
// Native support required - http://caniuse.com/webvtt
|
||||||
if (player.isTextTracks) {
|
if (player.usingTextTracks) {
|
||||||
_log("TextTracks supported.");
|
_log("TextTracks supported.");
|
||||||
|
|
||||||
for (var y=0; y < tracks.length; y++) {
|
for (var y=0; y < tracks.length; y++) {
|
||||||
@ -665,24 +745,8 @@
|
|||||||
|
|
||||||
// Render captions from array at appropriate time
|
// Render captions from array at appropriate time
|
||||||
player.currentCaption = "";
|
player.currentCaption = "";
|
||||||
player.subcount = 0;
|
|
||||||
player.captions = [];
|
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 !== "") {
|
if (captionSrc !== "") {
|
||||||
// Create XMLHttpRequest Object
|
// Create XMLHttpRequest Object
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
@ -763,20 +827,6 @@
|
|||||||
player.media.pause();
|
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
|
// Rewind
|
||||||
function _rewind(seekTime) {
|
function _rewind(seekTime) {
|
||||||
// Use default if needed
|
// Use default if needed
|
||||||
@ -796,35 +846,37 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Seek to time
|
// Seek to time
|
||||||
var _seek = function(input) {
|
// The input parameter can be an event or a number
|
||||||
//var value = config.seekTime;
|
function _seek(input) {
|
||||||
var targetTime = 0;
|
var targetTime = 0;
|
||||||
|
|
||||||
// If no event or time is passed, bail
|
|
||||||
if (typeof input === "undefined") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Explicit position
|
// Explicit position
|
||||||
else if (typeof input === "number") {
|
if (typeof input === "number") {
|
||||||
targetTime = input;
|
targetTime = input;
|
||||||
}
|
}
|
||||||
// Event
|
// 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
|
// It's the seek slider
|
||||||
// Seek to the selected time
|
// 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
|
// Set the current time
|
||||||
player.media.currentTime = targetTime;
|
player.media.currentTime = targetTime.toFixed(1);
|
||||||
|
|
||||||
// Logging
|
// Logging
|
||||||
_log("Seeking to " + player.media.currentTime + " seconds");
|
_log("Seeking to " + player.media.currentTime + " seconds");
|
||||||
|
|
||||||
// Special handling for "manual" captions
|
// Special handling for "manual" captions
|
||||||
if (!player.isTextTracks && player.type === "video") {
|
_seekManualCaptions(targetTime);
|
||||||
_adjustManualCaptions(player);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check playing state
|
// Check playing state
|
||||||
@ -944,55 +996,52 @@
|
|||||||
|
|
||||||
// Update <progress> elements
|
// Update <progress> elements
|
||||||
function _updateProgress(event) {
|
function _updateProgress(event) {
|
||||||
var progress, text, value = 0;
|
var progress = player.progress.played.bar,
|
||||||
|
text = player.progress.played.text,
|
||||||
|
value = 0;
|
||||||
|
|
||||||
switch(event.type) {
|
if(event) {
|
||||||
// Video playing
|
switch(event.type) {
|
||||||
case "timeupdate":
|
// Video playing
|
||||||
case "seeking":
|
case "timeupdate":
|
||||||
progress = player.progress.played.bar;
|
case "seeking":
|
||||||
text = player.progress.played.text;
|
value = _getPercentage(player.media.currentTime, player.media.duration);
|
||||||
value = _getPercentage(player.media.currentTime, player.media.duration);
|
|
||||||
|
|
||||||
// Set seek range value only if it's a "natural" time event
|
// Set seek range value only if it's a "natural" time event
|
||||||
if(event.type == "timeupdate") {
|
if(event.type == "timeupdate") {
|
||||||
player.buttons.seek.value = value;
|
player.buttons.seek.value = value;
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
|
||||||
// Events from seek range
|
// Events from seek range
|
||||||
case "change":
|
case "change":
|
||||||
case "input":
|
case "input":
|
||||||
progress = player.progress.played.bar;
|
value = event.target.value;
|
||||||
text = player.progress.played.text;
|
break;
|
||||||
value = event.target.value;
|
|
||||||
break;
|
|
||||||
|
|
||||||
|
|
||||||
// Check buffer status
|
// Check buffer status
|
||||||
case "playing":
|
case "playing":
|
||||||
case "progress":
|
case "progress":
|
||||||
progress = player.progress.buffer.bar;
|
progress = player.progress.buffer.bar;
|
||||||
text = player.progress.buffer.text;
|
text = player.progress.buffer.text;
|
||||||
value = (function() {
|
value = (function() {
|
||||||
var buffered = player.media.buffered;
|
var buffered = player.media.buffered;
|
||||||
|
|
||||||
if(buffered.length) {
|
if(buffered.length) {
|
||||||
return _getPercentage(buffered.end(0), player.media.duration);
|
return _getPercentage(buffered.end(0), player.media.duration);
|
||||||
}
|
}
|
||||||
|
|
||||||
return 0;
|
return 0;
|
||||||
})();
|
})();
|
||||||
break;
|
break;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (progress && value > 0) {
|
// Set values
|
||||||
progress.value = value;
|
progress.value = value;
|
||||||
text.innerHTML = value;
|
text.innerHTML = value;
|
||||||
}
|
|
||||||
|
|
||||||
//_log(event);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update the displayed play time
|
// Update the displayed play time
|
||||||
@ -1008,13 +1057,92 @@
|
|||||||
player.duration.innerHTML = player.mins + ":" + player.secs;
|
player.duration.innerHTML = player.mins + ":" + player.secs;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Handle time change event
|
||||||
function _timeUpdate(event) {
|
function _timeUpdate(event) {
|
||||||
// Duration
|
// Duration
|
||||||
_updateTimeDisplay();
|
_updateTimeDisplay();
|
||||||
|
|
||||||
// Playing progress
|
// Playing progress
|
||||||
_updateProgress(event);
|
_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
|
// Listen for events
|
||||||
function _listeners() {
|
function _listeners() {
|
||||||
// Play
|
// Play
|
||||||
@ -1030,7 +1158,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Restart
|
// Restart
|
||||||
_on(player.buttons.restart, "click", _restart);
|
_on(player.buttons.restart, "click", _seek);
|
||||||
|
|
||||||
// Rewind
|
// Rewind
|
||||||
_on(player.buttons.rewind, "click", _rewind);
|
_on(player.buttons.rewind, "click", _rewind);
|
||||||
@ -1062,7 +1190,8 @@
|
|||||||
_play();
|
_play();
|
||||||
}
|
}
|
||||||
else if(player.media.ended) {
|
else if(player.media.ended) {
|
||||||
_restart();
|
_seek();
|
||||||
|
_play();
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
_pause();
|
_pause();
|
||||||
@ -1073,6 +1202,9 @@
|
|||||||
// Time change on media
|
// Time change on media
|
||||||
_on(player.media, "timeupdate seeking", _timeUpdate);
|
_on(player.media, "timeupdate seeking", _timeUpdate);
|
||||||
|
|
||||||
|
// Update manual captions
|
||||||
|
_on(player.media, "timeupdate", _seekManualCaptions);
|
||||||
|
|
||||||
// Seek
|
// Seek
|
||||||
_on(player.buttons.seek, "change input", _seek);
|
_on(player.buttons.seek, "change input", _seek);
|
||||||
|
|
||||||
@ -1157,13 +1289,16 @@
|
|||||||
media: player.media,
|
media: player.media,
|
||||||
play: _play,
|
play: _play,
|
||||||
pause: _pause,
|
pause: _pause,
|
||||||
restart: _restart,
|
restart: _seek,
|
||||||
rewind: _rewind,
|
rewind: _rewind,
|
||||||
forward: _forward,
|
forward: _forward,
|
||||||
seek: _seek,
|
seek: _seek,
|
||||||
setVolume: _setVolume,
|
setVolume: _setVolume,
|
||||||
toggleMute: _toggleMute,
|
toggleMute: _toggleMute,
|
||||||
toggleCaptions: _toggleCaptions
|
toggleCaptions: _toggleCaptions,
|
||||||
|
source: _parseSource,
|
||||||
|
poster: _updatePoster,
|
||||||
|
support: function(mimeType) { return _support(player, mimeType); }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -284,11 +284,9 @@
|
|||||||
// Inherit from currentColor;
|
// Inherit from currentColor;
|
||||||
&::-webkit-progress-value {
|
&::-webkit-progress-value {
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
transition: width .1s ease;
|
|
||||||
}
|
}
|
||||||
&::-moz-progress-bar {
|
&::-moz-progress-bar {
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
transition: width .1s ease;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-played[value] {
|
&-played[value] {
|
||||||
|
|||||||
@ -289,11 +289,9 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
|
|||||||
// Inherit from currentColor;
|
// Inherit from currentColor;
|
||||||
&::-webkit-progress-value {
|
&::-webkit-progress-value {
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
transition: width .1s ease;
|
|
||||||
}
|
}
|
||||||
&::-moz-progress-bar {
|
&::-moz-progress-bar {
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
transition: width .1s ease;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&-played[value] {
|
&-played[value] {
|
||||||
|
|||||||
Reference in New Issue
Block a user