Compare commits

..

4 Commits

Author SHA1 Message Date
c2c4172634 Clarified the option 2015-03-30 21:04:38 +11:00
73de5b5773 Added displayDuration option, small bug fix
- Using the native VTT cues, sometimes cues would not disappear
2015-03-30 21:03:48 +11:00
aa1fed0b16 Fixed bug with media longer than 60 minutes (Fixes #69) 2015-03-30 19:17:27 +11:00
22331ae9f1 Added mention 2015-03-22 23:24:15 +11:00
8 changed files with 62 additions and 25 deletions

1
.gitignore vendored
View File

@ -4,3 +4,4 @@ node_modules
.DS_Store .DS_Store
aws.json aws.json
docs/index.dev.html docs/index.dev.html
*.mp4

View File

@ -1,5 +1,11 @@
# Changelog # Changelog
## v1.0.31
- Display duration on metadataloaded
## v1.0.30
- Fixed bug with media longer than 60 minutes (Fixes #69)
## v1.0.29 ## v1.0.29
- Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (Fixes #47) - Added option to hide controls on fullscreen (default `true`) while palying, after 1s. Pause, mouse hover on progress, or focus on a child control re-shows the controls. On touch a tap of the video (which plays/pauses the video by default) is required. (Fixes #47)
- Fixed a bug with caption toggle in 1.0.28 - Fixed a bug with caption toggle in 1.0.28

2
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

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

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.29/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.29/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.29/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.29/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.29/docs.js"></script> <script src="//cdn.plyr.io/1.0.31/docs.js"></script>
</body> </body>
</html> </html>

View File

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

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.29/plyr.js` to `https://cdn.plyr.io/1.0.29/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.29/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.31/plyr.css">
<script src="//cdn.plyr.io/1.0.29/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.29/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 (on startup). 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>
@ -389,10 +395,12 @@ Plyr is developed by Sam Potts ([@sam_potts](https://twitter.com/sam_potts)) ([s
## Mentions ## Mentions
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/) - [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
- [HTML5 Weekly #177](http://html5weekly.com/issues/177) - [HTML5 Weekly #177](http://html5weekly.com/issues/177)
- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/) - [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
- [Hacker News](https://news.ycombinator.com/item?id=9136774) - [Hacker News](https://news.ycombinator.com/item?id=9136774)
- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04) - [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player) - [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
## Used by ## Used by
- [Selz.com](https://selz.com) - [Selz.com](https://selz.com)

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,23 +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(((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.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);
@ -1298,12 +1311,16 @@
// 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);
// Captions // Captions
_on(player.buttons.captions, "change", function() { _on(player.buttons.captions, "change", function() {
console.log(this.checked);
_toggleCaptions(this.checked); _toggleCaptions(this.checked);
}); });
@ -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();