Changed icon prefix default to avoid clashes
@ -1,5 +1,8 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## v1.6.10
|
||||||
|
- Changed default icon prefix from 'icon' to 'plyr' to avoid clashes
|
||||||
|
|
||||||
## v1.6.9
|
## v1.6.9
|
||||||
- Added 'latest' CDN option
|
- Added 'latest' CDN option
|
||||||
- Renamed `sprite.svg` to `plyr.svg` to be inline with the other package files
|
- Renamed `sprite.svg` to `plyr.svg` to be inline with the other package files
|
||||||
|
22
controls.md
@ -47,23 +47,23 @@ This is an example `html` option with all controls.
|
|||||||
```javascript
|
```javascript
|
||||||
var controls = ["<div class='plyr__controls'>",
|
var controls = ["<div class='plyr__controls'>",
|
||||||
"<button type='button' data-plyr='restart'>",
|
"<button type='button' data-plyr='restart'>",
|
||||||
"<svg><use xlink:href='#icon-restart'></use></svg>",
|
"<svg><use xlink:href='#plyr-restart'></use></svg>",
|
||||||
"<span class='plyr__sr-only'>Restart</span>",
|
"<span class='plyr__sr-only'>Restart</span>",
|
||||||
"</button>",
|
"</button>",
|
||||||
"<button type='button' data-plyr='rewind'>",
|
"<button type='button' data-plyr='rewind'>",
|
||||||
"<svg><use xlink:href='#icon-rewind'></use></svg>",
|
"<svg><use xlink:href='#plyr-rewind'></use></svg>",
|
||||||
"<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
|
"<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
|
||||||
"</button>",
|
"</button>",
|
||||||
"<button type='button' data-plyr='play'>",
|
"<button type='button' data-plyr='play'>",
|
||||||
"<svg><use xlink:href='#icon-play'></use></svg>",
|
"<svg><use xlink:href='#plyr-play'></use></svg>",
|
||||||
"<span class='plyr__sr-only'>Play</span>",
|
"<span class='plyr__sr-only'>Play</span>",
|
||||||
"</button>",
|
"</button>",
|
||||||
"<button type='button' data-plyr='pause'>",
|
"<button type='button' data-plyr='pause'>",
|
||||||
"<svg><use xlink:href='#icon-pause'></use></svg>",
|
"<svg><use xlink:href='#plyr-pause'></use></svg>",
|
||||||
"<span class='plyr__sr-only'>Pause</span>",
|
"<span class='plyr__sr-only'>Pause</span>",
|
||||||
"</button>",
|
"</button>",
|
||||||
"<button type='button' data-plyr='fast-forward'>",
|
"<button type='button' data-plyr='fast-forward'>",
|
||||||
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
|
"<svg><use xlink:href='#plyr-fast-forward'></use></svg>",
|
||||||
"<span class='plyr__sr-only'>Forward {seektime} secs</span>",
|
"<span class='plyr__sr-only'>Forward {seektime} secs</span>",
|
||||||
"</button>",
|
"</button>",
|
||||||
"<span class='plyr__progress'>",
|
"<span class='plyr__progress'>",
|
||||||
@ -84,8 +84,8 @@ var controls = ["<div class='plyr__controls'>",
|
|||||||
"<span class='plyr__time--duration'>00:00</span>",
|
"<span class='plyr__time--duration'>00:00</span>",
|
||||||
"</span>",
|
"</span>",
|
||||||
"<button type='button' data-plyr='mute'>",
|
"<button type='button' data-plyr='mute'>",
|
||||||
"<svg class='icon--muted'><use xlink:href='#icon-muted'></use></svg>",
|
"<svg class='icon--muted'><use xlink:href='#plyr-muted'></use></svg>",
|
||||||
"<svg><use xlink:href='#icon-volume'></use></svg>",
|
"<svg><use xlink:href='#plyr-volume'></use></svg>",
|
||||||
"<span class='plyr__sr-only'>Toggle Mute</span>",
|
"<span class='plyr__sr-only'>Toggle Mute</span>",
|
||||||
"</button>",
|
"</button>",
|
||||||
"<span class='plyr__volume'>",
|
"<span class='plyr__volume'>",
|
||||||
@ -94,13 +94,13 @@ var controls = ["<div class='plyr__controls'>",
|
|||||||
"<progress class='plyr__volume--display' max='10' value='0' role='presentation'></progress>",
|
"<progress class='plyr__volume--display' max='10' value='0' role='presentation'></progress>",
|
||||||
"</span>",
|
"</span>",
|
||||||
"<button type='button' data-plyr='captions'>",
|
"<button type='button' data-plyr='captions'>",
|
||||||
"<svg class='icon--captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
|
"<svg class='icon--captions-on'><use xlink:href='#plyr-captions-on'></use></svg>",
|
||||||
"<svg><use xlink:href='#icon-captions-off'></use></svg>",
|
"<svg><use xlink:href='#plyr-captions-off'></use></svg>",
|
||||||
"<span class='plyr__sr-only'>Toggle Captions</span>",
|
"<span class='plyr__sr-only'>Toggle Captions</span>",
|
||||||
"</button>",
|
"</button>",
|
||||||
"<button type='button' data-plyr='fullscreen'>",
|
"<button type='button' data-plyr='fullscreen'>",
|
||||||
"<svg class='icon--exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
|
"<svg class='icon--exit-fullscreen'><use xlink:href='#plyr-exit-fullscreen'></use></svg>",
|
||||||
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
|
"<svg><use xlink:href='#plyr-enter-fullscreen'></use></svg>",
|
||||||
"<span class='plyr__sr-only'>Toggle Fullscreen</span>",
|
"<span class='plyr__sr-only'>Toggle Fullscreen</span>",
|
||||||
"</button>",
|
"</button>",
|
||||||
"</div>"].join("");
|
"</div>"].join("");
|
||||||
|
2
dist/plyr.js
vendored
2
dist/plyr.svg
vendored
@ -1 +1 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="icon-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="icon-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="icon-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="icon-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="icon-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="icon-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>
|
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="plyr-captions-off" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd" fill-opacity=".5"/></symbol><symbol id="plyr-captions-on" viewBox="0 0 18 18"><path d="M1 1c-.6 0-1 .4-1 1v11c0 .6.4 1 1 1h4.6l2.7 2.7c.2.2.4.3.7.3.3 0 .5-.1.7-.3l2.7-2.7H17c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1H1zm4.52 10.15c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41C8.47 4.96 7.46 3.76 5.5 3.76c-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69zm7.57 0c1.99 0 3.01-1.32 3.28-2.41l-1.29-.39c-.19.66-.78 1.45-1.99 1.45-1.14 0-2.2-.83-2.2-2.34 0-1.61 1.12-2.37 2.18-2.37 1.23 0 1.78.75 1.95 1.43l1.3-.41c-.28-1.15-1.29-2.35-3.25-2.35-1.9 0-3.61 1.44-3.61 3.7 0 2.26 1.65 3.69 3.63 3.69z" fill-rule="evenodd"/></symbol><symbol id="plyr-enter-fullscreen" viewBox="0 0 18 18"><path d="M10 3h3.6l-4 4L11 8.4l4-4V8h2V1h-7zM7 9.6l-4 4V10H1v7h7v-2H4.4l4-4z"/></symbol><symbol id="plyr-exit-fullscreen" viewBox="0 0 18 18"><path d="M1 12h3.6l-4 4L2 17.4l4-4V17h2v-7H1zM16 .6l-4 4V1h-2v7h7V6h-3.6l4-4z"/></symbol><symbol id="plyr-fast-forward" viewBox="0 0 18 18"><path d="M7.875 7.171L0 1v16l7.875-6.171V17L18 9 7.875 1z"/></symbol><symbol id="plyr-muted" viewBox="0 0 18 18"><path d="M12.4 12.5l2.1-2.1 2.1 2.1 1.4-1.4L15.9 9 18 6.9l-1.4-1.4-2.1 2.1-2.1-2.1L11 6.9 13.1 9 11 11.1zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol><symbol id="plyr-pause" viewBox="0 0 18 18"><path d="M6 1H3c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM12 1c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h3c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1h-3z"/></symbol><symbol id="plyr-play" viewBox="0 0 18 18"><path d="M15.562 8.1L3.87.225C3.052-.337 2 .225 2 1.125v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"/></symbol><symbol id="plyr-restart" viewBox="0 0 18 18"><path d="M9.7 1.2l.7 6.4 2.1-2.1c1.9 1.9 1.9 5.1 0 7-.9 1-2.2 1.5-3.5 1.5-1.3 0-2.6-.5-3.5-1.5-1.9-1.9-1.9-5.1 0-7 .6-.6 1.4-1.1 2.3-1.3l-.6-1.9C6 2.6 4.9 3.2 4 4.1 1.3 6.8 1.3 11.2 4 14c1.3 1.3 3.1 2 4.9 2 1.9 0 3.6-.7 4.9-2 2.7-2.7 2.7-7.1 0-9.9L16 1.9l-6.3-.7z"/></symbol><symbol id="plyr-rewind" viewBox="0 0 18 18"><path d="M10.125 1L0 9l10.125 8v-6.171L18 17V1l-7.875 6.171z"/></symbol><symbol id="plyr-volume" viewBox="0 0 18 18"><path d="M15.6 3.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4C15.4 5.9 16 7.4 16 9c0 1.6-.6 3.1-1.8 4.3-.4.4-.4 1 0 1.4.2.2.5.3.7.3.3 0 .5-.1.7-.3C17.1 13.2 18 11.2 18 9s-.9-4.2-2.4-5.7z"/><path d="M11.282 5.282a.909.909 0 0 0 0 1.316c.735.735.995 1.458.995 2.402 0 .936-.425 1.917-.995 2.487a.909.909 0 0 0 0 1.316c.145.145.636.262 1.018.156a.725.725 0 0 0 .298-.156C13.773 11.733 14.13 10.16 14.13 9c0-.17-.002-.34-.011-.51-.053-.992-.319-2.005-1.522-3.208a.909.909 0 0 0-1.316 0zM3.786 6.008H.714C.286 6.008 0 6.31 0 6.76v4.512c0 .452.286.752.714.752h3.072l4.071 3.858c.5.3 1.143 0 1.143-.602V2.752c0-.601-.643-.977-1.143-.601L3.786 6.008z"/></symbol></svg>
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
10
gulpfile.js
@ -235,7 +235,7 @@ options = {
|
|||||||
return {
|
return {
|
||||||
headers: {
|
headers: {
|
||||||
// http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
|
// http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
|
||||||
"X-Amz-Website-Redirect-Location": "/" + version + "/" + filename,
|
"x-amz-website-redirect-location": "/" + version + "/" + filename,
|
||||||
"Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
|
"Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -247,8 +247,8 @@ 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\\-]+)*)?",
|
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.bucket + "\/" + regex, "gi"),
|
||||||
semver = new RegExp("v" + regex, "gi"),
|
semver = new RegExp("v" + regex, "gi"),
|
||||||
localpath = new RegExp("(\.\.\/)?dist", "gi"),
|
localPath = new RegExp("(\.\.\/)?dist", "gi"),
|
||||||
latest = "https://" + aws.cdn.bucket + "/latest";
|
versionPath = "https://" + aws.cdn.bucket + "/" + version;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Publish version to CDN bucket
|
// Publish version to CDN bucket
|
||||||
@ -284,12 +284,12 @@ gulp.task("docs", function () {
|
|||||||
// Replace local file paths with remote paths in docs
|
// Replace local file paths with remote paths in docs
|
||||||
// e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
|
// e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
|
||||||
gulp.src([paths.docs.root + "*.html"])
|
gulp.src([paths.docs.root + "*.html"])
|
||||||
.pipe(replace(localpath, latest))
|
.pipe(replace(localPath, versionPath))
|
||||||
.pipe(s3(aws.docs, options.docs));
|
.pipe(s3(aws.docs, options.docs));
|
||||||
|
|
||||||
// Upload error.html to cdn (as well as docs site)
|
// Upload error.html to cdn (as well as docs site)
|
||||||
return gulp.src([paths.docs.root + "error.html"])
|
return gulp.src([paths.docs.root + "error.html"])
|
||||||
.pipe(replace(localpath, latest))
|
.pipe(replace(localPath, versionPath))
|
||||||
.pipe(s3(aws.cdn, options.docs));
|
.pipe(s3(aws.cdn, options.docs));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "1.6.9",
|
"version": "1.6.10",
|
||||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||||
"homepage": "http://plyr.io",
|
"homepage": "http://plyr.io",
|
||||||
"main": "src/js/plyr.js",
|
"main": "src/js/plyr.js",
|
||||||
|
17
readme.md
@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
|||||||
## Implementation
|
## Implementation
|
||||||
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
|
||||||
|
|
||||||
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.9/plyr.js` to `https://cdn.plyr.io/1.6.9/plyr.js`
|
**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.6.10/plyr.js` to `https://cdn.plyr.io/1.6.10/plyr.js`
|
||||||
|
|
||||||
### Node Package Manager (NPM)
|
### Node Package Manager (NPM)
|
||||||
|
|
||||||
@ -71,11 +71,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
|
|||||||
If you want to use our CDN, you can use the following:
|
If you want to use our CDN, you can use the following:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.9/plyr.css">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.10/plyr.css">
|
||||||
<script src="https://cdn.plyr.io/1.6.9/plyr.js"></script>
|
<script src="https://cdn.plyr.io/1.6.10/plyr.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.9/plyr.svg`.
|
The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.10/plyr.svg`.
|
||||||
|
|
||||||
### CSS & Styling
|
### CSS & Styling
|
||||||
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.scss` file included in `/src` in your build to save a request.
|
If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.scss` file included in `/src` in your build to save a request.
|
||||||
@ -113,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
|
|||||||
c.innerHTML = a.responseText;
|
c.innerHTML = a.responseText;
|
||||||
b.insertBefore(c, b.childNodes[0]);
|
b.insertBefore(c, b.childNodes[0]);
|
||||||
};
|
};
|
||||||
})(document, 'https://cdn.plyr.io/1.6.9/plyr.svg');
|
})(document, 'https://cdn.plyr.io/1.6.10/plyr.svg');
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -188,7 +188,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
|
|||||||
Here's an example of a default setup:
|
Here's an example of a default setup:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.plyr.io/1.6.9/plyr.js"></script>
|
<script src="https://cdn.plyr.io/1.6.10/plyr.js"></script>
|
||||||
<script>plyr.setup();</script>
|
<script>plyr.setup();</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -260,8 +260,8 @@ Options must be passed as an object to the `setup()` method as above or as JSON
|
|||||||
<tr>
|
<tr>
|
||||||
<td><code>iconPrefix</code></td>
|
<td><code>iconPrefix</code></td>
|
||||||
<td>String</td>
|
<td>String</td>
|
||||||
<td><code>icon</code></td>
|
<td><code>plyr</code></td>
|
||||||
<td>Specify the id prefix for the icons used in the default controls (e.g. "icon-play" would be "icon"). This is to prevent clashes if you're using your own SVG defs file but with the default controls. Most people can ignore this option.</td>
|
<td>Specify the id prefix for the icons used in the default controls (e.g. "plyr-play" would be "plyr"). This is to prevent clashes if you're using your own SVG defs file but with the default controls. Most people can ignore this option.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>iconUrl</code></td>
|
<td><code>iconUrl</code></td>
|
||||||
@ -873,6 +873,7 @@ If you find anything weird with Plyr, please let us know using the GitHub issues
|
|||||||
Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors)
|
Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me](http://sampotts.me) with help from the awesome [contributors](https://github.com/Selz/plyr/graphs/contributors)
|
||||||
|
|
||||||
## Mentions
|
## Mentions
|
||||||
|
- [ProductHunt](https://www.producthunt.com/tech/plyr)
|
||||||
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
|
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
|
||||||
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
|
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
|
||||||
- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
|
- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr
|
// Plyr
|
||||||
// plyr.js v1.6.9
|
// plyr.js v1.6.10
|
||||||
// https://github.com/selz/plyr
|
// https://github.com/selz/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
@ -38,7 +38,7 @@
|
|||||||
volume: 5,
|
volume: 5,
|
||||||
duration: null,
|
duration: null,
|
||||||
displayDuration: true,
|
displayDuration: true,
|
||||||
iconPrefix: 'icon',
|
iconPrefix: 'plyr',
|
||||||
iconUrl: '',
|
iconUrl: '',
|
||||||
clickToPlay: true,
|
clickToPlay: true,
|
||||||
hideControls: true,
|
hideControls: true,
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 401 B After Width: | Height: | Size: 401 B |
Before Width: | Height: | Size: 403 B After Width: | Height: | Size: 403 B |
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 325 B |
Before Width: | Height: | Size: 750 B After Width: | Height: | Size: 750 B |
Before Width: | Height: | Size: 503 B After Width: | Height: | Size: 503 B |
Before Width: | Height: | Size: 534 B After Width: | Height: | Size: 534 B |
Before Width: | Height: | Size: 570 B After Width: | Height: | Size: 570 B |
Before Width: | Height: | Size: 330 B After Width: | Height: | Size: 330 B |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |