ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added displayDuration option, small bug fix

Browse Source 
- Using the native VTT cues, sometimes cues would not disappear
This commit is contained in:
Sam Potts 2015-03-30 21:03:48 +11:00
parent aa1fed0b16
commit 73de5b5773
7 changed files with 56 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
changelog.md
View File

@ -1,5 +1,8 @@
# Changelog
## v1.0.31
- Display duration on metadataloaded
## v1.0.30
- Fixed bug with media longer than 60 minutes (Fixes #69)

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
docs/error.html
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.30/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.31/docs.css">
</head>
<body>
<main>

10
docs/index.html
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.30/plyr.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.31/plyr.css">
<!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.30/docs.css">
<link rel="stylesheet" href="//cdn.plyr.io/1.0.31/docs.css">
</head>
<body>
<header>
@ -83,13 +83,13 @@
b.insertBefore(c, b.childNodes[0]);
}
}
})(document, "https://cdn.plyr.io/1.0.30/sprite.svg");
})(document, "https://cdn.plyr.io/1.0.31/sprite.svg");
</script>
<!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.30/plyr.js"></script>
<script src="//cdn.plyr.io/1.0.31/plyr.js"></script>
<!-- Docs script -->
<script src="//cdn.plyr.io/1.0.30/docs.js"></script>
<script src="//cdn.plyr.io/1.0.31/docs.js"></script>
</body>
</html>

2
package.json
View File

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

14
readme.md
View File

@ -38,7 +38,7 @@ 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.30/plyr.js` to `https://cdn.plyr.io/1.0.30/plyr.js`
**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.31/plyr.js` to `https://cdn.plyr.io/1.0.31/plyr.js`
### Bower
If bower is your thang, you can grab Plyr using:
@ -51,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.30/plyr.css">
<script src="//cdn.plyr.io/1.0.30/plyr.js"></script>
<link rel="stylesheet" href="//cdn.plyr.io/1.0.31/plyr.css">
<script src="//cdn.plyr.io/1.0.31/plyr.js"></script>
```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.30/sprite.svg`.
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.31/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.
@ -197,6 +197,12 @@ You can pass the following options to the setup method.
<td>Boolean</td>
<td><code>false</code></td>
<td>Display control labels as tooltips on :hover &amp; :focus (by default, the labels are screen reader only).</td>
</tr>
<tr>
<td><code>displayDuration</code></td>
<td>Boolean</td>
<td><code>true</code></td>
<td>Displays the duration of the media on the "metadataloaded" event. This will only work if the `preload` attribute is not set to `none`. It is `auto` by default (if the attribute is not present).</td>
</tr>
<tr>
<td><code>selectors</code></td>

48
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.29
// plyr.js v1.0.31
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -21,6 +21,7 @@
volume: 5,
click: true,
tooltips: false,
displayDuration: true,
selectors: {
container: ".player",
controls: ".player-controls",
@ -687,7 +688,6 @@
return false;
}
if(player.supported.full) {
// Remove native video controls
player.media.removeAttribute("controls");
@ -800,10 +800,12 @@
if (track.kind === "captions") {
_on(track, "cuechange", function() {
if (this.activeCues[0]) {
if (this.activeCues[0].hasOwnProperty("text")) {
player.captionsContainer.innerHTML = this.activeCues[0].text;
}
// Clear container
player.captionsContainer.innerHTML = "";
// Display a cue, if there is one
if (this.activeCues[0] && this.activeCues[0].hasOwnProperty("text")) {
player.captionsContainer.appendChild(this.activeCues[0].getCueAsHTML());
}
});
}
@ -1149,24 +1151,34 @@
text.innerHTML = value;
}
// Update the displayed play time
function _updateTimeDisplay() {
player.secs = parseInt(player.media.currentTime % 60);
player.mins = parseInt((player.media.currentTime / 60) % 60);
player.hours = parseInt(((player.media.currentTime / 60) / 60) % 60);
// Update the displayed time
function _updateTimeDisplay(time) {
player.secs = parseInt(time % 60);
player.mins = parseInt((time / 60) % 60);
player.hours = parseInt(((time / 60) / 60) % 60);
// Do we need to display hours?
var displayHours = (parseInt(((player.media.duration / 60) / 60) % 60) > 0)
// Ensure it"s two digits. For example, 03 rather than 3.
player.secs = ("0" + player.secs).slice(-2);
player.mins = ("0" + player.mins).slice(-2);
// Render
player.duration.innerHTML = (player.hours > 0 ? player.hours + ":" : "") + player.mins + ":" + player.secs;
player.duration.innerHTML = (displayHours ? player.hours + ":" : "") + player.mins + ":" + player.secs;
}
// Show the duration on metadataloaded
function _displayDuration() {
if(player.media.paused) {
_updateTimeDisplay(player.media.duration || 0);
}
}
// Handle time change event
function _timeUpdate(event) {
// Duration
_updateTimeDisplay();
_updateTimeDisplay(player.media.currentTime);
// Playing progress
_updateProgress(event);
@ -1299,6 +1311,11 @@
// Update manual captions
_on(player.media, "timeupdate", _seekManualCaptions);
// Display duration
if(config.displayDuration) {
_on(player.media, "loadedmetadata", _displayDuration);
}
// Seek
_on(player.buttons.seek, "change input", _seek);
@ -1400,6 +1417,11 @@
return false;
}
// Display duration if available
if(config.displayDuration) {
_displayDuration();
}
// Set up aria-label for Play button with the title option
_setupAria();