Compare commits

...

18 Commits

Author SHA1 Message Date
a3ed309342 v2.0.9
- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)
2016-10-23 15:18:53 +11:00
08b4c09b89 Temporary patch for the YouTube API issues with getDuration() (relates to #374) 2016-10-23 15:18:08 +11:00
a509a5e1bc v2.0.8
- Added `isPaused()` API method (thanks to @darrena092)
- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)
- Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390)
- Fix for Firefox VTT compatibility (thanks to @magourex)
- Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392)
- Added Issue and PR templates with the aim of reducing duplicate or duff issues
2016-10-23 13:48:05 +11:00
bec10e7836 Fix for caption size (fixes #390), Fix for Firefox Dev (fixes #392) 2016-10-23 13:35:49 +11:00
f9a184800b Add Issue and PR templates 2016-10-23 13:34:44 +11:00
f428c3ff8b Manually merged #395 2016-10-23 12:19:39 +11:00
97eb40a8e3 Merge pull request #389 from darrena092/master
Added .isPaused().
2016-10-23 11:51:10 +11:00
8211631950 Gulp build done. 2016-10-06 15:43:41 +01:00
a17cbb0e8b Added .isPaused to API 2016-10-06 15:33:49 +01:00
8098be6f93 Merge pull request #379 from magourex/master
Support WebVTT with CRLF or LF Line separator with firefox #378
2016-10-01 22:10:35 +10:00
1c73c9fbfe Update plyr.js 2016-09-27 10:57:35 +02:00
978606edb4 CSS path 2016-09-06 23:54:04 +10:00
Sam
435b5c74bf Fixed API method, added new methods (fixes #346, #351)
- Fixed `getCurrentTime()` method (fixes #351)
- Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346)
2016-08-29 23:36:43 +10:00
Sam
15fd7041ab Fixed AMD definition 2016-08-26 21:43:51 +10:00
1ced6b4d67 Vimeo IE9/10 (Fixes #348), HTML5 ready event (Fixes #349) 2016-08-26 18:15:24 +10:00
Sam
6694c1e6cf Fix for Firefox full screen (fixes #343) 2016-08-23 00:34:43 +10:00
19ca906e50 Update changelog.md 2016-08-22 20:41:49 +10:00
12e94775d6 Global keyboard shortcut changes 2016-08-22 14:44:18 +10:00
17 changed files with 273 additions and 220 deletions

18
.github/issue_template.md vendored Normal file
View File

@ -0,0 +1,18 @@
- [ ] Issue does not already exist
- [ ] Issue observed on https://plyr.io
### Expected behaviour
### Actual behaviour
### Environment
- Browser:
- Version:
- Operating System:
- Version:
### Steps to reproduce
-
### Relevant links

8
.github/pull_request_template.md vendored Normal file
View File

@ -0,0 +1,8 @@
### Link to related issue (if applicable)
### Sumary of proposed changes
### Task list
- [ ] Tested on [supported browsers](https://github.com/Selz/plyr#browser-support)
- [ ] Gulp build completed

11
.jsbeautifyrc Normal file
View File

@ -0,0 +1,11 @@
{
"html": {
"allowed_file_extensions": []
},
"css": {
"allowed_file_extensions": []
},
"js": {
"allowed_file_extensions": []
}
}

View File

@ -1,10 +1,39 @@
# Changelog
# v2.0.2
## v2.0.9
- Temporary patch for the YouTube API issues with `getDuration()` (relates to #374)
## v2.0.8
- Added `isPaused()` API method (thanks to @darrena092)
- Allowed `.on()` API method to be chainable (thanks to @gurupras) (fixes #357)
- Improved the "awful" rendering of captions on small screens in fullscreen mode (fixes #390)
- Fix for Firefox VTT compatibility (thanks to @magourex)
- Fix for Firefox Developer Edition blank video due to `-webkit-mask-image` issue (fixes #392)
- Added Issue and PR templates with the aim of reducing duplicate or duff issues
## v2.0.7
- Fixed `getCurrentTime()` method (fixes #351)
- Added `getVolume()` , `isMuted()` and `getDuration()` API methods (fixes #346)
## v2.0.6
- Fixed merge issue with `Updated define to work with AMD imports #326` PR
- Code formatting
## v2.0.5
- Fix for Vimeo in IE9 & IE10
- Fix for HTML5 elements not firing `ready` event
## v2.0.4
- Fix for Firefox full screen (fixes #343)
## v2.0.3
- Set 'global' keyboard shortcut option to false as default, added `<textarea>` to editable elements to be ignored
## v2.0.2
- Added 'global' keyboard shortcut option
# v2.0.1
- Version bump for NPM
## v2.0.1
- Version bump for NPM (sorry for folks who upgraded to the now deleted v1.9.0 through NPM)
# v2.0.0
This version contains several potential ***breaking changes***:

2
demo/dist/demo.css vendored

File diff suppressed because one or more lines are too long

2
demo/dist/demo.js vendored
View File

@ -1 +1 @@
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;s>i;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;i>t;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;o>s;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",-1!==c(this,e)},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",-1===c(this,e)&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);-1!==t;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(h){-2146823252===h.number&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!=r)&&(r.length||t!=n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt","default":!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var e=document.createElement("_");if(e.classList.add("c1","c2"),!e.classList.contains("c2")){var t=function(e){var t=DOMTokenList.prototype[e];DOMTokenList.prototype[e]=function(e){var i,s=arguments.length;for(i=0;i<s;i++)e=arguments[i],t.call(this,e)}};t("add"),t("remove")}if(e.classList.toggle("c3",!1),e.classList.contains("c3")){var i=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(e,t){return 1 in arguments&&!this.contains(e)==!t?t:i.call(this,e)}}e=null}():!function(e){"use strict";if("Element"in e){var t="classList",i="prototype",s=e.Element[i],o=Object,n=String[i].trim||function(){return this.replace(/^\s+|\s+$/g,"")},r=Array[i].indexOf||function(e){for(var t=0,i=this.length;t<i;t++)if(t in this&&this[t]===e)return t;return-1},a=function(e,t){this.name=e,this.code=DOMException[e],this.message=t},c=function(e,t){if(""===t)throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(t))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return r.call(e,t)},l=function(e){for(var t=n.call(e.getAttribute("class")||""),i=t?t.split(/\s+/):[],s=0,o=i.length;s<o;s++)this.push(i[s]);this._updateClassName=function(){e.setAttribute("class",this.toString())}},u=l[i]=[],d=function(){return new l(this)};if(a[i]=Error[i],u.item=function(e){return this[e]||null},u.contains=function(e){return e+="",c(this,e)!==-1},u.add=function(){var e,t=arguments,i=0,s=t.length,o=!1;do e=t[i]+"",c(this,e)===-1&&(this.push(e),o=!0);while(++i<s);o&&this._updateClassName()},u.remove=function(){var e,t,i=arguments,s=0,o=i.length,n=!1;do for(e=i[s]+"",t=c(this,e);t!==-1;)this.splice(t,1),n=!0,t=c(this,e);while(++s<o);n&&this._updateClassName()},u.toggle=function(e,t){e+="";var i=this.contains(e),s=i?t!==!0&&"remove":t!==!1&&"add";return s&&this[s](e),t===!0||t===!1?t:!i},u.toString=function(){return this.join(" ")},o.defineProperty){var p={get:d,enumerable:!0,configurable:!0};try{o.defineProperty(s,t,p)}catch(e){e.number===-2146823252&&(p.enumerable=!1,o.defineProperty(s,t,p))}}else o[i].__defineGetter__&&s.__defineGetter__(t,d)}}(self)),function(){function e(e,t,i){if(e)if(e.classList)e.classList[i?"add":"remove"](t);else{var s=(" "+e.className+" ").replace(/\s+/g," ").replace(" "+t+" ","");e.className=s+(i?" "+t:"")}}function t(t,i){if(t in n&&(i||t!=r)&&(r.length||t!=n.video)){switch(t){case n.video:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"},{src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm",type:"video/webm"}],poster:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0}]});break;case n.audio:s.source({type:"audio",title:"Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",sources:[{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]});break;case n.youtube:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"bTqVqk7FSmY",type:"youtube"}]});break;case n.vimeo:s.source({type:"video",title:"View From A Blue Moon",sources:[{src:"143418951",type:"vimeo"}]})}r=t;for(var a=o.length-1;a>=0;a--)e(o[a].parentElement,"active",!1);e(document.querySelector('[data-source="'+t+'"]').parentElement,"active",!0)}}var i=plyr.setup({debug:!0,title:"Video demo",iconUrl:"../dist/plyr.svg",tooltips:{controls:!0},captions:{defaultActive:!0}});plyr.loadSprite("dist/demo.svg");for(var s=i[0],o=document.querySelectorAll("[data-source]"),n={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},r=window.location.hash.replace("#",""),a=window.history&&window.history.pushState,c=o.length-1;c>=0;c--)o[c].addEventListener("click",function(){var e=this.getAttribute("data-source");t(e),a&&history.pushState({type:e},"","#"+e)});if(window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),a){var l=!r.length;l&&(r=n.video),r in n&&history.replaceState({type:r},"",l?"":"#"+r),r!==n.video&&t(r,!0)}}(),document.domain.indexOf("plyr.io")>-1&&(!function(e,t,i,s,o,n,r){e.GoogleAnalyticsObject=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=1*new Date,n=t.createElement(i),r=t.getElementsByTagName(i)[0],n.async=1,n.src=s,r.parentNode.insertBefore(n,r)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-40881672-11","auto"),ga("send","pageview"));

View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles -->
<link rel="stylesheet" href="dist/docs.css">
<link rel="stylesheet" href="dist/demo.css">
</head>
<body>
<main>

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

@ -245,15 +245,15 @@ options = {
// If aws is setup
if("cdn" in aws) {
var regex = "(?:0|[1-9][0-9]*)\\.(?:0|[1-9][0-9]*)\.(?:0|[1-9][0-9]*)(?:-[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?(?:\\+[\\da-z\\-]+(?:\.[\\da-z\\-]+)*)?",
cdnpath = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
cdnpath = new RegExp(aws.cdn.domain + "\/" + regex, "gi"),
semver = new RegExp("v" + regex, "gi"),
localPath = new RegExp("(\.\.\/)?dist", "gi"),
versionPath = "https://" + aws.cdn.bucket + "/" + version;
versionPath = "https://" + aws.cdn.domain + "/" + version;
}
// Publish version to CDN bucket
gulp.task("cdn", function () {
console.log("Uploading " + version + " to " + aws.cdn.bucket + "...");
console.log("Uploading " + version + " to " + aws.cdn.domain + "...");
// Upload to CDN
return gulp.src(paths.upload)
@ -270,17 +270,17 @@ gulp.task("cdn", function () {
// Publish to demo bucket
gulp.task("demo", function () {
console.log("Uploading " + version + " demo to " + aws.demo.bucket + "...");
console.log("Uploading " + version + " demo to " + aws.demo.domain + "...");
// Replace versioned files in readme.md
gulp.src([root + "/readme.md"])
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
.pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
.pipe(gulp.dest(root));
// Replace versioned files in plyr.js
gulp.src(path.join(root, "src/js/plyr.js"))
.pipe(replace(semver, "v" + version))
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
.pipe(replace(cdnpath, aws.cdn.domain + "/" + version))
.pipe(gulp.dest(path.join(root, "src/js/")));
// Replace local file paths with remote paths in demo HTML
@ -320,14 +320,14 @@ gulp.task("symlinks", function () {
// Open the demo site to check it's sweet
gulp.task("open", function () {
console.log("Opening " + aws.demo.bucket + "...");
console.log("Opening " + aws.demo.domain + "...");
// A file must be specified or gulp will skip the task
// Doesn't matter which file since we set the URL above
// Weird, I know...
return gulp.src([paths.demo.root + "index.html"])
.pipe(open("", {
url: "http://" + aws.demo.bucket
url: "http://" + aws.demo.domain
}));
});

View File

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

View File

@ -122,7 +122,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
If you want to use our CDN for the JavaScript, you can use the following:
```html
<script src="https://cdn.plyr.io/2.0.2/plyr.js"></script>
<script src="https://cdn.plyr.io/2.0.9/plyr.js"></script>
```
### CSS
@ -135,11 +135,11 @@ Include the `plyr.css` stylsheet into your `<head>`
If you want to use our CDN for the default CSS, you can use the following:
```html
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.2/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/2.0.9/plyr.css">
```
### 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.2/plyr.svg`.
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.9/plyr.svg`.
## Advanced
@ -322,8 +322,8 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
<tr>
<td><code>keyboardShortcuts</code></td>
<td>Object</td>
<td><code>{ focused: true, global: true }</code></td>
<td>Enable <a href="#shortcuts">keyboard shortcuts</a> for focused players only or global as well (if there's only one player in the document)</td>
<td><code>{ focused: true, global: false }</code></td>
<td>Enable <a href="#shortcuts">keyboard shortcuts</a> for focused players only or globally as well (this will only work if there's one player in the document)</td>
</tr>
<tr>
<td><code>tooltips</code></td>
@ -487,12 +487,12 @@ Here's a list of the methods supported:
<tr>
<td><code>isReady()</code></td>
<td>&mdash;</td>
<td>Determine if the player is loaded and UI ready - this is because HTML5 is ready instantly but YouTube and Vimeo can take some time to load their APIs.</td>
<td>Determine if the player is loaded and UI ready.</td>
</tr>
<tr>
<td><code>on()</code></td>
<td>String, Function</td>
<td>Watch for an event (first argument) and run a callback function (second argument). This saves you doing your own <code>addEventListner</code> code.</td>
<td>Watch for an event (first argument) and run a callback function (second argument). This saves you doing your own <code>addEventListner</code> code. This is chainable.</td>
</tr>
<tr>
<td><code>play()</code></td>
@ -529,6 +529,26 @@ Here's a list of the methods supported:
<td>Number</td>
<td>Seeks the media to the provided parameter, time in seconds.</td>
</tr>
<tr>
<td><code>getCurrentTime()</code></td>
<td>&mdash;</td>
<td>Will return a float with the current time in seconds.</td>
</tr>
<tr>
<td><code>getDuration()</code></td>
<td>&mdash;</td>
<td>Will return a float with the duration in seconds.</td>
</tr>
<tr>
<td><code>getVolume()</code></td>
<td>&mdash;</td>
<td>Will return a float between 0 and 1 for the current volume level.</td>
</tr>
<tr>
<td><code>isMuted()</code></td>
<td>&mdash;</td>
<td>Will return a boolean for whether the media is currently muted.</td>
</tr>
<tr>
<td><code>setVolume(...)</code></td>
<td>Number</td>
@ -539,6 +559,11 @@ Here's a list of the methods supported:
<td>Boolean</td>
<td>Toggles playback for the player based on either the boolean argument or it's current state.</td>
</tr>
<tr>
<td><code>isPaused()</code></td>
<td>&mdash;</td>
<td>Will return a boolean for whether the media is currently paused.</td>
</tr>
<tr>
<td><code>toggleMute()</code></td>
<td>&mdash;</td>
@ -590,11 +615,6 @@ Here's a list of the methods supported:
<td>&mdash;</td>
<td>Restores the original element, reversing the effects of <code>setup()</code>.</td>
</tr>
<tr>
<td><code>getCurrentTime()</code></td>
<td>&mdash;</td>
<td>Will return a float with the current time in seconds.</td>
</tr>
</tbody>
</table>
@ -736,7 +756,7 @@ These events also bubble up the DOM. The event target will be the container elem
<tr>
<td><code>ready</code></td>
<td></td>
<td>Triggered when the instance is ready for API use and external APIs are ready (YouTube and Vimeo).</td>
<td>Triggered when the instance is ready for API use and external APIs are ready (in the case of YouTube and Vimeo).</td>
</tr>
<tr>
<td><code>canplay</code></td>
@ -873,7 +893,7 @@ More info on the respective API's here:
*Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.
## Shortcuts
By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the document then the shortcuts will work when any element has focus, apart from an element that requires input (such as an `<input>`, `<select>` or `[contenteditable]`).
By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the document then the shortcuts will work when any element has focus, apart from an element that requires input.
<table class="table" width="100%">
<thead>

View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v2.0.2
// plyr.js v2.0.9
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -16,7 +16,7 @@
module.exports = factory(root, document);
} else if (typeof define === 'function' && define.amd) {
// AMD
define(null, function() { factory(root, document) });
define([], function () { return factory(root, document); });
} else {
// Browser globals (root is window)
root.plyr = factory(root, document);
@ -43,14 +43,14 @@
displayDuration: true,
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/2.0.2/plyr.svg',
iconUrl: 'https://cdn.plyr.io/2.0.9/plyr.svg',
clickToPlay: true,
hideControls: true,
showPosterOnEnd: false,
disableContextMenu: true,
keyboardShorcuts: {
focused: true,
global: true
global: false
},
tooltips: {
controls: false,
@ -59,7 +59,7 @@
selectors: {
html5: 'video, audio',
embed: '[data-type]',
editable: 'input, select, [contenteditable]',
editable: 'input, textarea, select, [contenteditable]',
container: '.plyr',
controls: {
container: null,
@ -175,7 +175,7 @@
fullscreen: null
},
// Events to watch on HTML5 media elements
events: ['ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'emptied'],
events: ['ready', 'ended', 'progress', 'stalled', 'playing', 'waiting', 'canplay', 'canplaythrough', 'loadstart', 'loadeddata', 'loadedmetadata', 'timeupdate', 'volumechange', 'play', 'pause', 'error', 'seeking', 'emptied'],
// Logging
logPrefix: '[Plyr]'
};
@ -195,41 +195,36 @@
isChrome = false,
isSafari = false;
// MSIE 11
if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) {
// MSIE 11
isIE = true;
name = 'IE';
fullVersion = '11';
}
// MSIE
else if ((verOffset = ua.indexOf('MSIE')) !== -1) {
} else if ((verOffset = ua.indexOf('MSIE')) !== -1) {
// MSIE
isIE = true;
name = 'IE';
fullVersion = ua.substring(verOffset + 5);
}
// Chrome
else if ((verOffset = ua.indexOf('Chrome')) !== -1) {
} else if ((verOffset = ua.indexOf('Chrome')) !== -1) {
// Chrome
isChrome = true;
name = 'Chrome';
fullVersion = ua.substring(verOffset + 7);
}
// Safari
else if ((verOffset = ua.indexOf('Safari')) !== -1) {
} else if ((verOffset = ua.indexOf('Safari')) !== -1) {
// Safari
isSafari = true;
name = 'Safari';
fullVersion = ua.substring(verOffset + 7);
if ((verOffset = ua.indexOf('Version')) !== -1) {
fullVersion = ua.substring(verOffset + 8);
}
}
// Firefox
else if ((verOffset = ua.indexOf('Firefox')) !== -1) {
} else if ((verOffset = ua.indexOf('Firefox')) !== -1) {
// Firefox
isFirefox = true;
name = 'Firefox';
fullVersion = ua.substring(verOffset + 8);
}
// In most other browsers, 'name/version' is at the end of userAgent
else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) {
} else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) {
// In most other browsers, 'name/version' is at the end of userAgent
name = ua.substring(nameOffset,verOffset);
fullVersion = ua.substring(verOffset + 1);
@ -272,7 +267,6 @@
function _supportMime(plyr, mimeType) {
var media = plyr.media;
// Only check video types for video players
if (plyr.type === 'video') {
// Check type
switch (mimeType) {
@ -280,10 +274,7 @@
case 'video/mp4': return !!(media.canPlayType && media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
case 'video/ogg': return !!(media.canPlayType && media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''));
}
}
// Only check audio types for audio players
else if (plyr.type === 'audio') {
} else if (plyr.type === 'audio') {
// Check type
switch (mimeType) {
case 'audio/mpeg': return !!(media.canPlayType && media.canPlayType('audio/mpeg;').replace(/no/, ''));
@ -344,8 +335,7 @@
// append it to the parent.
if (sibling) {
parent.insertBefore(child, sibling);
}
else {
} else {
parent.appendChild(child);
}
@ -410,8 +400,7 @@
if (element) {
if (element.classList) {
element.classList[state ? 'add' : 'remove'](className);
}
else {
} else {
var name = (' ' + element.className + ' ').replace(/\s+/g, ' ').replace(' ' + className + ' ', '');
element.className = name + (state ? ' ' + className : '');
}
@ -423,8 +412,7 @@
if (element) {
if (element.classList) {
return element.classList.contains(className);
}
else {
} else {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(element.className);
}
}
@ -568,8 +556,7 @@
if (source[property] && source[property].constructor && source[property].constructor === Object) {
destination[property] = destination[property] || {};
_extend(destination[property], source[property]);
}
else {
} else {
destination[property] = source[property];
}
}
@ -620,13 +607,12 @@
element: null,
prefix: ''
},
browserPrefixes = 'webkit o ms khtml'.split(' ');
browserPrefixes = 'webkit o moz ms khtml'.split(' ');
// Check for native support
if (!_is.undefined(document.cancelFullScreen)) {
fullscreen.supportsFullScreen = true;
}
else {
} else {
// Check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullscreen.prefix = browserPrefixes[i];
@ -634,9 +620,8 @@
if (!_is.undefined(document[fullscreen.prefix + 'CancelFullScreen'])) {
fullscreen.supportsFullScreen = true;
break;
}
// Special case for MS (when isn't it?)
else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) {
} else if (!_is.undefined(document.msExitFullscreen) && document.msFullscreenEnabled) {
// Special case for MS (when isn't it?)
fullscreen.prefix = 'ms';
fullscreen.supportsFullScreen = true;
break;
@ -657,6 +642,8 @@
switch (this.prefix) {
case '':
return document.fullscreenElement === element;
case 'moz':
return document.mozFullScreenElement === element;
default:
return document[this.prefix + 'FullscreenElement'] === element;
}
@ -920,8 +907,7 @@
// Add styling hook
_toggleClass(plyr.container, config.classes.fullscreen.enabled, true);
}
else {
} else {
_log('Fullscreen not supported and fallback disabled');
}
@ -972,17 +958,14 @@
if (captionSrc === '') {
plyr.captionExists = false;
_log('No caption track found');
}
else {
} else {
_log('Caption track found; URI: ' + captionSrc);
}
// If no caption file exists, hide container for caption text
if (!plyr.captionExists) {
_toggleClass(plyr.container, config.classes.captions.enabled);
}
// If caption file exists, process captions
else {
} else {
// Turn off native caption rendering to avoid double captions
// This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
var tracks = plyr.media.textTracks;
@ -1018,16 +1001,14 @@
// Display a cue, if there is one
if (this.activeCues[0] && 'text' in this.activeCues[0]) {
_setCaption(this.activeCues[0].getCueAsHTML());
}
else {
} else {
_setCaption();
}
});
}
}
}
// Caption tracks not natively supported
else {
} else {
// Caption tracks not natively supported
_log('TextTracks not supported so rendering captions manually');
// Render captions from array at appropriate time
@ -1044,15 +1025,26 @@
var captions = [],
caption,
req = xhr.responseText;
captions = req.split('\n\n');
//According to webvtt spec, line terminator consists of one of the following
// CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D)
var lineSeparator = '\r\n';
if(req.indexOf(lineSeparator+lineSeparator) === -1) {
if(req.indexOf('\r\r') !== -1){
lineSeparator = '\r';
} else {
lineSeparator = '\n';
}
}
captions = req.split(lineSeparator+lineSeparator);
for (var r = 0; r < captions.length; r++) {
caption = captions[r];
plyr.captions[r] = [];
// Get the parts of the captions
var parts = caption.split('\n'),
var parts = caption.split(lineSeparator),
index = 0;
// Incase caption numbers are added
@ -1067,8 +1059,7 @@
plyr.captions.shift();
_log('Successfully loaded the caption file via AJAX');
}
else {
} else {
_warn(config.logPrefix + 'There was a problem loading the caption file via AJAX');
}
}
@ -1099,8 +1090,7 @@
// Set the span content
if (_is.string(caption)) {
content.innerHTML = caption.trim();
}
else {
} else {
content.appendChild(caption);
}
@ -1134,8 +1124,7 @@
function _subTcSecs(tc) {
if (tc === null || tc === undefined) {
return 0;
}
else {
} else {
var tc1 = [],
tc2 = [],
seconds;
@ -1179,8 +1168,7 @@
// Render the caption
_setCaption(plyr.currentCaption);
}
else {
} else {
_setCaption();
}
}
@ -1237,13 +1225,12 @@
function _checkFocus(event) {
// If it is TAB
if (event.which === 9 && plyr.isFullscreen) {
// Move focus to first element that can be tabbed if Shift isn't used
if (event.target === last && !event.shiftKey) {
// Move focus to first element that can be tabbed if Shift isn't used
event.preventDefault();
first.focus();
}
// Move focus to last element that can be tabbed if Shift is used
else if (event.target === first && event.shiftKey) {
} else if (event.target === first && event.shiftKey) {
// Move focus to last element that can be tabbed if Shift is used
event.preventDefault();
last.focus();
}
@ -1258,8 +1245,7 @@
function _insertChildElements(type, attributes) {
if (_is.string(attributes)) {
_insertElement(type, plyr.media, { src: attributes });
}
else if (attributes.constructor === Array) {
} else if (attributes.constructor === Array) {
for (var i = attributes.length - 1; i >= 0; i--) {
_insertElement(type, plyr.media, attributes[i]);
}
@ -1276,8 +1262,7 @@
if (iconUrl.absolute) {
_log('AJAX loading absolute SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : ''));
loadSprite(iconUrl.url, "sprite-plyr");
}
else {
} else {
_log('Sprite will be used as external resource directly');
}
}
@ -1393,8 +1378,7 @@
function _toggleNativeControls(toggle) {
if (toggle && _inArray(config.types.html5, plyr.type)) {
plyr.media.setAttribute('controls', '');
}
else {
} else {
plyr.media.removeAttribute('controls');
}
}
@ -1446,14 +1430,12 @@
if (!value) {
// Key wasn't set (or had been cleared), move along
return;
}
else if (/^\d+(\.\d+)?$/.test(value)) {
} else if (/^\d+(\.\d+)?$/.test(value)) {
// If value is a number, it's probably volume from an older
// version of plyr. See: https://github.com/Selz/plyr/pull/313
// Update the key to be JSON
_updateStorage({volume: parseFloat(value)});
}
else {
} else {
// Assume it's JSON from this or a later version of plyr
plyr.storage = JSON.parse(value);
}
@ -1536,7 +1518,6 @@
_toggleClass(plyr.media, config.classes.videoWrapper, true);
_toggleClass(plyr.media, config.classes.embedWrapper, true);
// YouTube
if (plyr.type === 'youtube') {
// Create the YouTube container
plyr.media.appendChild(container);
@ -1547,8 +1528,7 @@
// Setup API
if (_is.object(window.YT)) {
_youTubeReady(mediaId, container);
}
else {
} else {
// Load the API
_injectScript(config.urls.youtube.api);
@ -1563,14 +1543,11 @@
window.onYouTubeReadyCallbacks.forEach(function(callback) { callback(); });
};
}
}
// Vimeo
else if (plyr.type === 'vimeo') {
} else if (plyr.type === 'vimeo') {
// Vimeo needs an extra div to hide controls on desktop (which has full support)
if (plyr.supported.full) {
plyr.media.appendChild(container);
}
else {
} else {
container = plyr.media;
}
@ -1588,14 +1565,11 @@
_vimeoReady(mediaId, container);
}
}, 50);
}
else {
} else {
_vimeoReady(mediaId, container);
}
}
// Soundcloud
// TODO: Currently unsupported and undocumented
else if (plyr.type === 'soundcloud') {
} else if (plyr.type === 'soundcloud') {
// TODO: Currently unsupported and undocumented
// Inject the iframe
var soundCloud = document.createElement('iframe');
@ -1763,6 +1737,14 @@
_triggerEvent(plyr.media, 'timeupdate');
}, 100);
// Check duration again due to YouTube bug
// https://github.com/Selz/plyr/issues/374
// https://code.google.com/p/gdata-issues/issues/detail?id=8690
if (plyr.media.duration !== instance.getDuration()) {
plyr.media.duration = instance.getDuration();
_triggerEvent(plyr.media, 'durationchange');
}
break;
case 2:
@ -1783,8 +1765,8 @@
function _vimeoReady(mediaId, container) {
// Setup instance
// https://github.com/vimeo/player.js
plyr.embed = new window.Vimeo.Player(container.id, {
id: mediaId,
plyr.embed = new window.Vimeo.Player(container, {
id: parseInt(mediaId),
loop: config.loop,
autoplay: config.autoplay,
byline: false,
@ -1834,7 +1816,7 @@
plyr.embed.on('loaded', function() {
// Fix keyboard focus issues
// https://github.com/Selz/plyr/issues/317
if(_is.htmlElement(plyr.embed.element) && plyr.supported.full) {
if (_is.htmlElement(plyr.embed.element) && plyr.supported.full) {
plyr.embed.element.setAttribute('tabindex', '-1');
}
});
@ -1966,12 +1948,9 @@
toggle = plyr.media.paused;
}
// Play
if (toggle) {
_play();
}
// Pause
else {
} else {
_pause();
}
@ -2003,12 +1982,9 @@
paused = plyr.media.paused,
duration = _getDuration();
// Explicit position
if (_is.number(input)) {
targetTime = input;
}
// Event
else if (_is.object(input) && _inArray(['input', 'change'], input.type)) {
} else if (_is.object(input) && _inArray(['input', 'change'], input.type)) {
// It's the seek slider
// Seek to the selected time
targetTime = ((input.target.value / input.target.max) * duration);
@ -2017,8 +1993,7 @@
// Normalise targetTime
if (targetTime < 0) {
targetTime = 0;
}
else if (targetTime > duration) {
} else if (targetTime > duration) {
targetTime = duration;
}
@ -2077,7 +2052,7 @@
mediaDuration = 0;
// Only if duration available
if(plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
if (plyr.media.duration !== null && !isNaN(plyr.media.duration)) {
mediaDuration = plyr.media.duration;
}
@ -2116,19 +2091,16 @@
// If it's a fullscreen change event, update the UI
if (event && event.type === fullscreen.fullScreenEventName) {
plyr.isFullscreen = fullscreen.isFullScreen(plyr.container);
}
// Else it's a user request to enter or exit
else {
// Request fullscreen
} else {
// Else it's a user request to enter or exit
if (!fullscreen.isFullScreen(plyr.container)) {
// Save scroll position
_saveScrollPosition();
// Request full screen
fullscreen.requestFullScreen(plyr.container);
}
// Bail from fullscreen
else {
} else {
// Bail from fullscreen
fullscreen.cancelFullScreen();
}
@ -2137,8 +2109,7 @@
return;
}
}
else {
} else {
// Otherwise, it's a simple toggle
plyr.isFullscreen = !plyr.isFullscreen;
@ -2253,7 +2224,9 @@
}
// Toggle muted state
if (plyr.media.muted && volume > 0) {
if (volume === 0) {
plyr.media.muted = true;
} else if (plyr.media.muted && volume > 0) {
_toggleMute();
}
}
@ -2387,12 +2360,11 @@
value = (function() {
var buffered = plyr.media.buffered;
// HTML5
if (buffered && buffered.length) {
// HTML5
return _getPercentage(buffered.end(0), duration);
}
// YouTube returns between 0 and 1
else if (_is.number(buffered)) {
} else if (_is.number(buffered)) {
// YouTube returns between 0 and 1
return (buffered * 100);
}
@ -2421,8 +2393,7 @@
if (_is.undefined(progress)) {
if (plyr.progress && plyr.progress.buffer) {
progress = plyr.progress.buffer;
}
else {
} else {
return;
}
}
@ -2430,9 +2401,8 @@
// One progress element passed
if (_is.htmlElement(progress)) {
progress.value = value;
}
// Object of progress + text element
else if (progress) {
} else if (progress) {
// Object of progress + text element
if (progress.bar) {
progress.bar.value = value;
}
@ -2545,20 +2515,17 @@
if (!event) {
if (_hasClass(plyr.progress.tooltip, visible)) {
percent = plyr.progress.tooltip.style.left.replace('%', '');
}
else {
} else {
return;
}
}
else {
} else {
percent = ((100 / clientRect.width) * (event.pageX - clientRect.left));
}
// Set bounds
if (percent < 0) {
percent = 0;
}
else if (percent > 100) {
} else if (percent > 100) {
percent = 100;
}
@ -2605,8 +2572,7 @@
if (toggle.type === 'focus') {
delay = 3000;
}
}
else {
} else {
show = _hasClass(plyr.container, config.classes.hideControls);
}
}
@ -2844,8 +2810,7 @@
// Get the last play button to account for the large play button
if (target && target.length > 1) {
target = target[target.length - 1];
}
else {
} else {
target = target[0];
}
@ -2870,8 +2835,7 @@
if (!focused || focused === document.body) {
focused = null;
}
else {
} else {
focused = document.querySelector(':focus');
}
@ -2892,8 +2856,7 @@
for (var i = 0; i < element.length; i++) {
_toggleClass(element[i], config.classes.tabFocus, (element[i] === focused));
}
}
else {
} else {
_toggleClass(element, config.classes.tabFocus, (element === focused));
}
}
@ -3001,8 +2964,7 @@
// Store last code for next cycle
last = code;
}
else {
} else {
last = null;
}
}
@ -3099,8 +3061,7 @@
if (event.deltaY < 0 || event.deltaX > 0) {
if (inverted) {
_decreaseVolume(step);
}
else {
} else {
_increaseVolume(step);
}
}
@ -3109,8 +3070,7 @@
if (event.deltaY > 0 || event.deltaX < 0) {
if (inverted) {
_increaseVolume(step);
}
else {
} else {
_decreaseVolume(step);
}
}
@ -3131,7 +3091,7 @@
// Handle the media finishing
_on(plyr.media, 'ended', function() {
// Show poster on end
if(plyr.type === 'video' && config.showPosterOnEnd) {
if (plyr.type === 'video' && config.showPosterOnEnd) {
// Clear
if (plyr.type === 'video') {
_setCaption();
@ -3179,12 +3139,10 @@
if (plyr.media.paused) {
_play();
}
else if (plyr.media.ended) {
} else if (plyr.media.ended) {
_seek();
_play();
}
else {
} else {
_pause();
}
});
@ -3332,8 +3290,7 @@
// Clean up
media.removeAttribute('data-type');
media.removeAttribute('data-video-id');
}
else {
} else {
plyr.type = tagName;
config.crossorigin = (media.getAttribute('crossorigin') !== null);
config.autoplay = (config.autoplay || (media.getAttribute('autoplay') !== null));
@ -3445,9 +3402,14 @@
getEmbed: function() { return plyr.embed; },
getMedia: function() { return plyr.media; },
getType: function() { return plyr.type; },
getDuration: _getDuration,
getCurrentTime: function() { return plyr.media.currentTime; },
getVolume: function() { return plyr.media.volume; },
isMuted: function() { return plyr.media.muted; },
isReady: function() { return _hasClass(plyr.container, config.classes.ready); },
isLoading: function() { return _hasClass(plyr.container, config.classes.loading); },
on: function(event, callback) { _on(plyr.container, event, callback); },
isPaused: function() { return plyr.media.paused; },
on: function(event, callback) { _on(plyr.container, event, callback); return this; },
play: _play,
pause: _pause,
stop: function() { _pause(); _seek(); },
@ -3465,14 +3427,15 @@
toggleControls: _toggleControls,
isFullscreen: function() { return plyr.isFullscreen || false; },
support: function(mimeType) { return _supportMime(plyr, mimeType); },
destroy: _destroy,
getCurrentTime: function() { return media.currentTime; }
destroy: _destroy
};
// Everything done
function _ready() {
// Ready event
_triggerEvent(plyr.container, 'ready', true);
// Ready event at end of execution stack
window.setTimeout(function() {
_triggerEvent(plyr.media, 'ready');
}, 0);
// Set class hook on media element
_toggleClass(plyr.media, defaults.classes.setup, true);
@ -3520,8 +3483,7 @@
// Check for CORS support
if ('withCredentials' in x) {
x.open('GET', url, true);
}
else {
} else {
return;
}
@ -3580,16 +3542,14 @@
selector = [defaults.selectors.html5, defaults.selectors.embed].join(',');
// Select the elements
// Assume elements is a NodeList by default
if (_is.string(targets)) {
// String selector passed
targets = document.querySelectorAll(targets);
}
// Single HTMLElement passed
else if (_is.htmlElement(targets)) {
} else if (_is.htmlElement(targets)) {
// Single HTMLElement passed
targets = [targets];
}
// No selector passed, possibly options as first argument
else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) {
} else if (!_is.nodeList(targets) && !_is.array(targets) && !_is.string(targets)) {
// No selector passed, possibly options as first argument
// If options are the first argument
if (_is.undefined(options) && _is.object(targets)) {
options = targets;
@ -3636,9 +3596,8 @@
for (var x = 0; x < children.length; x++) {
add(target, children[x]);
}
}
// Wrap target if it's a media element
else if (_matches(target, selector)) {
} else if (_matches(target, selector)) {
// Target is media element
add(target, target);
}
}
@ -3679,7 +3638,7 @@
// Listen for events if debugging
if (config.debug) {
var events = config.events.concat(['setup', 'ready', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
var events = config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
_on(instance.getContainer(), events.join(' '), function(event) {
console.log([config.logPrefix, 'event:', event.type].join(' '), event.detail.plyr);
@ -3700,12 +3659,11 @@
// Get all instances within a provided container
function get(container) {
// Get selector if string passed
if (_is.string(container)) {
// Get selector if string passed
container = document.querySelector(container);
}
// Use body by default to get all on page
else if (_is.undefined(container)) {
} else if (_is.undefined(container)) {
// Use body by default to get all on page
container = document.body;
}

View File

@ -173,9 +173,6 @@
position: relative;
background: #000;
border-radius: inherit;
// Cleaner radius, also forces iframe radius
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
// Container for embeds
@ -184,6 +181,9 @@
height: 0;
overflow: hidden;
// Require z-index to force border-radius
z-index: 0;
iframe {
position: absolute;
top: 0;
@ -192,6 +192,7 @@
height: 100%;
border: 0;
user-select: none;
z-index: 1;
}
// Vimeo hack
@ -244,12 +245,15 @@
.plyr--captions-active .plyr__captions {
display: block;
}
.plyr--fullscreen-active .plyr__captions {
font-size: @plyr-font-size-captions-large;
}
.plyr--hide-controls .plyr__captions {
transform: translateY(-(@plyr-control-spacing * 1.5));
}
// Large captions in full screen on larger screens
@media (min-width: @plyr-bp-screen-lg) {
.plyr--fullscreen-active .plyr__captions {
font-size: @plyr-font-size-captions-large;
}
}
// Controls
// --------------------------------------------------------------

View File

@ -68,4 +68,5 @@
// Breakpoints
@plyr-bp-screen-sm: 480px;
@plyr-bp-screen-md: 768px;
@plyr-bp-screen-md: 768px;
@plyr-bp-screen-lg: 1024px;

View File

@ -172,9 +172,6 @@
position: relative;
background: #000;
border-radius: inherit;
// Cleaner radius, also forces iframe radius
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
// Container for embeds
@ -184,6 +181,9 @@
overflow: hidden;
border-radius: inherit;
// Require z-index to force border-radius
z-index: 0;
iframe {
position: absolute;
top: 0;
@ -244,12 +244,15 @@
.plyr--captions-active .plyr__captions {
display: block;
}
.plyr--fullscreen-active .plyr__captions {
font-size: $plyr-font-size-captions-large;
}
.plyr--hide-controls .plyr__captions {
transform: translateY(-($plyr-control-spacing * 2));
}
// Large captions in full screen on larger screens
@media (min-width: $plyr-bp-screen-lg) {
.plyr--fullscreen-active .plyr__captions {
font-size: $plyr-font-size-captions-large;
}
}
// Controls
// --------------------------------------------------------------

View File

@ -69,4 +69,5 @@ $plyr-range-selected-bg: $plyr-color-main !default;
// Breakpoints
$plyr-bp-screen-sm: 480px !default;
$plyr-bp-screen-md: 768px !default;
$plyr-bp-screen-md: 768px !default;
$plyr-bp-screen-lg: 1024px !default;