Compare commits
11 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 99960c0dc5 | |||
| e8a8b08215 | |||
| a989e87a2d | |||
| 0bceeb4674 | |||
| 5a433f2fc8 | |||
| c86b824a04 | |||
| 21c2276359 | |||
| 602944ea4f | |||
| f4a9ffcec7 | |||
| d2e9c61fd7 | |||
| c8cd051a00 |
16
changelog.md
16
changelog.md
@ -1,5 +1,21 @@
|
||||
# Changelog
|
||||
|
||||
## v1.6.11
|
||||
- Fix for Vimeo fullscreen (fixes #214)
|
||||
|
||||
## v1.6.10
|
||||
- Changed default icon prefix from 'icon' to 'plyr' to avoid clashes
|
||||
|
||||
## v1.6.9
|
||||
- Added 'latest' CDN option
|
||||
- Renamed `sprite.svg` to `plyr.svg` to be inline with the other package files
|
||||
|
||||
## v1.6.8
|
||||
- Fix for bug introduced in v1.6.7
|
||||
|
||||
## v1.6.7
|
||||
- Fixes for using `source` API method on iOS
|
||||
|
||||
## v1.6.6
|
||||
- Icons cleaned up
|
||||
- IE11 button fix for tooltips (fixes #210)
|
||||
|
||||
22
controls.md
22
controls.md
@ -47,23 +47,23 @@ This is an example `html` option with all controls.
|
||||
```javascript
|
||||
var controls = ["<div class='plyr__controls'>",
|
||||
"<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>",
|
||||
"</button>",
|
||||
"<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>",
|
||||
"</button>",
|
||||
"<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>",
|
||||
"</button>",
|
||||
"<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>",
|
||||
"</button>",
|
||||
"<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>",
|
||||
"</button>",
|
||||
"<span class='plyr__progress'>",
|
||||
@ -84,8 +84,8 @@ var controls = ["<div class='plyr__controls'>",
|
||||
"<span class='plyr__time--duration'>00:00</span>",
|
||||
"</span>",
|
||||
"<button type='button' data-plyr='mute'>",
|
||||
"<svg class='icon--muted'><use xlink:href='#icon-muted'></use></svg>",
|
||||
"<svg><use xlink:href='#icon-volume'></use></svg>",
|
||||
"<svg class='icon--muted'><use xlink:href='#plyr-muted'></use></svg>",
|
||||
"<svg><use xlink:href='#plyr-volume'></use></svg>",
|
||||
"<span class='plyr__sr-only'>Toggle Mute</span>",
|
||||
"</button>",
|
||||
"<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>",
|
||||
"</span>",
|
||||
"<button type='button' data-plyr='captions'>",
|
||||
"<svg class='icon--captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
|
||||
"<svg><use xlink:href='#icon-captions-off'></use></svg>",
|
||||
"<svg class='icon--captions-on'><use xlink:href='#plyr-captions-on'></use></svg>",
|
||||
"<svg><use xlink:href='#plyr-captions-off'></use></svg>",
|
||||
"<span class='plyr__sr-only'>Toggle Captions</span>",
|
||||
"</button>",
|
||||
"<button type='button' data-plyr='fullscreen'>",
|
||||
"<svg class='icon--exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
|
||||
"<svg><use xlink:href='#icon-enter-fullscreen'></use></svg>",
|
||||
"<svg class='icon--exit-fullscreen'><use xlink:href='#plyr-exit-fullscreen'></use></svg>",
|
||||
"<svg><use xlink:href='#plyr-enter-fullscreen'></use></svg>",
|
||||
"<span class='plyr__sr-only'>Toggle Fullscreen</span>",
|
||||
"</button>",
|
||||
"</div>"].join("");
|
||||
|
||||
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
1
dist/plyr.svg
vendored
Normal file
1
dist/plyr.svg
vendored
Normal file
@ -0,0 +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="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>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
1
dist/sprite.svg
vendored
1
dist/sprite.svg
vendored
@ -1 +0,0 @@
|
||||
<?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="M3 7H1V2c0-.6.4-1 1-1h5v2H3v4zM17 7h-2V3h-4V1h5c.6 0 1 .4 1 1v5zM16 17h-5v-2h4v-4h2v5c0 .6-.4 1-1 1zM7 17H2c-.6 0-1-.4-1-1v-5h2v4h4v2z"/></symbol><symbol id="icon-exit-fullscreen" viewBox="0 0 18 18"><path d="M10.7 8.4L9.3 7 3 13.3V8.7H1v7c0 .6.4 1 1 1h7v-2H4.4l6.3-6.3z"/><path d="M16 16h-4v-2h3V3H4v3H2V2c0-.6.4-1 1-1h13c.6 0 1 .4 1 1v13c0 .6-.4 1-1 1z"/></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>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
@ -79,7 +79,7 @@
|
||||
<script>
|
||||
(function() {
|
||||
[
|
||||
'../dist/sprite.svg',
|
||||
'../dist/plyr.svg',
|
||||
'dist/docs.svg'
|
||||
]
|
||||
.forEach(function(u) {
|
||||
|
||||
91
gulpfile.js
91
gulpfile.js
@ -1,7 +1,7 @@
|
||||
// ==========================================================================
|
||||
// Gulp build script
|
||||
// ==========================================================================
|
||||
/*global require, __dirname*/
|
||||
/*global require, __dirname,Buffer*/
|
||||
/*jshint -W079 */
|
||||
|
||||
var fs = require("fs"),
|
||||
@ -19,10 +19,10 @@ var fs = require("fs"),
|
||||
svgmin = require("gulp-svgmin"),
|
||||
rename = require("gulp-rename"),
|
||||
s3 = require("gulp-s3"),
|
||||
gzip = require("gulp-gzip"),
|
||||
replace = require("gulp-replace"),
|
||||
open = require("gulp-open"),
|
||||
size = require("gulp-size");
|
||||
size = require("gulp-size"),
|
||||
through = require("through2");
|
||||
|
||||
var root = __dirname,
|
||||
paths = {
|
||||
@ -74,6 +74,29 @@ function loadJSON(path) {
|
||||
}
|
||||
}
|
||||
|
||||
// Create a file from a string
|
||||
// http://stackoverflow.com/questions/23230569/how-do-you-create-a-file-from-a-string-in-gulp
|
||||
function createFile(filename, string) {
|
||||
var src = require('stream').Readable({
|
||||
objectMode: true
|
||||
});
|
||||
src._read = function () {
|
||||
this.push(new gutil.File({
|
||||
cwd: "",
|
||||
base: "",
|
||||
path: filename,
|
||||
contents: new Buffer(string),
|
||||
// stats also required for some functions
|
||||
// https://nodejs.org/api/fs.html#fs_class_fs_stats
|
||||
stat: {
|
||||
size: string.length
|
||||
}
|
||||
}));
|
||||
this.push(null);
|
||||
}
|
||||
return src
|
||||
}
|
||||
|
||||
var build = {
|
||||
js: function (files, bundle) {
|
||||
for (var key in files) {
|
||||
@ -143,7 +166,7 @@ var build = {
|
||||
}]
|
||||
}))
|
||||
.pipe(svgstore())
|
||||
.pipe(rename({ basename: (bundle == "plyr" ? "sprite" : bundle) }))
|
||||
.pipe(rename({ basename: bundle }))
|
||||
.pipe(gulp.dest(paths[bundle].output));
|
||||
});
|
||||
}
|
||||
@ -200,15 +223,22 @@ options = {
|
||||
headers: {
|
||||
"Cache-Control": "max-age=" + maxAge,
|
||||
"Vary": "Accept-Encoding"
|
||||
},
|
||||
gzippedOnly: true
|
||||
}
|
||||
},
|
||||
docs: {
|
||||
headers: {
|
||||
"Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate, max-age=0",
|
||||
"Vary": "Accept-Encoding"
|
||||
}
|
||||
},
|
||||
gzippedOnly: true
|
||||
symlinks: function(version, filename) {
|
||||
return {
|
||||
headers: {
|
||||
// http://stackoverflow.com/questions/2272835/amazon-s3-object-redirect
|
||||
"x-amz-website-redirect-location": "/" + version + "/" + filename,
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate, max-age=0"
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -217,15 +247,16 @@ 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"),
|
||||
semver = new RegExp("v" + regex, "gi"),
|
||||
localpath = new RegExp("(\.\.\/)?dist", "gi");
|
||||
localPath = new RegExp("(\.\.\/)?dist", "gi"),
|
||||
versionPath = "https://" + aws.cdn.bucket + "/" + 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.bucket + "...");
|
||||
|
||||
// Upload to CDN
|
||||
gulp.src(paths.upload)
|
||||
return gulp.src(paths.upload)
|
||||
.pipe(size({
|
||||
showFiles: true,
|
||||
gzip: true
|
||||
@ -233,13 +264,12 @@ gulp.task("cdn", function () {
|
||||
.pipe(rename(function (path) {
|
||||
path.dirname = path.dirname.replace(".", version);
|
||||
}))
|
||||
.pipe(gzip())
|
||||
.pipe(s3(aws.cdn, options.cdn));
|
||||
});
|
||||
|
||||
// Publish to Docs bucket
|
||||
gulp.task("docs", function () {
|
||||
console.log("Uploading " + version + " docs to " + aws.docs.bucket);
|
||||
console.log("Uploading " + version + " docs to " + aws.docs.bucket + "...");
|
||||
|
||||
// Replace versioned files in readme.md
|
||||
gulp.src([root + "/readme.md"])
|
||||
@ -254,17 +284,38 @@ gulp.task("docs", function () {
|
||||
// Replace local file paths with remote paths in docs
|
||||
// e.g. "../dist/plyr.js" to "https://cdn.plyr.io/x.x.x/plyr.js"
|
||||
gulp.src([paths.docs.root + "*.html"])
|
||||
.pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version))
|
||||
.pipe(gzip())
|
||||
.pipe(replace(localPath, versionPath))
|
||||
.pipe(s3(aws.docs, options.docs));
|
||||
|
||||
// Upload error.html to cdn (as well as docs site)
|
||||
gulp.src([paths.docs.root + "error.html"])
|
||||
.pipe(replace(localpath, "https://" + aws.cdn.bucket + "/" + version))
|
||||
.pipe(gzip())
|
||||
return gulp.src([paths.docs.root + "error.html"])
|
||||
.pipe(replace(localPath, versionPath))
|
||||
.pipe(s3(aws.cdn, options.docs));
|
||||
});
|
||||
|
||||
// Open the docs site to check it's sweet
|
||||
gulp.task("symlinks", function () {
|
||||
console.log("Updating symlinks...");
|
||||
|
||||
return gulp.src(paths.upload)
|
||||
.pipe(through.obj(function (chunk, enc, callback) {
|
||||
if (chunk.stat.isFile()) {
|
||||
// Get the filename
|
||||
var filename = chunk.path.split("/").reverse()[0];
|
||||
|
||||
// Create the 0 byte redirect files to upload
|
||||
createFile(filename, "")
|
||||
.pipe(rename(function (path) {
|
||||
path.dirname = path.dirname.replace(".", "latest");
|
||||
}))
|
||||
// Upload to S3 with correct headers
|
||||
.pipe(s3(aws.cdn, options.symlinks(version, filename)));
|
||||
}
|
||||
|
||||
callback(null, chunk);
|
||||
}));
|
||||
});
|
||||
|
||||
// Open the docs site to check it's sweet
|
||||
gulp.task("open", function () {
|
||||
console.log("Opening " + aws.docs.bucket + "...");
|
||||
@ -272,7 +323,7 @@ gulp.task("open", function () {
|
||||
// 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...
|
||||
gulp.src([paths.docs.root + "index.html"])
|
||||
return gulp.src([paths.docs.root + "index.html"])
|
||||
.pipe(open("", {
|
||||
url: "http://" + aws.docs.bucket
|
||||
}));
|
||||
@ -280,5 +331,5 @@ gulp.task("open", function () {
|
||||
|
||||
// Do everything
|
||||
gulp.task("publish", function () {
|
||||
run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs");
|
||||
run(tasks.js, tasks.less, tasks.sprite, "cdn", "docs", "symlinks");
|
||||
});
|
||||
|
||||
10
package.json
10
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.6.6",
|
||||
"version": "1.6.11",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "src/js/plyr.js",
|
||||
@ -8,10 +8,9 @@
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-autoprefixer": "^3.1.0",
|
||||
"gulp-concat": "^2.3.3",
|
||||
"gulp-gzip": "^1.0.0",
|
||||
"gulp-less": "^3.0.5",
|
||||
"gulp-clean-css": "^2.0.6",
|
||||
"gulp-concat": "^2.3.3",
|
||||
"gulp-less": "^3.0.5",
|
||||
"gulp-open": "^2.0.0",
|
||||
"gulp-rename": "^1.2.0",
|
||||
"gulp-replace": "^0.5.3",
|
||||
@ -22,7 +21,8 @@
|
||||
"gulp-svgstore": "^5.0.5",
|
||||
"gulp-uglify": "^1.5.3",
|
||||
"gulp-util": "^3.0.7",
|
||||
"run-sequence": "^1.1.5"
|
||||
"run-sequence": "^1.1.5",
|
||||
"through2": "^2.0.1"
|
||||
},
|
||||
"keywords": [
|
||||
"HTML5 Video",
|
||||
|
||||
21
readme.md
21
readme.md
@ -3,7 +3,7 @@ A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
|
||||
|
||||
[Checkout the demo](https://plyr.io)
|
||||
|
||||
[](https://plyr.io)
|
||||
[](https://plyr.io)
|
||||
|
||||
## Why?
|
||||
We wanted a lightweight, accessible and customizable media player that supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.
|
||||
@ -40,7 +40,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
|
||||
## Implementation
|
||||
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.6/plyr.js` to `https://cdn.plyr.io/1.6.6/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.11/plyr.js` to `https://cdn.plyr.io/1.6.11/plyr.js`
|
||||
|
||||
### 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:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.6/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.6.6/plyr.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.6.11/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.6.11/plyr.js"></script>
|
||||
```
|
||||
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.6.6/sprite.svg`.
|
||||
The SVG sprite/defs file can be found here: `https://cdn.plyr.io/1.6.11/plyr.svg`.
|
||||
|
||||
### 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.
|
||||
@ -94,7 +94,7 @@ The SVG sprite for the controls icons can be loaded two ways:
|
||||
#### Using the `iconUrl` option
|
||||
This method requires the SVG sprite to be hosted on the *same domain* as your page hosting the player. Currently no browser supports cross origin SVG sprites due to XSS issues. Fingers crossed this will come soon though. An example value for this option would be:
|
||||
```
|
||||
/path/to/sprite.svg
|
||||
/path/to/plyr.svg
|
||||
```
|
||||
|
||||
#### Using AJAX
|
||||
@ -113,7 +113,7 @@ Using AJAX means you can load the sprite from a different origin. Avoiding the i
|
||||
c.innerHTML = a.responseText;
|
||||
b.insertBefore(c, b.childNodes[0]);
|
||||
};
|
||||
})(document, 'https://cdn.plyr.io/1.6.6/sprite.svg');
|
||||
})(document, 'https://cdn.plyr.io/1.6.11/plyr.svg');
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -188,7 +188,7 @@ Be sure to [validate your caption files](https://quuz.org/webvtt/)
|
||||
Here's an example of a default setup:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/1.6.6/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/1.6.11/plyr.js"></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>
|
||||
<td><code>iconPrefix</code></td>
|
||||
<td>String</td>
|
||||
<td><code>icon</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><code>plyr</code></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>
|
||||
<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)
|
||||
|
||||
## Mentions
|
||||
- [ProductHunt](https://www.producthunt.com/tech/plyr)
|
||||
- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
|
||||
- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
|
||||
- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.6.6
|
||||
// plyr.js v1.6.11
|
||||
// https://github.com/selz/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -38,7 +38,7 @@
|
||||
volume: 5,
|
||||
duration: null,
|
||||
displayDuration: true,
|
||||
iconPrefix: 'icon',
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: '',
|
||||
clickToPlay: true,
|
||||
hideControls: true,
|
||||
@ -2162,6 +2162,10 @@
|
||||
|
||||
// Update <progress> elements
|
||||
function _updateProgress(event) {
|
||||
if (!plyr.supported.full) {
|
||||
return;
|
||||
}
|
||||
|
||||
var progress = plyr.progress.played,
|
||||
value = 0,
|
||||
duration = _getDuration();
|
||||
@ -2209,9 +2213,18 @@
|
||||
|
||||
// Set <progress> value
|
||||
function _setProgress(progress, value) {
|
||||
if (!plyr.supported.full) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Default to 0
|
||||
if (typeof value === 'undefined') {
|
||||
value = 0;
|
||||
}
|
||||
// Default to buffer
|
||||
if (typeof progress === 'undefined') {
|
||||
progress = plyr.progress.buffer;
|
||||
}
|
||||
|
||||
// One progress element passed
|
||||
if (progress instanceof HTMLElement) {
|
||||
@ -2471,7 +2484,7 @@
|
||||
_updateSeekDisplay();
|
||||
|
||||
// Reset buffer progress
|
||||
_setProgress(plyr.progress.buffer);
|
||||
_setProgress();
|
||||
|
||||
// Cancel current network requests
|
||||
_cancelRequests();
|
||||
|
||||
@ -364,6 +364,7 @@
|
||||
|
||||
// Large play button (video only)
|
||||
.plyr__play-large {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -389,6 +390,9 @@
|
||||
outline: 1px dotted fade(@plyr-video-control-color, 50%);
|
||||
}
|
||||
}
|
||||
.plyr .plyr__play-large {
|
||||
display: inline-block;
|
||||
}
|
||||
.plyr--audio .plyr__play-large {
|
||||
display: none;
|
||||
}
|
||||
@ -481,7 +485,7 @@
|
||||
// <progress> element
|
||||
.plyr__progress {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: none;
|
||||
flex: 1;
|
||||
|
||||
input[type="range"] {
|
||||
@ -504,6 +508,9 @@
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.plyr .plyr__progress {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.plyr__progress--buffer,
|
||||
.plyr__progress--played,
|
||||
@ -636,8 +643,10 @@
|
||||
|
||||
// Volume
|
||||
// --------------------------------------------------------------
|
||||
.plyr .plyr__volume {
|
||||
.plyr__volume {
|
||||
display: none;
|
||||
}
|
||||
.plyr .plyr__volume {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
@ -690,4 +699,11 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Vimeo requires some different styling
|
||||
&.plyr--vimeo .plyr__video-wrapper {
|
||||
height: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -363,6 +363,7 @@
|
||||
|
||||
// Large play button (video only)
|
||||
.plyr__play-large {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -388,6 +389,9 @@
|
||||
outline: 1px dotted transparentize($plyr-video-control-color, .5);
|
||||
}
|
||||
}
|
||||
.plyr .plyr__play-large {
|
||||
display: inline-block;
|
||||
}
|
||||
.plyr--audio .plyr__play-large {
|
||||
display: none;
|
||||
}
|
||||
@ -479,8 +483,8 @@
|
||||
// --------------------------------------------------------------
|
||||
// <progress> element
|
||||
.plyr__progress {
|
||||
display: none;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
|
||||
input[type="range"] {
|
||||
@ -503,6 +507,9 @@
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.plyr .plyr__progress {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.plyr__progress--buffer,
|
||||
.plyr__progress--played,
|
||||
@ -635,8 +642,10 @@
|
||||
|
||||
// Volume
|
||||
// --------------------------------------------------------------
|
||||
.plyr .plyr__volume {
|
||||
.plyr__volume {
|
||||
display: none;
|
||||
}
|
||||
.plyr .plyr__volume {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
@ -689,4 +698,11 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Vimeo requires some different styling
|
||||
&.plyr--vimeo .plyr__video-wrapper {
|
||||
height: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<path d="M3,7 L1,7 L1,2 C1,1.4 1.4,1 2,1 L7,1 L7,3 L3,3 L3,7 L3,7 Z"></path>
|
||||
<path d="M17,7 L15,7 L15,3 L11,3 L11,1 L16,1 C16.6,1 17,1.4 17,2 L17,7 L17,7 Z"></path>
|
||||
<path d="M16,17 L11,17 L11,15 L15,15 L15,11 L17,11 L17,16 C17,16.6 16.6,17 16,17 L16,17 Z"></path>
|
||||
<path d="M7,17 L2,17 C1.4,17 1,16.6 1,16 L1,11 L3,11 L3,15 L7,15 L7,17 L7,17 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 615 B |
@ -1,7 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<path d="M10.7,8.4 L9.3,7 L3,13.3 L3,8.7 L1,8.7 L1,15.7 C1,16.3 1.4,16.7 2,16.7 L9,16.7 L9,14.7 L4.4,14.7 L10.7,8.4 L10.7,8.4 Z"></path>
|
||||
<path d="M16,16 L12,16 L12,14 L15,14 L15,3 L4,3 L4,6 L2,6 L2,2 C2,1.4 2.4,1 3,1 L16,1 C16.6,1 17,1.4 17,2 L17,15 C17,15.6 16.6,16 16,16 L16,16 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 530 B |
|
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 |
7
src/sprite/plyr-enter-fullscreen.svg
Normal file
7
src/sprite/plyr-enter-fullscreen.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<polygon points="10 3 13.6 3 9.6 7 11 8.4 15 4.4 15 8 17 8 17 1 10 1"></polygon>
|
||||
<polygon points="7 9.6 3 13.6 3 10 1 10 1 17 8 17 8 15 4.4 15 8.4 11"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 401 B |
7
src/sprite/plyr-exit-fullscreen.svg
Normal file
7
src/sprite/plyr-exit-fullscreen.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g>
|
||||
<polygon points="1 12 4.6 12 0.6 16 2 17.4 6 13.4 6 17 8 17 8 10 1 10"></polygon>
|
||||
<polygon points="16 0.6 12 4.6 12 1 10 1 10 8 17 8 17 6 13.4 6 17.4 2"></polygon>
|
||||
</g>
|
||||
</svg>
|
||||
|
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 |
Reference in New Issue
Block a user