Compare commits
9 Commits
Author | SHA1 | Date | |
---|---|---|---|
a9bb8afca4 | |||
28cd92b708 | |||
a44c7ecc3a | |||
5214c5d55d | |||
3e6ed7b69b | |||
7d2a8d343a | |||
03aacf483f | |||
73a1391f2f | |||
660ff0434d |
@ -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)
|
||||||
|
@ -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
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -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",
|
||||||
|
21
readme.md
21
readme.md
@ -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).
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Reference in New Issue
Block a user