Ability to pass values to forward() and rewind()

This commit is contained in:
Sam Potts 2015-02-17 15:18:07 +11:00
parent a39bbec1fd
commit e86cda5b83
4 changed files with 108 additions and 10 deletions

View File

@ -665,8 +665,13 @@
}
// Rewind
function _rewind() {
var targetTime = player.media.currentTime - config.seekInterval;
function _rewind(seekInterval) {
// Use default if needed
if(typeof seekInterval === "undefined") {
seekInterval = config.seekInterval;
}
var targetTime = player.media.currentTime - seekInterval;
if (targetTime < 0) {
player.media.currentTime = 0;
@ -681,8 +686,13 @@
}
// Fast forward
function _forward() {
var targetTime = player.media.currentTime + config.seekInterval;
function _forward(seekInterval) {
// Use default if needed
if(typeof seekInterval === "undefined") {
seekInterval = config.seekInterval;
}
var targetTime = player.media.currentTime + seekInterval;
if (targetTime > player.media.duration) {
player.media.currentTime = player.media.duration;
@ -708,6 +718,15 @@
// Set volume
function _setVolume(volume) {
// Use default if needed
if(typeof volume === "undefined") {
volume = config.volume;
}
// Maximum is 10
if(volume > 10) {
volume = 10;
}
player.volume.value = volume;
player.media.volume = parseFloat(volume / 10);
_checkMute();
@ -782,10 +801,14 @@
_on(player.buttons.restart, "click", _restart);
// Rewind
_on(player.buttons.rewind, "click", _rewind);
_on(player.buttons.rewind, "click", function() {
_rewind(config.seekInterval);
});
// Fast forward
_on(player.buttons.forward, "click", _forward);
_on(player.buttons.forward, "click", function() {
_forward(config.seekInterval);
});
// Get the HTML5 range input element and append audio volume adjustment on change
_on(player.volume, "change", function() {

2
dist/js/docs.js vendored

File diff suppressed because one or more lines are too long

2
dist/js/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -186,6 +186,82 @@ You can pass the following settings:
</tbody>
</table>
## API
A `plyr` object is added to any element that Plyr is initialised on. You can then control the player by accessing methods in the `plyr` object. For example if you wanted to pause Plyr:
```javascript
document.querySelectorAll(".player")[0].plyr.pause();
```
Here's a list of the methods supported:
<table class="table" width="100%">
<thead>
<tr>
<th width="20%">Method</th>
<th width="15%">Parameters</th>
<th width="65%">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>play</code></td>
<td>&mdash;</td>
<td>Plays the media</td>
</tr>
<tr>
<td><code>pause</code></td>
<td>&mdash;</td>
<td>Pauses the media</td>
</tr>
<tr>
<td><code>restart</code></td>
<td>&mdash;</td>
<td>Restarts playback</td>
</tr>
<tr>
<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>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>setVolume</code></td>
<td>Number</td>
<td>Sets the player voume 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>&mdash;</td>
<td>Toggles mute for the player.</td>
</tr>
<tr>
<td><code>toggleCaptions</code></td>
<td>&mdash;</td>
<td>Toggles whether captions are enabled.</td>
</tr>
</tbody>
</table>
## Events/Callbacks
The `plyr` object on the player element also contains a `media` property which is a reference to the `<audio>` or `<video>` element within the player which you can use to listen for events. Here's an example:
```javascript
var media = document.querySelectorAll(".player")[0].plyr.media;
media.addEventListener("playing", function() {
console.log("playing");
});
```
A complete list of events can be found here:
[Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
## Fullscreen
Fullscreen in Plyr is supported for all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `player-fullscreen` class to your container.
@ -205,8 +281,7 @@ If a User Agent is disabled but supports `<video>` and `<audio>` natively, it wi
Any unsupported browsers will display links to download the media if the correct html is used.
## Useful links
## Useful links and credits
- [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
- [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/)
- [PayPal's Accessible HTML5 Video Player](https://github.com/paypal/accessible-html5-video-player)