Compare commits
18 Commits
Author | SHA1 | Date | |
---|---|---|---|
a3ed309342 | |||
08b4c09b89 | |||
a509a5e1bc | |||
bec10e7836 | |||
f9a184800b | |||
f428c3ff8b | |||
97eb40a8e3 | |||
8211631950 | |||
a17cbb0e8b | |||
8098be6f93 | |||
1c73c9fbfe | |||
978606edb4 | |||
435b5c74bf | |||
15fd7041ab | |||
1ced6b4d67 | |||
6694c1e6cf | |||
19ca906e50 | |||
12e94775d6 |
18
.github/issue_template.md
vendored
Normal file
18
.github/issue_template.md
vendored
Normal 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
8
.github/pull_request_template.md
vendored
Normal 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
11
.jsbeautifyrc
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"html": {
|
||||
"allowed_file_extensions": []
|
||||
},
|
||||
"css": {
|
||||
"allowed_file_extensions": []
|
||||
},
|
||||
"js": {
|
||||
"allowed_file_extensions": []
|
||||
}
|
||||
}
|
35
changelog.md
35
changelog.md
@ -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
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
@ -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 – “It All Began With A Burst”",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 – “It All Began With A Burst”",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"));
|
@ -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
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
16
gulpfile.js
16
gulpfile.js
@ -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
|
||||
}));
|
||||
});
|
||||
|
||||
|
@ -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",
|
||||
|
48
readme.md
48
readme.md
@ -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>—</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>—</td>
|
||||
<td>Will return a float with the current time in seconds.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getDuration()</code></td>
|
||||
<td>—</td>
|
||||
<td>Will return a float with the duration in seconds.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getVolume()</code></td>
|
||||
<td>—</td>
|
||||
<td>Will return a float between 0 and 1 for the current volume level.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>isMuted()</code></td>
|
||||
<td>—</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>—</td>
|
||||
<td>Will return a boolean for whether the media is currently paused.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>toggleMute()</code></td>
|
||||
<td>—</td>
|
||||
@ -590,11 +615,6 @@ Here's a list of the methods supported:
|
||||
<td>—</td>
|
||||
<td>Restores the original element, reversing the effects of <code>setup()</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>getCurrentTime()</code></td>
|
||||
<td>—</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>
|
||||
|
306
src/js/plyr.js
306
src/js/plyr.js
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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
|
||||
// --------------------------------------------------------------
|
||||
|
@ -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;
|
@ -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
|
||||
// --------------------------------------------------------------
|
||||
|
@ -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;
|
Reference in New Issue
Block a user