Compare commits

...

9 Commits

Author SHA1 Message Date
a9bb8afca4 v2.0.11 2016-11-27 20:18:30 +11:00
28cd92b708 Merge branch 'master' of https://github.com/Selz/plyr 2016-11-27 20:15:19 +11:00
a44c7ecc3a Fix for iPad and YouTube issues 2016-11-27 20:15:15 +11:00
5214c5d55d Merge pull request #425 from sebastiancarlsson/cleanup-called-twice-bug
fixes bug where cleanUp would be called twice
2016-11-18 09:40:34 +11:00
3e6ed7b69b fixes bug where cleanUp would be called twice 2016-11-17 15:43:26 +01:00
7d2a8d343a Update 2016-11-16 09:41:06 +11:00
03aacf483f Update readme.md 2016-11-16 09:40:09 +11:00
73a1391f2f Update readme.md 2016-11-02 18:45:37 +11:00
660ff0434d Cache bust 2016-11-02 18:29:38 +11:00
10 changed files with 155 additions and 116 deletions

View File

@ -1,5 +1,9 @@
# Changelog # Changelog
## v2.0.11
- Fix for `cleanUp` being called twice (thanks to @sebastiancarlsson)
- Fix for YouTube controls on iPad (fixes #391)
## v2.0.10 ## v2.0.10
- Added seek event fixes for Vimeo and YouTube (fixes #409) - Added seek event fixes for Vimeo and YouTube (fixes #409)
- Added support for embed URLs rather than ID only (fixes #345) - Added support for embed URLs rather than ID only (fixes #345)

View File

@ -51,7 +51,7 @@
</ul> </ul>
</nav> </nav>
<section> <section>
<video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg" controls crossorigin> <video poster="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg?v1" controls crossorigin>
<!-- Video files --> <!-- Video files -->
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4"> <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4" type="video/mp4">
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm"> <source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">

2
dist/plyr.css vendored

File diff suppressed because one or more lines are too long

4
dist/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "2.0.10", "version": "2.0.11",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player", "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "src/js/plyr.js", "main": "src/js/plyr.js",

View File

@ -31,11 +31,12 @@ Oh and yes, it works with Bootstrap.
Check out the [changelog](changelog.md) to see what's new with Plyr. Check out the [changelog](changelog.md) to see what's new with Plyr.
## Features currently being developed ## Features currently being developed
- Playback speed (#53) - Playback speed selection
- Quality selection (#218) - Quality selection
- Caption language selection (#385) - Caption language selection
- AirPlay - AirPlay
- Picture in Picture (MacOS Sierra + Safari) (#366) - Picture in Picture (MacOS Sierra + Safari)
[more info](https://github.com/Selz/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22) [more info](https://github.com/Selz/plyr/issues?q=is%3Aissue+is%3Aopen+label%3A%22In+Development%22)
## Planned features ## Planned features
@ -131,10 +132,10 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
<script>plyr.setup();</script> <script>plyr.setup();</script>
``` ```
If you want to use our CDN for the JavaScript, you can use the following: If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
```html ```html
<script src="https://cdn.plyr.io/2.0.10/plyr.js"></script> <script src="https://cdn.plyr.io/2.0.11/plyr.js"></script>
``` ```
### CSS ### CSS
@ -144,14 +145,14 @@ Include the `plyr.css` stylsheet into your `<head>`
<link rel="stylesheet" href="path/to/plyr.css"> <link rel="stylesheet" href="path/to/plyr.css">
``` ```
If you want to use our CDN for the default CSS, you can use the following: If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
```html ```html
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.10/plyr.css"> <link rel="stylesheet" href="https://cdn.plyr.io/2.0.11/plyr.css">
``` ```
### SVG Sprite ### SVG Sprite
The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.10/plyr.svg`. The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.11/plyr.svg`.
## Advanced ## Advanced
@ -1066,5 +1067,7 @@ Also these links helped created Plyr:
- [Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html) - [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/) - [Styling the `<progress>` element - hongkiat.com](http://www.hongkiat.com/blog/html5-progress-bar/)
Thanks to [Fastly](https://www.fastly.com/) for providing the CDN services.
## Copyright and License ## Copyright and License
[The MIT license](license.md). [The MIT license](license.md).

View File

@ -1,6 +1,6 @@
// ========================================================================== // ==========================================================================
// Plyr // Plyr
// plyr.js v2.0.10 // plyr.js v2.0.11
// https://github.com/selz/plyr // https://github.com/selz/plyr
// License: The MIT License (MIT) // License: The MIT License (MIT)
// ========================================================================== // ==========================================================================
@ -43,7 +43,7 @@
displayDuration: true, displayDuration: true,
loadSprite: true, loadSprite: true,
iconPrefix: 'plyr', iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/2.0.10/plyr.svg', iconUrl: 'https://cdn.plyr.io/2.0.11/plyr.svg',
clickToPlay: true, clickToPlay: true,
hideControls: true, hideControls: true,
showPosterOnEnd: false, showPosterOnEnd: false,
@ -257,6 +257,7 @@
isChrome: isChrome, isChrome: isChrome,
isSafari: isSafari, isSafari: isSafari,
isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform), isIos: /(iPad|iPhone|iPod)/g.test(navigator.platform),
isIphone: /(iPhone|iPod)/g.test(navigator.userAgent),
isTouch: 'ontouchstart' in document.documentElement isTouch: 'ontouchstart' in document.documentElement
}; };
} }
@ -3257,7 +3258,7 @@
plyr.embed.unload().then(cleanUp); plyr.embed.unload().then(cleanUp);
// Vimeo does not always return // Vimeo does not always return
window.setTimeout(cleanUp, 200); timers.cleanUp = window.setTimeout(cleanUp, 200);
break; break;
@ -3273,6 +3274,8 @@
} }
function cleanUp() { function cleanUp() {
clearTimeout(timers.cleanUp);
// Default to restore original element // Default to restore original element
if (!_is.boolean(restore)) { if (!_is.boolean(restore)) {
restore = true; restore = true;
@ -3294,6 +3297,9 @@
// Replace the container with the original element provided // Replace the container with the original element provided
plyr.container.parentNode.replaceChild(original, plyr.container); plyr.container.parentNode.replaceChild(original, plyr.container);
// Allow overflow (set on fullscreen)
document.body.style.overflow = '';
// Event // Event
_triggerEvent(original, 'destroyed', true); _triggerEvent(original, 'destroyed', true);
} }
@ -3540,31 +3546,48 @@
var browser = _browserSniff(), var browser = _browserSniff(),
isOldIE = (browser.isIE && browser.version <= 9), isOldIE = (browser.isIE && browser.version <= 9),
isIos = browser.isIos, isIos = browser.isIos,
isIphone = /iPhone|iPod/i.test(navigator.userAgent), isIphone = browser.isIphone,
audio = !!document.createElement('audio').canPlayType, audioSupport = !!document.createElement('audio').canPlayType,
video = !!document.createElement('video').canPlayType, videoSupport = !!document.createElement('video').canPlayType,
basic, full; basic = false,
full = false;
switch (type) { switch (type) {
case 'video': case 'video':
basic = video; basic = videoSupport;
full = (basic && (!isOldIE && !isIphone)); full = (basic && (!isOldIE && !isIphone));
break; break;
case 'audio': case 'audio':
basic = audio; basic = audioSupport;
full = (basic && !isOldIE); full = (basic && !isOldIE);
break; break;
// Vimeo does not seem to be supported on iOS via API
// Issue raised https://github.com/vimeo/player.js/issues/87
case 'vimeo': case 'vimeo':
case 'youtube':
case 'soundcloud':
basic = true; basic = true;
full = (!isOldIE && !isIos); full = (!isOldIE && !isIos);
break; break;
case 'youtube':
basic = true;
full = (!isOldIE && !isIos);
// YouTube seems to work on iOS 10+ on iPad
if (isIos && !isIphone && browser.version >= 10) {
full = true;
}
break;
case 'soundcloud':
basic = true;
full = (!isOldIE && !isIphone);
break;
default: default:
basic = (audio && video); basic = (audioSupport && videoSupport);
full = (basic && !isOldIE); full = (basic && !isOldIE);
} }

View File

@ -179,9 +179,10 @@
.plyr__video-embed { .plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */ padding-bottom: 56.25%; /* 16:9 */
height: 0; height: 0;
overflow: hidden; border-radius: inherit;
// Require z-index to force border-radius // Require overflow and z-index to force border-radius
overflow: hidden;
z-index: 0; z-index: 0;
iframe { iframe {
@ -192,7 +193,6 @@
height: 100%; height: 100%;
border: 0; border: 0;
user-select: none; user-select: none;
z-index: 1;
} }
// Vimeo hack // Vimeo hack
@ -341,6 +341,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
z-index: 2;
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing; padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%)); background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
border-bottom-left-radius: inherit; border-bottom-left-radius: inherit;
@ -740,6 +741,10 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
.plyr__controls { .plyr__controls {
position: absolute; position: absolute;
bottom: 0; bottom: 0;

View File

@ -178,10 +178,10 @@
.plyr__video-embed { .plyr__video-embed {
padding-bottom: 56.25%; /* 16:9 */ padding-bottom: 56.25%; /* 16:9 */
height: 0; height: 0;
overflow: hidden;
border-radius: inherit; border-radius: inherit;
// Require z-index to force border-radius // Require overflow and z-index to force border-radius
overflow: hidden;
z-index: 0; z-index: 0;
iframe { iframe {
@ -738,6 +738,10 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.plyr__video-embed {
// Revert overflow change
overflow: visible;
}
.plyr__controls { .plyr__controls {
position: absolute; position: absolute;
bottom: 0; bottom: 0;