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 # Changelog
## v1.0.31
- Display duration on metadataloaded
## v1.0.30 ## v1.0.30
- Fixed bug with media longer than 60 minutes (Fixes #69) - 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"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- 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> </head>
<body> <body>
<main> <main>

10
docs/index.html
View File

@ -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.30/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.31/plyr.css">
<!-- Docs styles --> <!-- 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> </head>
<body> <body>
<header> <header>
@ -83,13 +83,13 @@
b.insertBefore(c, b.childNodes[0]); 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> </script>
<!-- Plyr core 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 --> <!-- 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> </body>
</html> </html>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.30", "version": "1.0.31",
"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",

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. 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 ### Bower
If bower is your thang, you can grab Plyr using: 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. If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html ```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.30/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.31/plyr.css">
<script src="//cdn.plyr.io/1.0.30/plyr.js"></script> <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 ### 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. 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>Boolean</td>
<td><code>false</code></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> <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>
<tr> <tr>
<td><code>selectors</code></td> <td><code>selectors</code></td>

48
src/js/plyr.js
View File

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