source(), poster() and supports() API methods
This commit is contained in:
Sam Potts
parent
5291bf616e
commit
f368ed572d
@ -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.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -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",
|
||||
|
||||
43
readme.md
43
readme.md
@ -245,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, Object 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>
|
||||
|
||||
|
||||
@ -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,
|
||||
@ -469,17 +469,15 @@
|
||||
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;
|
||||
}
|
||||
else {
|
||||
// Clear the caption
|
||||
player.captionsContainer.innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
// Display captions container and button (for initialization)
|
||||
function _showCaptions() {
|
||||
@ -747,7 +745,6 @@
|
||||
|
||||
// Render captions from array at appropriate time
|
||||
player.currentCaption = "";
|
||||
player.subcount = 0;
|
||||
player.captions = [];
|
||||
|
||||
if (captionSrc !== "") {
|
||||
@ -849,8 +846,8 @@
|
||||
}
|
||||
|
||||
// Seek to time
|
||||
// The parameter can be an event or a number
|
||||
var _seek = function(input) {
|
||||
// The input parameter can be an event or a number
|
||||
function _seek(input) {
|
||||
var targetTime = 0;
|
||||
|
||||
// Explicit position
|
||||
@ -858,10 +855,10 @@
|
||||
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);
|
||||
targetTime = ((input.target.value / input.target.max) * player.media.duration);
|
||||
}
|
||||
|
||||
// Normalise targetTime
|
||||
@ -879,7 +876,7 @@
|
||||
_log("Seeking to " + player.media.currentTime + " seconds");
|
||||
|
||||
// Special handling for "manual" captions
|
||||
_seekManualCaptions(0);
|
||||
_seekManualCaptions(targetTime);
|
||||
}
|
||||
|
||||
// Check playing state
|
||||
@ -1085,6 +1082,7 @@
|
||||
|
||||
// Inject a source
|
||||
function _addSource(attributes) {
|
||||
if(attributes.src) {
|
||||
// Create a new <source>
|
||||
var element = document.createElement("source");
|
||||
|
||||
@ -1094,48 +1092,10 @@
|
||||
// Inject the new source
|
||||
_prependChild(player.media, element);
|
||||
}
|
||||
|
||||
// Set source
|
||||
function _setSource(source) {
|
||||
if(source.type && source.src) {
|
||||
_addSource(source);
|
||||
}
|
||||
|
||||
/*if(source.type && source.src) {
|
||||
// Check if it's supported first
|
||||
if(_support(player, source.type)) {
|
||||
// Pause playback (webkit freaks out)
|
||||
_pause();
|
||||
|
||||
// Update the UI
|
||||
_checkPlaying();
|
||||
|
||||
// Remove current sources
|
||||
_removeSources();
|
||||
|
||||
// Set the src attribute
|
||||
player.media.setAttribute("src", source.src);
|
||||
|
||||
// Restart
|
||||
_seek();
|
||||
|
||||
// Reset time display
|
||||
_timeUpdate();
|
||||
|
||||
// Play if autoplay attribute is present
|
||||
if(player.media.getAttribute("autoplay") !== null) {
|
||||
_play();
|
||||
}
|
||||
}
|
||||
else {
|
||||
_log("No support for: " + source.src + " [" + source.type + "]");
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Update source
|
||||
// Sources are not checked for support so be careful
|
||||
function _parseSource(sources) {
|
||||
// Pause playback (webkit freaks out)
|
||||
_pause();
|
||||
@ -1149,26 +1109,21 @@
|
||||
// Remove current sources
|
||||
_removeSources();
|
||||
|
||||
|
||||
|
||||
// If a single source object is provided
|
||||
// ({ src: "//cdn.selz.com/plyr/1.0/movie.webm", type: "video/webm" })
|
||||
if(typeof sources === "object" && sources.constructor !== Array) {
|
||||
// Set src attribute on the element
|
||||
_setSource(sources);
|
||||
// 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?
|
||||
// ([{ src: "path/to/src.mp4", type: "video/mp4" },{ src: "path/to/src.webm", type: "video/webm" }])
|
||||
// .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) {
|
||||
_setSource(sources[index]);
|
||||
_addSource(sources[index]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Reset time display
|
||||
_timeUpdate();
|
||||
|
||||
@ -1343,7 +1298,7 @@
|
||||
toggleCaptions: _toggleCaptions,
|
||||
source: _parseSource,
|
||||
poster: _updatePoster,
|
||||
support: _support
|
||||
support: function(mimeType) { return _support(player, mimeType); }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user