Changes to setup return value, SVG bug fix (fixes #269)
This commit is contained in:
Sam
parent
1a745e1eaa
commit
98792168e4
@ -1,11 +1,15 @@
|
||||
# Changelog
|
||||
|
||||
# v1.8.0
|
||||
- ***(Important)*** `setup()` now returns the element Plyr was setup on rather than the `plyr` object. This means `var player = plyr.setup()[0];` would now be `var player = plyr.setup()[0].plyr;`. This improves support for React and other virtual dom frameworks as mentioned in #254
|
||||
- Fixed using a relative URL for `iconUrl` in IE (fixes #269)
|
||||
|
||||
# v1.7.0
|
||||
- SASS cleanup (fixes #265)
|
||||
- Docs tidy up to help quick start (fixes #253)
|
||||
- Fix for issues with data attribute options passing (fixes #257)
|
||||
- Removed the requirement for a wrapper div to setup Plyr and removed the dependency on the `plyr` classname as a JS hook. By default it will now look for `<video>`, `<audio>` and `[data-type]` elements. If you are just calling `setup()` with a `<div class="plyr">` you may want to give it a good test after upgrading. You can probably remove the wrapper div. The reason behind this is to make setup easier for newcomers and prevent the styling being used on unsupported players (because the plyr classname was used as a CSS and JS hook - which isn't ideal)
|
||||
- Renamed the 'docs' folder to `demo` to avoid confusion. The readme is the docs after all.
|
||||
- ***(Important)*** Removed the requirement for a wrapper div to setup Plyr and removed the dependency on the `plyr` classname as a JS hook. By default it will now look for `<video>`, `<audio>` and `[data-type]` elements. If you are just calling `setup()` with a `<div class="plyr">` you may want to give it a good test after upgrading. You can probably remove the wrapper div. The reason behind this is to make setup easier for newcomers and prevent the styling being used on unsupported players (because the plyr classname was used as a CSS and JS hook - which isn't ideal)
|
||||
- Renamed the 'docs' folder to `demo` to avoid confusion - the readme is the docs after all
|
||||
|
||||
## v1.6.20
|
||||
- Fix for multiple sprites being requested (fixes #259)
|
||||
|
||||
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;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].plyr,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,6 @@
|
||||
|
||||
/*global plyr*/
|
||||
|
||||
|
||||
// General functions
|
||||
;(function() {
|
||||
// Setup the player
|
||||
@ -24,7 +23,7 @@
|
||||
plyr.loadSprite('dist/demo.svg');
|
||||
|
||||
// Plyr returns an array regardless
|
||||
var player = instances[0];
|
||||
var player = instances[0].plyr;
|
||||
|
||||
// Setup type toggle
|
||||
var buttons = document.querySelectorAll('[data-source]'),
|
||||
|
||||
4
dist/plyr.js
vendored
4
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.7.0",
|
||||
"version": "1.8.0",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
|
||||
23
readme.md
23
readme.md
@ -113,7 +113,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/1.7.0/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/1.8.0/plyr.js"></script>
|
||||
```
|
||||
|
||||
### CSS
|
||||
@ -126,11 +126,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/1.7.0/plyr.css">
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.8.0/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/1.7.0/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/1.8.0/plyr.svg`.
|
||||
|
||||
## Advanced
|
||||
|
||||
@ -162,9 +162,7 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab
|
||||
|
||||
#### Initialising
|
||||
|
||||
By default, Plyr looks for all `<video>`, `<audio>` and `[data-type]` elements and initialises on any found. You can specify other options, including a different selector hook below. The container classname will be added to the specified element(s) if it is not already present (for the CSS).
|
||||
|
||||
You can initialize the player a few other ways:
|
||||
By default, Plyr looks for all `<video>`, `<audio>` and `[data-type]` elements with the document and initialises on any found. You can specify other options, including a different NodeList, HTMLElement or string selector as below:
|
||||
|
||||
Passing a [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList):
|
||||
```javascript
|
||||
@ -180,13 +178,16 @@ Passing a [string selector](https://developer.mozilla.org/en-US/docs/Web/API/Doc
|
||||
```javascript
|
||||
plyr.setup('.js-player', options);
|
||||
```
|
||||
This can be the target `<video>`, `<audio>` or `[data-type]` elements or a container element.
|
||||
|
||||
The NodeList, HTMLElement or string selector can be the target `<video>`, `<audio>` or `[data-type]` (for embeds) element or a container element. If a container has several media elements inside, each media element will be wrapped in a `<div>` and setup individually.
|
||||
|
||||
Passing just the options object:
|
||||
```javascript
|
||||
plyr.setup(options);
|
||||
```
|
||||
|
||||
`setup()` will return an array of all the elements Plyr was setup on. The `plyr` object can be accessed on these elements and used for the API.
|
||||
|
||||
#### RangeTouch
|
||||
Some touch browsers (particularly Mobile Safari on iOS) seem to have issues with `<input type="range">` elements whereby touching the track to set the value doesn't work and sliding the thumb can be tricky. To combat this, I've created [RangeTouch](https://rangetouch.com) which I'd recommend including in your solution. It's a tiny script with a nice benefit for users on touch devices.
|
||||
|
||||
@ -396,7 +397,7 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
|
||||
|
||||
## API
|
||||
|
||||
#### Fetching the plyr instance
|
||||
#### Getting the `plyr` instance
|
||||
A `plyr` object is added to any element that Plyr is initialized on. You can then control the player by accessing methods in the `plyr` object.
|
||||
|
||||
There are two ways to access the instance, firstly you re-query the element container you used for setup (e.g. `.js-player`) like so:
|
||||
@ -405,13 +406,15 @@ There are two ways to access the instance, firstly you re-query the element cont
|
||||
var player = document.querySelector('.js-player').plyr;
|
||||
```
|
||||
|
||||
You can listen for the `setup` [event](#events) on the container, after which the `plyr` key will be available and also passed in the to your callback (in the `plyr` key of the event object).
|
||||
|
||||
The other method is using the return value from the call to `setup()`. An array of instances is returned so you need to use an index:
|
||||
|
||||
```javascript
|
||||
var player = plyr.setup('.js-player')[0];
|
||||
var player = plyr.setup('.js-player')[0].plyr;
|
||||
```
|
||||
|
||||
This will return an array of plyr instances setup, so you need to specify the index of the instance you want. This is less useful if you are setting up multiple instances. You can listen for the `setup` [event](#events) documented below which will return each instance one by one, as they are setup (in the `plyr` key of the event object).
|
||||
This will return an array of plyr instances that were setup, so you need to specify the index of the instance you want or loop through of course. This is less useful if you are setting up multiple instances.
|
||||
|
||||
Once you have your instance, you can use the API methods below on it. For example to pause it:
|
||||
|
||||
|
||||
146
src/js/plyr.js
146
src/js/plyr.js
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.7.0
|
||||
// plyr.js v1.8.0
|
||||
// https://github.com/selz/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -44,7 +44,7 @@
|
||||
displayDuration: true,
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/1.7.0/plyr.svg',
|
||||
iconUrl: 'https://cdn.plyr.io/1.8.0/plyr.svg',
|
||||
clickToPlay: true,
|
||||
hideControls: true,
|
||||
showPosterOnEnd: false,
|
||||
@ -175,51 +175,56 @@
|
||||
// Credits: http://paypal.github.io/accessible-html5-video-player/
|
||||
// Unfortunately, due to mixed support, UA sniffing is required
|
||||
function _browserSniff() {
|
||||
var nAgt = navigator.userAgent,
|
||||
var ua = navigator.userAgent,
|
||||
name = navigator.appName,
|
||||
fullVersion = '' + parseFloat(navigator.appVersion),
|
||||
majorVersion = parseInt(navigator.appVersion, 10),
|
||||
nameOffset,
|
||||
verOffset,
|
||||
ix;
|
||||
ix,
|
||||
isIE = false,
|
||||
isFirefox = false,
|
||||
isChrome = false,
|
||||
isSafari = false;
|
||||
|
||||
// MSIE 11
|
||||
if ((navigator.appVersion.indexOf('Windows NT') !== -1) && (navigator.appVersion.indexOf('rv:11') !== -1)) {
|
||||
name = 'IE';
|
||||
isIE = true;
|
||||
fullVersion = '11;';
|
||||
}
|
||||
// MSIE
|
||||
else if ((verOffset=nAgt.indexOf('MSIE')) !== -1) {
|
||||
name = 'IE';
|
||||
fullVersion = nAgt.substring(verOffset + 5);
|
||||
else if ((verOffset = ua.indexOf('MSIE')) !== -1) {
|
||||
isIE = true;
|
||||
fullVersion = ua.substring(verOffset + 5);
|
||||
}
|
||||
// Chrome
|
||||
else if ((verOffset=nAgt.indexOf('Chrome')) !== -1) {
|
||||
name = 'Chrome';
|
||||
fullVersion = nAgt.substring(verOffset + 7);
|
||||
else if ((verOffset = ua.indexOf('Chrome')) !== -1) {
|
||||
isChrome = true;
|
||||
fullVersion = ua.substring(verOffset + 7);
|
||||
}
|
||||
// Safari
|
||||
else if ((verOffset=nAgt.indexOf('Safari')) !== -1) {
|
||||
name = 'Safari';
|
||||
fullVersion = nAgt.substring(verOffset + 7);
|
||||
if ((verOffset = nAgt.indexOf('Version')) !== -1) {
|
||||
fullVersion = nAgt.substring(verOffset + 8);
|
||||
else if ((verOffset = ua.indexOf('Safari')) !== -1) {
|
||||
isSafari = true;
|
||||
fullVersion = ua.substring(verOffset + 7);
|
||||
if ((verOffset = ua.indexOf('Version')) !== -1) {
|
||||
fullVersion = ua.substring(verOffset + 8);
|
||||
}
|
||||
}
|
||||
// Firefox
|
||||
else if ((verOffset=nAgt.indexOf('Firefox')) !== -1) {
|
||||
name = 'Firefox';
|
||||
fullVersion = nAgt.substring(verOffset + 8);
|
||||
else if ((verOffset = ua.indexOf('Firefox')) !== -1) {
|
||||
isFirefox = true;
|
||||
fullVersion = ua.substring(verOffset + 8);
|
||||
}
|
||||
// In most other browsers, 'name/version' is at the end of userAgent
|
||||
else if ((nameOffset=nAgt.lastIndexOf(' ') + 1) < (verOffset=nAgt.lastIndexOf('/'))) {
|
||||
name = nAgt.substring(nameOffset,verOffset);
|
||||
fullVersion = nAgt.substring(verOffset + 1);
|
||||
else if ((nameOffset = ua.lastIndexOf(' ') + 1) < (verOffset = ua.lastIndexOf('/'))) {
|
||||
name = ua.substring(nameOffset,verOffset);
|
||||
fullVersion = ua.substring(verOffset + 1);
|
||||
|
||||
if (name.toLowerCase() == name.toUpperCase()) {
|
||||
name = navigator.appName;
|
||||
}
|
||||
}
|
||||
|
||||
// Trim the fullVersion string at semicolon/space if present
|
||||
if ((ix = fullVersion.indexOf(';')) !== -1) {
|
||||
fullVersion = fullVersion.substring(0, ix);
|
||||
@ -227,6 +232,7 @@
|
||||
if ((ix = fullVersion.indexOf(' ')) !== -1) {
|
||||
fullVersion = fullVersion.substring(0, ix);
|
||||
}
|
||||
|
||||
// Get major version
|
||||
majorVersion = parseInt('' + fullVersion, 10);
|
||||
if (isNaN(majorVersion)) {
|
||||
@ -238,6 +244,10 @@
|
||||
return {
|
||||
name: name,
|
||||
version: majorVersion,
|
||||
isIE: isIE,
|
||||
isFirefox: isFirefox,
|
||||
isChrome: isChrome,
|
||||
isSafari: isSafari,
|
||||
ios: /(iPad|iPhone|iPod)/g.test(navigator.platform),
|
||||
touch: 'ontouchstart' in document.documentElement
|
||||
};
|
||||
@ -924,8 +934,8 @@
|
||||
|
||||
// Disable unsupported browsers than report false positive
|
||||
// Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1033144
|
||||
if ((plyr.browser.name === 'IE' && plyr.browser.version >= 10) ||
|
||||
(plyr.browser.name === 'Firefox' && plyr.browser.version >= 31)) {
|
||||
if ((plyr.browser.isIE && plyr.browser.version >= 10) ||
|
||||
(plyr.browser.isFirefox && plyr.browser.version >= 31)) {
|
||||
|
||||
// Debugging
|
||||
_log('Detected browser with known TextTrack issues - using manual fallback');
|
||||
@ -1191,15 +1201,16 @@
|
||||
function _injectControls() {
|
||||
// Sprite
|
||||
if (config.loadSprite) {
|
||||
var iconUrl = _getIconUrl();
|
||||
var iconUrl = _getIconUrl(),
|
||||
isExternal = iconUrl.external;
|
||||
|
||||
// Only load external sprite using AJAX
|
||||
if (iconUrl.external) {
|
||||
_log('Loading external SVG sprite');
|
||||
if (isExternal || plyr.browser.isIE) {
|
||||
_log('AJAX loading external SVG sprite' + (plyr.browser.isIE ? ' (due to IE)' : ''));
|
||||
loadSprite(iconUrl.url, "sprite-plyr");
|
||||
}
|
||||
else {
|
||||
_log('Sprite will be used inline');
|
||||
_log('Sprite will be used as external resource directly');
|
||||
}
|
||||
}
|
||||
|
||||
@ -2715,7 +2726,7 @@
|
||||
// Listen for control events
|
||||
function _controlListeners() {
|
||||
// IE doesn't support input event, so we fallback to change
|
||||
var inputEvent = (plyr.browser.name == 'IE' ? 'change' : 'input');
|
||||
var inputEvent = (plyr.browser.isIE ? 'change' : 'input');
|
||||
|
||||
// Click play/pause helper
|
||||
function _togglePlay() {
|
||||
@ -3262,7 +3273,7 @@
|
||||
// Check for support
|
||||
function supported(type) {
|
||||
var browser = _browserSniff(),
|
||||
oldIE = (browser.name === 'IE' && browser.version <= 9),
|
||||
oldIE = (browser.isIE && browser.version <= 9),
|
||||
iPhone = /iPhone|iPod/i.test(navigator.userAgent),
|
||||
audio = !!document.createElement('audio').canPlayType,
|
||||
video = !!document.createElement('video').canPlayType,
|
||||
@ -3298,55 +3309,82 @@
|
||||
}
|
||||
|
||||
// Setup function
|
||||
function setup(elements, options) {
|
||||
function setup(targets, options) {
|
||||
// Get the players
|
||||
var instances = [],
|
||||
var elements = [],
|
||||
containers = [],
|
||||
selector = [defaults.selectors.html5, defaults.selectors.embed].join(',');
|
||||
|
||||
// Select the elements
|
||||
// Assume elements is a NodeList by default
|
||||
if (typeof elements === 'string') {
|
||||
elements = document.querySelectorAll(elements);
|
||||
if (typeof targets === 'string') {
|
||||
targets = document.querySelectorAll(targets);
|
||||
}
|
||||
// Single HTMLElement passed
|
||||
else if (elements instanceof HTMLElement) {
|
||||
elements = [elements];
|
||||
else if (targets instanceof HTMLElement) {
|
||||
targets = [targets];
|
||||
}
|
||||
// No selector passed, possibly options as first argument
|
||||
else if (!(elements instanceof NodeList) && typeof elements !== 'string') {
|
||||
else if (!(targets instanceof NodeList) && typeof targets !== 'string') {
|
||||
// If options are the first argument
|
||||
if (typeof options === 'undefined' && typeof elements === 'object') {
|
||||
options = elements;
|
||||
if (typeof options === 'undefined' && typeof targets === 'object') {
|
||||
options = targets;
|
||||
}
|
||||
|
||||
// Use default selector
|
||||
elements = document.querySelectorAll(selector);
|
||||
targets = document.querySelectorAll(selector);
|
||||
}
|
||||
|
||||
// Bail if disabled or no basic support
|
||||
// You may want to disable certain UAs etc
|
||||
if (!supported().basic || !elements.length) {
|
||||
if (!supported().basic || !targets.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Convert NodeList to array
|
||||
if (targets instanceof NodeList) {
|
||||
targets = Array.prototype.slice.call(targets);
|
||||
}
|
||||
|
||||
// Check if the targets have multiple media elements
|
||||
for (var i = 0; i < targets.length; i++) {
|
||||
var target = targets[i];
|
||||
|
||||
// Get children
|
||||
var children = target.querySelectorAll(selector);
|
||||
|
||||
// If there's more than one media element, wrap them
|
||||
if (children.length > 1) {
|
||||
for (var x = 0; x < children.length; x++) {
|
||||
containers.push({
|
||||
element: _wrap(children[x], document.createElement('div')),
|
||||
original: target
|
||||
});
|
||||
}
|
||||
}
|
||||
else {
|
||||
containers.push({
|
||||
element: target
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Create a player instance for each element
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
// Get the current element
|
||||
var element = elements[i];
|
||||
for (var key in containers) {
|
||||
var element = containers[key].element,
|
||||
original = containers[key].original || element;
|
||||
|
||||
// Custom settings passed as data attribute
|
||||
var settings = element.getAttribute("data-plyr");
|
||||
|
||||
// Wrap each media element if needed
|
||||
// Wrap each media element if is target is media element
|
||||
// as opposed to a wrapper
|
||||
if (_matches(element, selector)) {
|
||||
// Wrap in a <div>
|
||||
element = _wrap(element, document.createElement('div'));
|
||||
}
|
||||
|
||||
// Setup a player instance and add to the element
|
||||
if (typeof element.plyr === 'undefined') {
|
||||
if (!('plyr' in element)) {
|
||||
// Create instance-specific config
|
||||
var config = _extend({}, defaults, options, JSON.parse(settings));
|
||||
var config = _extend({}, defaults, options, JSON.parse(original.getAttribute('data-plyr')));
|
||||
|
||||
// Bail if not enabled
|
||||
if (!config.enabled) {
|
||||
@ -3360,14 +3398,16 @@
|
||||
element.plyr = (Object.keys(instance).length ? instance : false);
|
||||
|
||||
// Callback
|
||||
_triggerEvent(element, 'setup', { plyr: element.plyr });
|
||||
_triggerEvent(original, 'setup', {
|
||||
plyr: element.plyr
|
||||
});
|
||||
}
|
||||
|
||||
// Add to return array even if it's already setup
|
||||
instances.push(element.plyr);
|
||||
elements.push(element);
|
||||
}
|
||||
|
||||
return instances;
|
||||
return elements;
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user