Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| aeecf40191 | |||
| f368ed572d | |||
| 5291bf616e | |||
| a00407a475 | |||
| 4f47ec49b1 | |||
| c48afb7880 | |||
| 5d3fb359b8 | |||
| 0227dfa7d8 | |||
| b9915b4b94 | |||
| f4c1313c19 | |||
| 7681d63876 |
@ -1,5 +1,11 @@
|
||||
# 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
|
||||
- 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
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">
|
||||
|
||||
<!-- 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>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
@ -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.22/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.22/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.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>
|
||||
|
||||
<!-- 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 -->
|
||||
<script src="//cdn.plyr.io/1.0.21/docs.js"></script>
|
||||
<script src="//cdn.plyr.io/1.0.22/docs.js"></script>
|
||||
</body>
|
||||
</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",
|
||||
"version": "1.0.21",
|
||||
"version": "1.0.22",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"homepage": "http://plyr.io",
|
||||
"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)
|
||||
|
||||
[](http://plyr.io)
|
||||
[](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.
|
||||
@ -36,7 +36,9 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
||||
|
||||
## 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
|
||||
If bower is your thang, you can grab Plyr using:
|
||||
@ -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>—</td>
|
||||
<td>Plays the media</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>pause</code></td>
|
||||
<td><code>pause()</code></td>
|
||||
<td>—</td>
|
||||
<td>Pauses the media</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>restart</code></td>
|
||||
<td><code>restart()</code></td>
|
||||
<td>—</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>—</td>
|
||||
<td>Toggles mute for the player.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>toggleCaptions</code></td>
|
||||
<td><code>toggleCaptions()</code></td>
|
||||
<td>—</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>
|
||||
<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>
|
||||
</table>
|
||||
|
||||
|
||||
329
src/js/plyr.js
329
src/js/plyr.js
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.0.21
|
||||
// plyr.js v1.0.22
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -142,7 +142,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,
|
||||
@ -204,6 +204,36 @@
|
||||
// Return data
|
||||
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) {
|
||||
@ -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
|
||||
function _toggleClass(element, name, state) {
|
||||
if(element){
|
||||
@ -276,6 +323,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 +442,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 +488,7 @@
|
||||
player.buttons.captions.setAttribute("checked", "checked");
|
||||
}
|
||||
}
|
||||
|
||||
// Utilities for caption time codes
|
||||
function _timecodeMin(tc) {
|
||||
var tcpair = [];
|
||||
@ -571,6 +646,11 @@
|
||||
// Cache the container
|
||||
player.videoContainer = wrapper;
|
||||
}
|
||||
|
||||
// Autoplay
|
||||
if(player.media.getAttribute("autoplay") !== null) {
|
||||
_play();
|
||||
}
|
||||
}
|
||||
|
||||
// Setup captions
|
||||
@ -583,9 +663,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 +717,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 +745,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 +827,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 +846,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
|
||||
@ -944,55 +996,52 @@
|
||||
|
||||
// Update <progress> elements
|
||||
function _updateProgress(event) {
|
||||
var progress, text, value = 0;
|
||||
var progress = player.progress.played.bar,
|
||||
text = player.progress.played.text,
|
||||
value = 0;
|
||||
|
||||
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);
|
||||
if(event) {
|
||||
switch(event.type) {
|
||||
// Video playing
|
||||
case "timeupdate":
|
||||
case "seeking":
|
||||
value = _getPercentage(player.media.currentTime, player.media.duration);
|
||||
|
||||
// Set seek range value only if it's a "natural" time event
|
||||
if(event.type == "timeupdate") {
|
||||
player.buttons.seek.value = value;
|
||||
}
|
||||
|
||||
break;
|
||||
// Set seek range value only if it's a "natural" time event
|
||||
if(event.type == "timeupdate") {
|
||||
player.buttons.seek.value = value;
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
// Events from seek range
|
||||
case "change":
|
||||
case "input":
|
||||
progress = player.progress.played.bar;
|
||||
text = player.progress.played.text;
|
||||
value = event.target.value;
|
||||
break;
|
||||
// Events from seek range
|
||||
case "change":
|
||||
case "input":
|
||||
value = event.target.value;
|
||||
break;
|
||||
|
||||
|
||||
// Check buffer status
|
||||
case "playing":
|
||||
case "progress":
|
||||
progress = player.progress.buffer.bar;
|
||||
text = player.progress.buffer.text;
|
||||
value = (function() {
|
||||
var buffered = player.media.buffered;
|
||||
// Check buffer status
|
||||
case "playing":
|
||||
case "progress":
|
||||
progress = player.progress.buffer.bar;
|
||||
text = player.progress.buffer.text;
|
||||
value = (function() {
|
||||
var buffered = player.media.buffered;
|
||||
|
||||
if(buffered.length) {
|
||||
return _getPercentage(buffered.end(0), player.media.duration);
|
||||
}
|
||||
if(buffered.length) {
|
||||
return _getPercentage(buffered.end(0), player.media.duration);
|
||||
}
|
||||
|
||||
return 0;
|
||||
})();
|
||||
break;
|
||||
return 0;
|
||||
})();
|
||||
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 +1057,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 +1158,7 @@
|
||||
});
|
||||
|
||||
// Restart
|
||||
_on(player.buttons.restart, "click", _restart);
|
||||
_on(player.buttons.restart, "click", _seek);
|
||||
|
||||
// Rewind
|
||||
_on(player.buttons.rewind, "click", _rewind);
|
||||
@ -1062,7 +1190,8 @@
|
||||
_play();
|
||||
}
|
||||
else if(player.media.ended) {
|
||||
_restart();
|
||||
_seek();
|
||||
_play();
|
||||
}
|
||||
else {
|
||||
_pause();
|
||||
@ -1073,6 +1202,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);
|
||||
|
||||
@ -1157,13 +1289,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); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -284,11 +284,9 @@
|
||||
// Inherit from currentColor;
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
transition: width .1s ease;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
transition: width .1s ease;
|
||||
}
|
||||
}
|
||||
&-played[value] {
|
||||
|
||||
@ -289,11 +289,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] {
|
||||
|
||||
Reference in New Issue
Block a user