Docs, restored loadSprite and supported static methods
This commit is contained in:
Sam Potts
parent
98ac98b4c2
commit
965fc0b2f5
69
changelog.md
69
changelog.md
@ -1,4 +1,71 @@
|
||||
# Changelog
|
||||
# v3.0.0
|
||||
|
||||
This is a massive release. A _mostly_ complete rewrite in ES6. What started out as a few changes quickly snowballed. There's many breaking changes so be careful upgrading.
|
||||
|
||||
### Big changes
|
||||
|
||||
* New settings menu complete with funky animations
|
||||
* Ability to adjust speed of playback
|
||||
* Ability to toggle caption language (HTML5 and Vimeo only)
|
||||
* Ability to set YouTube quality (HTML5 will follow)
|
||||
* Added support for Vimeo captions
|
||||
* Added Picture-in-Picture support (Safari only)
|
||||
* Added AirPlay support (again, Safari only)
|
||||
* Added `playsinline` support for iOS 10+
|
||||
* Soundcloud removed until I can work on a plugin framework
|
||||
|
||||
### Other stuff
|
||||
|
||||
* Now using SASS exclusively. Sorry, LESS folk it just made sense to maintain one method as SASS is what the cool kids use
|
||||
* Moved to ES6. All the rage these days
|
||||
* Added basic looping support
|
||||
* Added an aspect ratio option for those that can't leave the 90s and want 4:3
|
||||
* `controlshidden` and `controlsshown` events added for when the controls show or hide
|
||||
* `qualityrequested` and `qualitychange` events for YouTube quality control (HTML5 will follow)
|
||||
* Volume is now `0` to `1` as per HTML5 spec
|
||||
* No longer bodging a `<progress>` behind the `<input type="range">` to make up for WebKit's lack of lower fill styling
|
||||
* Captions now render with line breaks as intended
|
||||
* Captions now render without AJAX using the native events etc
|
||||
* Added a fallback for getting YouTube video data incase `.getVideoData()` disappears when one of their developers randomly deletes it again
|
||||
* Setup and building of the UI should be way "snappier"
|
||||
* Click to toggle inverted time (e.g. 0:01 or -2:59 for a 3 minute video at 1 seconds) - new `toggleInvert` and `invertTime` options
|
||||
* Added `autopause` option for Vimeo
|
||||
* Added `muted` option for you guessed it, muted playback
|
||||
* Restored the `.off()` API method
|
||||
* `.play()` will now return a promise to prevent that pesky uncaught promise issue in Chrome etc
|
||||
* Pressing and hold the seek bar no longer freezes all other updates of the UI
|
||||
|
||||
...plus loads of bug fixes.
|
||||
|
||||
### Breaking changes
|
||||
|
||||
You gotta break eggs to make an omelette. Sadly, there's quite a few breaking changes:
|
||||
|
||||
* Setup now uses proper constructor, accepts a single selector/element/node and returns a single instance - much simpler than before
|
||||
* Much of the API is now using getters and setters rather than methods (where it makes sense) to match the HTML5 API - see the docs for more info
|
||||
* `blankUrl` -> `blankVideo`
|
||||
* `volume` is now `0` to `1` as per HTML5 spec
|
||||
* `keyboardShorcuts` (typo) is now just `keyboard`
|
||||
* `loop` is now `loop.active` in preparation for loop enhancements later
|
||||
* `html` option for custom controls removed in favour of the `controls` option which now accepts an array (to use built in controls) or a string of HTML for custom controls.
|
||||
* `classes` -> `classNames`
|
||||
* `classes.videoWrapper` -> `classNames.video`
|
||||
* `classes.embedWrapper` -> `classNames.embed`
|
||||
* `classes.ready` removed
|
||||
* `classes.setup` removed
|
||||
* `classes.muted` removed
|
||||
* `classes.fullscreen.active` removed in favour of the `:fullscreen` selector
|
||||
* `selectors.html5` removed
|
||||
* `selectors.embed` removed
|
||||
* `selectors.buttons.seek` -> `selectors.inputs.seek`
|
||||
* `selectors.volume.input` -> `selectors.inputs.volume`
|
||||
* `selectors.volume.display` -> `selectors.display.volume`
|
||||
* `selectors.currentTime` -> `selectors.display.currentTime`
|
||||
* `selectors.duration` -> `selectors.display.duration`
|
||||
|
||||
### Polyfilling
|
||||
|
||||
Because we're using the fancy new ES6 syntax, you will need to polyfill for vintage browsers if you want to use Plyr and still support them. Luckily there's a decent service for this that makes it painless, [https://polyfill.io](polyfill.io).
|
||||
|
||||
## v2.0.12
|
||||
|
||||
|
||||
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
@ -1,3 +1,3 @@
|
||||
document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,o){if(t in a&&(o||t!==n)&&(n.length||t!==a.video)){switch(t){case a.video:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case a.audio:i.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case a.youtube:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case a.vimeo:i.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}n=t,Array.from(r).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}window.shr&&window.shr.setup({count:{classname:"button__count"}});var o="tab-focus";document.addEventListener("focusout",function(e){e.target.classList.remove(o)}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add(o)},0)});var i=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=i;var r=document.querySelectorAll("[data-source]"),a={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=window.location.hash.replace("#",""),s=window.history&&window.history.pushState;if(Array.from(r).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),s&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),s){var c=!n.length;c&&(n=a.video),n in a&&window.history.replaceState({type:n},"",c?"":"#"+n),n!==a.video&&t(n,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
|
||||
document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,n){if(t in r&&(n||t!==a)&&(a.length||t!==r.video)){switch(t){case r.video:o.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case r.audio:o.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case r.youtube:o.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case r.vimeo:o.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}a=t,Array.from(i).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var o=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=o;var i=document.querySelectorAll("[data-source]"),r={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},a=window.location.hash.replace("#",""),n=window.history&&window.history.pushState;if(Array.from(i).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),n&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),n){var s=!a.length;s&&(a=r.video),a in r&&window.history.replaceState({type:a},"",s?"":"#"+a),a!==r.video&&t(a,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
|
||||
|
||||
//# sourceMappingURL=demo.js.map
|
||||
|
||||
2
demo/dist/demo.js.map
vendored
2
demo/dist/demo.js.map
vendored
File diff suppressed because one or more lines are too long
@ -48,7 +48,19 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
captions: {
|
||||
active: true,
|
||||
},
|
||||
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'],
|
||||
controls: [
|
||||
'play-large',
|
||||
'play',
|
||||
'progress',
|
||||
'current-time',
|
||||
'mute',
|
||||
'volume',
|
||||
'captions',
|
||||
'settings',
|
||||
'fullscreen',
|
||||
'pip',
|
||||
'airplay',
|
||||
],
|
||||
keys: {
|
||||
google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
|
||||
},
|
||||
@ -87,12 +99,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
player.source = {
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [
|
||||
{
|
||||
sources: [{
|
||||
src: 'media/View_From_A_Blue_Moon_Trailer-HD.mp4',
|
||||
type: 'video/mp4',
|
||||
},
|
||||
],
|
||||
}],
|
||||
poster: 'media/View_From_A_Blue_Moon_Trailer-HD.jpg',
|
||||
tracks: [
|
||||
{
|
||||
@ -135,12 +145,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
player.source = {
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [
|
||||
{
|
||||
sources: [{
|
||||
src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
|
||||
provider: 'youtube',
|
||||
},
|
||||
],
|
||||
}],
|
||||
};
|
||||
|
||||
break;
|
||||
@ -148,12 +156,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
case types.vimeo:
|
||||
player.source = {
|
||||
type: 'video',
|
||||
sources: [
|
||||
{
|
||||
sources: [{
|
||||
src: 'https://vimeo.com/76979871',
|
||||
provider: 'vimeo',
|
||||
},
|
||||
],
|
||||
}],
|
||||
};
|
||||
|
||||
break;
|
||||
|
||||
2
dist/plyr.js
vendored
2
dist/plyr.js
vendored
File diff suppressed because one or more lines are too long
2
dist/plyr.js.map
vendored
2
dist/plyr.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,8 +1,8 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "2.0.13",
|
||||
"version": "3.0.0-alpha.1",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"homepage": "https://plyr.io",
|
||||
"main": "./dist",
|
||||
"sass": "./src/sass/plyr.scss",
|
||||
"style": "./dist/plyr.css",
|
||||
|
||||
18
readme.md
18
readme.md
@ -73,7 +73,7 @@ Plyr extends upon the standard HTML5 markup so that's all you need for those typ
|
||||
#### HTML5 Video
|
||||
|
||||
```html
|
||||
<video poster="/path/to/poster.jpg" id="player" controls>
|
||||
<video poster="/path/to/poster.jpg" id="player" playsinline controls>
|
||||
<source src="/path/to/video.mp4" type="video/mp4">
|
||||
<source src="/path/to/video.webm" type="video/webm">
|
||||
|
||||
@ -586,6 +586,22 @@ Plyr supports the last 2 versions of most _modern_ browsers. IE11 is also suppor
|
||||
2. Native player used (no support for `<progress>` or `<input type="range">`) but the API is supported (v1.0.28+)
|
||||
3. IE10 has no native fullscreen support, fallback can be used (see [options](#options))
|
||||
|
||||
### Checking for support
|
||||
|
||||
You can use the static method to check for support. For example
|
||||
|
||||
```javascript
|
||||
const supported = Plyr.supported('video', 'html5', true);
|
||||
```
|
||||
|
||||
The arguments are:
|
||||
|
||||
* Media type (`audio` or `video`)
|
||||
* Provider (`html5`, `youtube` or `vimeo`)
|
||||
* Whether the player has the `playsinline` attribute (only applicable to iOS 10+)
|
||||
|
||||
### Disable support programatically
|
||||
|
||||
The `enabled` option can be used to disable certain User Agents. For example, if you don't want to use Plyr for smartphones, you could use:
|
||||
|
||||
```javascript
|
||||
|
||||
@ -143,7 +143,6 @@ const defaults = {
|
||||
'captions',
|
||||
'quality',
|
||||
'speed',
|
||||
'loop',
|
||||
],
|
||||
|
||||
// Localisation
|
||||
|
||||
@ -1025,13 +1025,7 @@ class Plyr {
|
||||
utils.off(this.elements.container, event, callback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check for support for a mime type (HTML5 only)
|
||||
* @param {string} type - Mime type
|
||||
*/
|
||||
supports(type) {
|
||||
return support.mime.call(this, type);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Destroy an instance
|
||||
@ -1133,6 +1127,33 @@ class Plyr {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Check for support for a mime type (HTML5 only)
|
||||
* @param {string} type - Mime type
|
||||
*/
|
||||
supports(type) {
|
||||
return support.mime.call(this, type);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check for support
|
||||
* @param {string} type - Player type (audio/video)
|
||||
* @param {string} provider - Provider (html5/youtube/vimeo)
|
||||
* @param {bool} inline - Where player has `playsinline` sttribute
|
||||
*/
|
||||
static supported(type, provider, inline) {
|
||||
return support.check(type, provider, inline);
|
||||
}
|
||||
|
||||
/**
|
||||
* Load an SVG sprite into the page
|
||||
* @param {string} url - URL for the SVG sprite
|
||||
* @param {string} [id] - Unique ID
|
||||
*/
|
||||
static loadSprite(url, id) {
|
||||
return utils.loadSprite(url, id);
|
||||
}
|
||||
}
|
||||
|
||||
export default Plyr;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user