Merge branch 'develop' of github.com:selz/plyr into develop
# Conflicts: # .gitignore # dist/plyr.css # dist/plyr.js # dist/sprite.svg # docs/dist/docs.css # docs/dist/docs.js # docs/src/less/components/examples.less # src/js/plyr.js # src/less/plyr.less # src/sprite/icon-fast-forward.svg # src/sprite/icon-pause.svg # src/sprite/icon-play.svg # src/sprite/icon-rewind.svg
This commit is contained in:
Sam Potts
commit
70297321c3
@ -4,7 +4,7 @@
|
||||
"plyr.css": ["src/less/plyr.less"]
|
||||
},
|
||||
"sass": {
|
||||
"plyr.css": ["src/less/plyr.sass"]
|
||||
"plyr.css": ["src/sass/plyr.sass"]
|
||||
},
|
||||
"js": {
|
||||
"plyr.js": ["src/js/plyr.js"]
|
||||
|
||||
81
changelog.md
81
changelog.md
@ -1,5 +1,86 @@
|
||||
# Changelog
|
||||
|
||||
## v1.5.21
|
||||
- Bug fix for embeds: `play` not being defined (fixes #185 and #186)
|
||||
|
||||
## v1.5.20
|
||||
- Bug fix for autoplay option
|
||||
|
||||
## v1.5.19
|
||||
- Fix for accessing `embed` property after `ready` event fired
|
||||
|
||||
## v1.5.18
|
||||
- Added 'ready' event for initial setup complete or source change occurs
|
||||
- Fixed SASS stylesheet references to transparentize
|
||||
- Added default font stack to controls
|
||||
- Docs fixes inc controls HTML (fixes #180)
|
||||
|
||||
## v1.5.17
|
||||
- Expose YouTube and Vimeo API (docs update required) (Fixes #176)
|
||||
- Auto set title based on YouTube getVideoData() title property
|
||||
- Bug fix for Vimeo API change (Uncaught TypeError: Cannot read property 'value' of undefined) due to a change their end
|
||||
|
||||
## v1.5.16
|
||||
- Cancel requests on source change (Fixes #174)
|
||||
|
||||
## v1.5.15
|
||||
- Fix for CustomEvent polyfill and related bug (See #172)
|
||||
|
||||
## v1.5.14
|
||||
- Volume storage fix (Fixes #171)
|
||||
|
||||
## v1.5.13
|
||||
- Fix for manual caption rendering
|
||||
|
||||
## v1.5.12
|
||||
- Added a duration option to pass the duration of the file
|
||||
- Added the ability to set options per element by setting a data-plyr attribute on the target elements (this might be useful for the duration option for example)
|
||||
- Fixes for Chrome and Safari caption rendering, they now use the default texttrack and cuechange events
|
||||
- Firefox bug fix for event not defined
|
||||
|
||||
## v1.5.11
|
||||
- iOS embed bug fixes (fixes #166)
|
||||
- Hide IE/Edge <input type='range'> tooltip (since we have a styled one) (fixes #160)
|
||||
- SASS bug fix for default values (fixes #158)
|
||||
|
||||
## v1.5.9 + v1.5.10
|
||||
- NPM bug fixes
|
||||
|
||||
## v1.5.8
|
||||
- Fix for touch device seek tooltip
|
||||
- Seek improvements
|
||||
|
||||
## v1.5.7
|
||||
- Fix for control tooltips always showing
|
||||
|
||||
## v1.5.6
|
||||
- Seek tooltip (option for tooltips changed, please check docs)
|
||||
- SASS compile error fixes (fixes #148)
|
||||
- Fullscreen fixes for controls not always hiding/showing (fixes #149)
|
||||
- Screen reader icon fixes (title was being read twice due to the tooltip/hidden label)
|
||||
|
||||
## v1.5.5
|
||||
- Fixed controls.md example
|
||||
- Bug fix for docs error page
|
||||
- Bug fix for controls tooltips
|
||||
|
||||
## v1.5.4
|
||||
- Minor bug fix for clicking video to play/pause after source change
|
||||
|
||||
## v1.5.3
|
||||
- Minor bug fix for occasional display of 0:00 as the media duration
|
||||
|
||||
## v1.5.2
|
||||
- `handlers` option renamed to `listeners`
|
||||
- Added event listeners for all types to the plyr container (playback, fullscreen, captions etc - see docs)
|
||||
- Removed onSetup config option (use the 'setup' event instead, plyr element is event.plyr)
|
||||
- Style bug fixes
|
||||
- Vimeo seek bug fix (requires whole seconds when seeking)
|
||||
- Fix for fullscreen player (using class hook, not browser fullscreen)
|
||||
|
||||
## v1.5.1
|
||||
- Fix for event listeners being duplicated on source change
|
||||
|
||||
# v1.5.0
|
||||
- Vimeo support (fixes #8)
|
||||
- New options for initialization (you can now pass a selector, HTMLElement or NodeList) (fixes #118)
|
||||
|
||||
76
controls.md
76
controls.md
@ -46,65 +46,71 @@ You can include only the controls you need when specifying custom html.
|
||||
This is an example `html` option with all controls.
|
||||
|
||||
```javascript
|
||||
["<div class='player-controls'>",
|
||||
"<div class='player-progress'>",
|
||||
"<label for='seek{id}' class='sr-only'>Seek</label>",
|
||||
"<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>",
|
||||
"<progress class='player-progress-played' max='100' value='0'>",
|
||||
var controls = ["<div class='plyr__controls'>",
|
||||
"<div class='plyr__progress'>",
|
||||
"<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
|
||||
"<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
|
||||
"<progress class='plyr__progress--played' max='100' value='0'>",
|
||||
"<span>0</span>% played",
|
||||
"</progress>",
|
||||
"<progress class='player-progress-buffer' max='100' value='0'>",
|
||||
"<progress class='plyr__progress--buffer' max='100' value='0'>",
|
||||
"<span>0</span>% buffered",
|
||||
"</progress>",
|
||||
"<span class='plyr__tooltip'>00:00</span>",
|
||||
"</div>",
|
||||
"<span class='player-controls-left'>",
|
||||
"<button type='button' data-player='restart'>",
|
||||
"<span class='plyr__controls--left'>",
|
||||
"<button type='button' data-plyr='restart'>",
|
||||
"<svg><use xlink:href='#icon-restart'></use></svg>",
|
||||
"<span class='sr-only'>Restart</span>",
|
||||
"<span class='plyr__sr-only'>Restart</span>",
|
||||
"</button>",
|
||||
"<button type='button' data-player='rewind'>",
|
||||
"<button type='button' data-plyr='rewind'>",
|
||||
"<svg><use xlink:href='#icon-rewind'></use></svg>",
|
||||
"<span class='sr-only'>Rewind {seektime} secs</span>",
|
||||
"<span class='plyr__sr-only'>Rewind {seektime} secs</span>",
|
||||
"</button>",
|
||||
"<button type='button' data-player='play'>",
|
||||
"<button type='button' data-plyr='play'>",
|
||||
"<svg><use xlink:href='#icon-play'></use></svg>",
|
||||
"<span class='sr-only'>Play</span>",
|
||||
"<span class='plyr__sr-only'>Play</span>",
|
||||
"</button>",
|
||||
"<button type='button' data-player='pause'>",
|
||||
"<button type='button' data-plyr='pause'>",
|
||||
"<svg><use xlink:href='#icon-pause'></use></svg>",
|
||||
"<span class='sr-only'>Pause</span>",
|
||||
"<span class='plyr__sr-only'>Pause</span>",
|
||||
"</button>",
|
||||
"<button type='button' data-player='fast-forward'>",
|
||||
"<button type='button' data-plyr='fast-forward'>",
|
||||
"<svg><use xlink:href='#icon-fast-forward'></use></svg>",
|
||||
"<span class='sr-only'>Forward {seektime} secs</span>",
|
||||
"<span class='plyr__sr-only'>Forward {seektime} secs</span>",
|
||||
"</button>",
|
||||
"<span class='player-time'>",
|
||||
"<span class='sr-only'>Current time</span>",
|
||||
"<span class='player-current-time'>00:00</span>",
|
||||
"<span class='plyr__time'>",
|
||||
"<span class='plyr__sr-only'>Current time</span>",
|
||||
"<span class='plyr__time--current'>00:00</span>",
|
||||
"</span>",
|
||||
"<span class='player-time'>",
|
||||
"<span class='sr-only'>Duration</span>",
|
||||
"<span class='player-duration'>00:00</span>",
|
||||
"<span class='plyr__time'>",
|
||||
"<span class='plyr__sr-only'>Duration</span>",
|
||||
"<span class='plyr__time--duration'>00:00</span>",
|
||||
"</span>",
|
||||
"</span>",
|
||||
"<span class='player-controls-right'>",
|
||||
"<button type='button' data-player='mute'>",
|
||||
"<svg class='icon-muted'><use xlink:href='#icon-muted'></use></svg>",
|
||||
"<span class='plyr__controls--right'>",
|
||||
"<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>",
|
||||
"<span class='sr-only'>Toggle Mute</span>",
|
||||
"<span class='plyr__sr-only'>Toggle Mute</span>",
|
||||
"</button>",
|
||||
"<label for='volume{id}' class='sr-only'>Volume</label>",
|
||||
"<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>",
|
||||
"<button type='button' data-player='captions'>",
|
||||
"<svg class='icon-captions-on'><use xlink:href='#icon-captions-on'></use></svg>",
|
||||
"<label for='volume{id}' class='plyr__sr-only'>Volume</label>",
|
||||
"<input id='volume{id}' class='plyr__volume' type='range' min='0' max='10' value='5' data-plyr='volume'>",
|
||||
"<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>",
|
||||
"<span class='sr-only'>Toggle Captions</span>",
|
||||
"<span class='plyr__sr-only'>Toggle Captions</span>",
|
||||
"</button>",
|
||||
"<button type='button' data-player='fullscreen'>",
|
||||
"<svg class='icon-exit-fullscreen'><use xlink:href='#icon-exit-fullscreen'></use></svg>",
|
||||
"<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>",
|
||||
"<span class='sr-only'>Toggle Fullscreen</span>",
|
||||
"<span class='plyr__sr-only'>Toggle Fullscreen</span>",
|
||||
"</button>",
|
||||
"</span>",
|
||||
"</div>"].join("\n");
|
||||
|
||||
// Setup the player
|
||||
plyr.setup('.js-player', {
|
||||
html: controls
|
||||
});
|
||||
```
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<main>
|
||||
<h1>Doh.</h1>
|
||||
<p>Looks like something went wrong.</p>
|
||||
<a href="http://plyr.io" class="btn">Back to plyr.io</a>
|
||||
<a href="http://plyr.io" class="btn btn--primary">Back to plyr.io</a>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
<source src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm" type="video/webm">
|
||||
|
||||
<!-- Text track file -->
|
||||
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.0/example_captions_en.vtt" default>
|
||||
<track kind="captions" label="English" srclang="en" src="https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt" default>
|
||||
|
||||
<!-- Fallback for browsers that don't support the <video> element -->
|
||||
<a href="https://cdn.selz.com/plyr/1.0/movie.mp4">Download</a>
|
||||
|
||||
BIN
docs/poster.jpg
BIN
docs/poster.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 171 KiB |
@ -6,26 +6,69 @@
|
||||
|
||||
// Setup the player
|
||||
plyr.setup('.js-media-player', {
|
||||
debug: true,
|
||||
title: 'Video demo',
|
||||
tooltips: true,
|
||||
captions: {
|
||||
defaultActive: true
|
||||
debug: true,
|
||||
title: 'Video demo',
|
||||
tooltips: {
|
||||
controls: true
|
||||
},
|
||||
onSetup: function() {
|
||||
console.log('✓ Setup done');
|
||||
captions: {
|
||||
defaultActive: true
|
||||
}
|
||||
});
|
||||
|
||||
// General functions
|
||||
(function() {
|
||||
var buttons = document.querySelectorAll('[data-source]');
|
||||
var buttons = document.querySelectorAll('[data-source]'),
|
||||
types = {
|
||||
video: 'video',
|
||||
audio: 'audio',
|
||||
youtube: 'youtube',
|
||||
vimeo: 'vimeo'
|
||||
},
|
||||
currentType = window.location.hash.replace('#', ''),
|
||||
historySupport = (window.history && window.history.pushState);
|
||||
|
||||
// Bind to each button
|
||||
for (var i = buttons.length - 1; i >= 0; i--) {
|
||||
buttons[i].addEventListener('click', newSource);
|
||||
buttons[i].addEventListener('click', function() {
|
||||
var type = this.getAttribute('data-source');
|
||||
|
||||
newSource(type);
|
||||
|
||||
if (historySupport) {
|
||||
history.pushState({ 'type': type }, '', '#' + type);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// List for backwards/forwards
|
||||
window.addEventListener('popstate', function(event) {
|
||||
if(event.state && 'type' in event.state) {
|
||||
newSource(event.state.type);
|
||||
}
|
||||
});
|
||||
|
||||
// On load
|
||||
if(historySupport) {
|
||||
var video = !currentType.length;
|
||||
|
||||
// If there's no current type set, assume video
|
||||
if(video) {
|
||||
currentType = types.video;
|
||||
}
|
||||
|
||||
// Replace current history state
|
||||
if(currentType in types) {
|
||||
history.replaceState({ 'type': currentType }, '', (video ? '' : '#' + currentType));
|
||||
}
|
||||
|
||||
// If it's not video, load the source
|
||||
if(currentType !== types.video) {
|
||||
newSource(currentType, true);
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle class on an element
|
||||
function toggleClass(element, className, state) {
|
||||
if (element) {
|
||||
if (element.classList) {
|
||||
@ -39,13 +82,17 @@ plyr.setup('.js-media-player', {
|
||||
}
|
||||
|
||||
// Set a new source
|
||||
function newSource() {
|
||||
var trigger = this,
|
||||
type = trigger.getAttribute('data-source'),
|
||||
player = document.querySelector('.js-media-player').plyr;
|
||||
function newSource(type, init) {
|
||||
// Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
|
||||
if(!(type in types) || (!init && type == currentType) || (!currentType.length && type == types.video)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get plyr instance
|
||||
var player = document.querySelector('.js-media-player').plyr;
|
||||
|
||||
switch(type) {
|
||||
case 'video':
|
||||
case types.video:
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
@ -62,13 +109,13 @@ plyr.setup('.js-media-player', {
|
||||
kind: 'captions',
|
||||
label: 'English',
|
||||
srclang:'en',
|
||||
src: 'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt',
|
||||
src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
|
||||
default: true
|
||||
}]
|
||||
});
|
||||
break;
|
||||
|
||||
case 'audio':
|
||||
case types.audio:
|
||||
player.source({
|
||||
type: 'audio',
|
||||
title: 'Kishi Bashi – “It All Began With A Burst”',
|
||||
@ -83,7 +130,7 @@ plyr.setup('.js-media-player', {
|
||||
});
|
||||
break;
|
||||
|
||||
case 'youtube':
|
||||
case types.youtube:
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
@ -94,7 +141,7 @@ plyr.setup('.js-media-player', {
|
||||
});
|
||||
break;
|
||||
|
||||
case 'vimeo':
|
||||
case types.vimeo:
|
||||
player.source({
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
@ -106,11 +153,16 @@ plyr.setup('.js-media-player', {
|
||||
break;
|
||||
}
|
||||
|
||||
// Set the current type for next time
|
||||
currentType = type;
|
||||
|
||||
// Remove active classes
|
||||
for (var x = buttons.length - 1; x >= 0; x--) {
|
||||
toggleClass(buttons[x].parentElement, 'active', false);
|
||||
}
|
||||
|
||||
toggleClass((event.target || event.srcElement).parentElement, 'active', true);
|
||||
// Set active on parent
|
||||
toggleClass(document.querySelector('[data-source="'+ type +'"]').parentElement, 'active', true);
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
12
gulpfile.js
12
gulpfile.js
@ -214,8 +214,10 @@ options = {
|
||||
|
||||
// If aws is setup
|
||||
if("cdn" in aws) {
|
||||
var cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"),
|
||||
localpath = new RegExp("(\.\.\/)?dist", "gi");
|
||||
var regex = "(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)",
|
||||
cdnpath = new RegExp(aws.cdn.bucket + "\/" + regex, "gi"),
|
||||
semver = new RegExp("v" + regex, "gi"),
|
||||
localpath = new RegExp("(\.\.\/)?dist", "gi");
|
||||
}
|
||||
|
||||
// Publish version to CDN bucket
|
||||
@ -244,6 +246,11 @@ gulp.task("docs", function () {
|
||||
.pipe(replace(cdnpath, aws.cdn.bucket + "/" + version))
|
||||
.pipe(gulp.dest(root));
|
||||
|
||||
// Replace versioned files in plyr.js
|
||||
gulp.src(path.join(root, "src/js/plyr.js"))
|
||||
.pipe(replace(semver, "v" + version))
|
||||
.pipe(gulp.dest(path.join(root, "src/js/")));
|
||||
|
||||
// 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"])
|
||||
@ -253,6 +260,7 @@ gulp.task("docs", function () {
|
||||
|
||||
// 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())
|
||||
.pipe(s3(aws.cdn, options.docs));
|
||||
});
|
||||
|
||||
24
package.json
24
package.json
@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "plyr",
|
||||
"version": "1.5.0",
|
||||
"description": "A simple HTML5 media player using custom controls",
|
||||
"version": "1.5.21",
|
||||
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
|
||||
"homepage": "http://plyr.io",
|
||||
"main": "gulpfile.js",
|
||||
"main": "src/js/plyr.js",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.0",
|
||||
@ -24,9 +24,6 @@
|
||||
"gulp-util": "^3.0.7",
|
||||
"run-sequence": "^1.1.5"
|
||||
},
|
||||
"scripts": {
|
||||
"preinstall": "npm install -g gulp"
|
||||
},
|
||||
"keywords": [
|
||||
"HTML5 Video",
|
||||
"HTML5 Audio",
|
||||
@ -36,8 +33,15 @@
|
||||
"type": "git",
|
||||
"url": "git://github.com/selz/plyr.git"
|
||||
},
|
||||
"authors": [
|
||||
"Sam Potts <me@sampotts.me>"
|
||||
],
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/selz/plyr/issues"
|
||||
},
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"author": "Sam Potts <sam@selz.com> (selz.com)"
|
||||
}
|
||||
|
||||
307
readme.md
307
readme.md
@ -1,32 +1,34 @@
|
||||
# Plyr
|
||||
A simple, accessible HTML5 media player.
|
||||
A simple, accessible and customizable HTML5, YouTube and Vimeo media player.
|
||||
|
||||
Checkout the [demo](http://plyr.io).
|
||||
[Checkout the demo](https://plyr.io)
|
||||
|
||||
[](http://plyr.io)
|
||||
[](https://plyr.io)
|
||||
|
||||
## Why?
|
||||
We wanted a lightweight, accessible and customizable media player that just 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.
|
||||
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.
|
||||
|
||||
## Features
|
||||
- **Accessible** - full support for VTT captions and screen readers.
|
||||
- **Lightweight** - just 8KB minified and gzipped.
|
||||
- **[Customisable](#html)** - make the player look how you want with the markup you want.
|
||||
- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
|
||||
- **Responsive** - as you'd expect these days.
|
||||
- **Audio & Video** - support for both formats.
|
||||
- **[Embedded Video](#embeds)** - support for YouTube and Vimeo (beta).
|
||||
- **[API](#api)** - toggle playback, volume, seeking, and more.
|
||||
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
|
||||
- **i18n support** - support for internationalization of controls.
|
||||
- **No dependencies** - written in vanilla JavaScript, no jQuery required.
|
||||
- **Accessible** - full support for VTT captions and screen readers
|
||||
- **Lightweight** - under 10KB minified and gzipped
|
||||
- **[Customisable](#html)** - make the player look how you want with the markup you want
|
||||
- **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks
|
||||
- **Responsive** - as you'd expect these days
|
||||
- **HTML Video & Audio** - support for both formats
|
||||
- **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
|
||||
- **[API](#api)** - toggle playback, volume, seeking, and more
|
||||
- **[Universal events](#events)** - no messing around with Vimeo and YouTube APIs, all events are universal across formats
|
||||
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
|
||||
- **i18n support** - support for internationalization of controls
|
||||
- **No dependencies** - written in "vanilla" JavaScript, no jQuery required
|
||||
|
||||
Oh and yes, it works with Bootstrap.
|
||||
|
||||
## Changelog
|
||||
Check out the [changelog](changelog.md) to see what's been new with Plyr.
|
||||
Check out the [changelog](changelog.md) to see what's new with Plyr.
|
||||
|
||||
## Planned Development
|
||||
- Streaming
|
||||
- Playback speed
|
||||
- Playlists
|
||||
- Multiple language captions (with selection)
|
||||
@ -36,16 +38,28 @@ Check out the [changelog](changelog.md) to see what's been new with Plyr.
|
||||
If you have any cool ideas or features, please let me know by [creating an issue](https://github.com/Selz/plyr/issues/new) or, of course, forking and sending a pull request.
|
||||
|
||||
## 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.5.0/plyr.js` to `https://cdn.plyr.io/1.5.0/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.5.21/plyr.js` to `https://cdn.plyr.io/1.5.21/plyr.js`
|
||||
|
||||
### Node Package Manager (NPM)
|
||||
[](https://badge.fury.io/js/plyr)
|
||||
|
||||
Using NPM, you can grab Plyr:
|
||||
```
|
||||
npm install plyr
|
||||
```
|
||||
[https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)
|
||||
|
||||
### Bower
|
||||
[](https://badge.fury.io/bo/plyr)
|
||||
|
||||
If bower is your thang, you can grab Plyr using:
|
||||
```
|
||||
bower install plyr
|
||||
```
|
||||
[http://bower.io/search/?q=plyr](http://bower.io/search/?q=plyr)
|
||||
|
||||
More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
|
||||
|
||||
### Ember
|
||||
@ -59,11 +73,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.5.0/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.5.0/plyr.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.5.21/plyr.css">
|
||||
<script src="https://cdn.plyr.io/1.5.21/plyr.js"></script>
|
||||
```
|
||||
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.0/sprite.svg`.
|
||||
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.21/sprite.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.sass` file included in `/src` in your build to save a request.
|
||||
@ -95,7 +109,7 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
|
||||
```
|
||||
|
||||
If you're using the `<base>` tag on your site, you may need to use something like this:
|
||||
[https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2](svgfixer.js)
|
||||
[svgfixer.js](https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2)
|
||||
|
||||
More info on SVG sprites here:
|
||||
[http://css-tricks.com/svg-sprites-use-better-icon-fonts/](http://css-tricks.com/svg-sprites-use-better-icon-fonts/)
|
||||
@ -134,11 +148,16 @@ And the same for `<audio>`
|
||||
</div>
|
||||
```
|
||||
|
||||
For YouTube, Plyr uses the standard YouTube API markup (an empty `<div>`):
|
||||
For YouTube and Vimeo, Plyr uses the standard YouTube API markup (an empty `<div>`):
|
||||
|
||||
```html
|
||||
<div class="plyr">
|
||||
<div data-video-id="L1h9xxCU20g" data-type="youtube"></div>
|
||||
<div data-video-id="bTqVqk7FSmY" data-type="youtube"></div>
|
||||
</div>
|
||||
```
|
||||
```html
|
||||
<div class="plyr">
|
||||
<div data-video-id="143418951" data-type="vimeo"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -148,6 +167,11 @@ You'll notice the `crossorigin` attribute on the example `<video>` and `<audio>`
|
||||
More info on CORS here:
|
||||
[https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
|
||||
|
||||
### Captions
|
||||
WebVTT captions are supported. To add a caption track, check the HTML example above and look for the `<track>` element.
|
||||
|
||||
Be sure to [validate your caption files](https://quuz.org/webvtt/)
|
||||
|
||||
### JavaScript
|
||||
|
||||
#### Quick setup
|
||||
@ -155,7 +179,7 @@ More info on CORS here:
|
||||
Here's an example of a default setup:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.plyr.io/1.5.0/plyr.js"></script>
|
||||
<script src="https://cdn.plyr.io/1.5.21/plyr.js"></script>
|
||||
<script>plyr.setup();</script>
|
||||
```
|
||||
|
||||
@ -185,7 +209,7 @@ plyr.setup(options);
|
||||
|
||||
#### Options
|
||||
|
||||
Options must be passed as an object to the `setup()` method as above.
|
||||
Options must be passed as an object to the `setup()` method as above or as JSON in `data-plyr` attribute on each of your target elements (e.g. data-plyr='{ title: "testing" }') - note the single quotes encapsulating the JSON.
|
||||
|
||||
<table class="table" width="100%">
|
||||
<thead>
|
||||
@ -233,6 +257,12 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
<td><code>false</code></td>
|
||||
<td>Display debugging information on what Plyr is doing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>autoplay</code></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Autoplay the media on load. This is generally advised against on UX grounds. It is also disabled on iOS (an Apple limitation).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>seekTime</code></td>
|
||||
<td>Number</td>
|
||||
@ -253,11 +283,21 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>tooltips</code></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>false</code></td>
|
||||
<td>Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only).</td>
|
||||
<td>Object</td>
|
||||
<td><code>{ controls: false, seek: true }</code></td>
|
||||
<td>
|
||||
<strong>controls</strong>: Display control labels as tooltips on :hover & :focus (by default, the labels are screen reader only).
|
||||
<br><br>
|
||||
<strong>seek</strong>: Display a seek tooltip to indicate on click where the media would seek to.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<tr>
|
||||
<td><code>duration</code></td>
|
||||
<td>Number</td>
|
||||
<td><code>null</code></td>
|
||||
<td>Specify a custom duration.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>displayDuration</code></td>
|
||||
<td>Boolean</td>
|
||||
<td><code>true</code></td>
|
||||
@ -270,10 +310,10 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
<td>See <code>plyr.js</code> in <code>/src</code> for more info. You probably don't need to change any of these.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>handlers</code></td>
|
||||
<td><code>listeners</code></td>
|
||||
<td>Object</td>
|
||||
<td>—</td>
|
||||
<td>Allows early binding of handlers to Plyr's controls. See <code>controls</code> above for list of controls and see <code>plyr.js</code> in <code>/src</code> for more info.</td>
|
||||
<td>Allows early binding of event listeners to the controls. See <code>controls</code> above for list of controls and see <code>plyr.js</code> in <code>/src</code> for more info.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>classes</code></td>
|
||||
@ -299,12 +339,6 @@ Options must be passed as an object to the `setup()` method as above.
|
||||
<td>—</td>
|
||||
<td>Two properties; <code>enabled</code> which toggles if local storage should be enabled (if the browser supports it). The default value is `true`. This enables storing user settings, currently it only stores volume but more will be added later. The second property <code>key</code> is the key used for the local storage. The default is <code>plyr_volume</code> until more settings are stored.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>onSetup</code></td>
|
||||
<td>Function</td>
|
||||
<td>—</td>
|
||||
<td>This callback function is called on every new plyr instance created. The context (<code>this</code>) is the plyr instance itself.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -364,7 +398,7 @@ Or you can use the returned object from your call to the setup method:
|
||||
var player = plyr.setup('.js-plyr')[0];
|
||||
```
|
||||
|
||||
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 mutliple instances. You can also use the `onSetup` callback documented below which will return each instance one by one, as they are setup.
|
||||
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 mutliple 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).
|
||||
|
||||
Once you have your instance, you can use the API methods below on it. For example to pause it:
|
||||
|
||||
@ -450,16 +484,23 @@ Here's a list of the methods supported:
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>source(...)</code></td>
|
||||
<td>Array or undefined</td>
|
||||
<td>Object or undefined</td>
|
||||
<td>
|
||||
Get/Set the media source.
|
||||
<br><br>
|
||||
<strong>string</strong><br>
|
||||
<code>.source("/path/to/video.mp4")</code><br>
|
||||
This will set the <code>src</code> attribute on the <code>video</code> or <code>audio</code> element.
|
||||
<br><br>
|
||||
<strong>array</strong><br>
|
||||
<code>.source([{ src: "/path/to/video.webm", type: "video/webm", ...more attributes... }, { src: "/path/to/video.mp4", type: "video/mp4", ...more attributes... }])`</code><br>
|
||||
<pre><code>.source([
|
||||
{
|
||||
src: "/path/to/video.webm",
|
||||
type: "video/webm",
|
||||
...more attributes...
|
||||
},
|
||||
{
|
||||
src: "/path/to/video.mp4",
|
||||
type: "video/mp4",
|
||||
...more attributes...
|
||||
}
|
||||
])`</code></pre><br>
|
||||
This will inject a child `source` element for every element in the array with the specified attributes. `src` is the only required attribute although adding `type` is recommended as it helps the browser decide which file to download and play.
|
||||
<br><br>
|
||||
<strong>YouTube</strong><br>
|
||||
@ -582,8 +623,8 @@ Some more details on the object parameters
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>sources</code></td>
|
||||
<td>Array or String</td>
|
||||
<td>This is an array of sources or optionally a string for embedded players (YouTube and Vimeo). `type` is also optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
|
||||
<td>Array</td>
|
||||
<td>This is an array of sources. <code>type</code> is optional for YouTube and Vimeo when specifying an array. For YouTube and Vimeo media, only the video ID must be passed as the source as shown above. The keys of this object are mapped directly to HTML attributes so more can be added to the object if required.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>poster</code></td>
|
||||
@ -599,39 +640,172 @@ Some more details on the object parameters
|
||||
</table>
|
||||
|
||||
|
||||
## Events/Callbacks
|
||||
## Events
|
||||
|
||||
The `plyr` object on the player element also contains a `media` property which is a reference to the `<audio>` or `<video>` element within the player which you can use to listen for events. Here's an example:
|
||||
You can listen for events on the element you setup Plyr on. Some events only apply to HTML5 audio and video.
|
||||
|
||||
<table class="table" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="20%">Event name</th>
|
||||
<th width="20%">HTML5 only</th>
|
||||
<th width="60%">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>canplay</code></td>
|
||||
<td>✔</td>
|
||||
<td>Sent when enough data is available that the media can be played, at least for a couple of frames. This corresponds to the <code>HAVE_ENOUGH_DATA</code> <code>readyState</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>canplaythrough</code></td>
|
||||
<td></td>
|
||||
<td>Sent when the ready state changes to <code>CAN_PLAY_THROUGH</code>, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level. <strong>Note</strong>: Manually setting the <code>currentTime</code> will eventually fire a <code>canplaythrough</code> event in firefox. Other browsers might not fire this event.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>emptied</code></td>
|
||||
<td>✔</td>
|
||||
<td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <code>load()</code> method is called to reload it.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ended</code></td>
|
||||
<td></td>
|
||||
<td>Sent when playback completes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>error</code></td>
|
||||
<td>✔</td>
|
||||
<td>Sent when an error occurs. The element's <code>error</code> attribute contains more information.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>loadeddata</code></td>
|
||||
<td>✔</td>
|
||||
<td>The first frame of the media has finished loading.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>loadedmetadata</code></td>
|
||||
<td>✔</td>
|
||||
<td>The media's metadata has finished loading; all attributes now contain as much useful information as they're going to.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>loadstart</code></td>
|
||||
<td>✔</td>
|
||||
<td>Sent when loading of the media begins.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>pause</code></td>
|
||||
<td></td>
|
||||
<td>Sent when playback is paused.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>play</code></td>
|
||||
<td></td>
|
||||
<td>Sent when playback of the media starts after having been paused; that is, when playback is resumed after a prior <code>pause</code> event.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>playing</code></td>
|
||||
<td></td>
|
||||
<td>Sent when the media begins to play (either for the first time, after having been paused, or after ending and then restarting).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>progress</code></td>
|
||||
<td></td>
|
||||
<td>Sent periodically to inform interested parties of progress downloading the media. Information about the current amount of the media that has been downloaded is available in the media element's <code>buffered</code> attribute.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>seeked</code></td>
|
||||
<td>✔</td>
|
||||
<td>Sent when a seek operation completes.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>seeking</code></td>
|
||||
<td>✔</td>
|
||||
<td>Sent when a seek operation begins.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>stalled</code></td>
|
||||
<td>✔</td>
|
||||
<td>Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>timeupdate</code></td>
|
||||
<td></td>
|
||||
<td>The time indicated by the element's <code>currentTime</code> attribute has changed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>volumechange</code></td>
|
||||
<td></td>
|
||||
<td>Sent when the audio volume changes (both when the volume is set and when the <code>muted</code> attribute is changed).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>waiting</code></td>
|
||||
<td>✔</td>
|
||||
<td>Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>enterfullscreen</code></td>
|
||||
<td></td>
|
||||
<td>User enters fullscreen (either the proper fullscreen or full-window fallback for older browsers)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>exitfullscreen</code></td>
|
||||
<td></td>
|
||||
<td>User exits fullscreen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>captionsenabled</code></td>
|
||||
<td></td>
|
||||
<td>Captions toggled on</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>captionsdisabled</code></td>
|
||||
<td></td>
|
||||
<td>Captions toggled off</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>ready</code></td>
|
||||
<td></td>
|
||||
<td>Triggered when initial setup is done or a source change has occurred.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Details borrowed from: [https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)
|
||||
|
||||
Here's an example of binding an event listener:
|
||||
|
||||
```javascript
|
||||
var media = document.querySelector(".js-plyr").plyr.media;
|
||||
|
||||
media.addEventListener("playing", function() {
|
||||
console.log("playing");
|
||||
document.querySelector('.js-plyr').addEventListener('ready', function() {
|
||||
var player = event.target.plyr;
|
||||
});
|
||||
```
|
||||
A complete list of events can be found here:
|
||||
[Media Events - W3.org](http://www.w3.org/2010/05/video/mediaevents.html)
|
||||
|
||||
## Embeds
|
||||
|
||||
Currently only YouTube is supported. Vimeo will be coming soon. Some HTML5 media events are triggered on the `media` property of the `plyr` object:
|
||||
- `play`
|
||||
- `pause`
|
||||
- `timeupdate`
|
||||
- `progress`
|
||||
YouTube and Vimeo are currently supported and function much like a HTML5 video. Check the relevant documentation sections for any differences.
|
||||
|
||||
Due to the way the YouTube API works, the `timeupdate` and `progress` events are triggered by polling every 200ms so the event may trigger without an actual value change. Buffering progress is `media.buffered` in the `plyr` object. It is a a number between 0 and 1 that specifies the percentage of the video that the player shows as buffered.
|
||||
Plyr references a custom version of the Vimeo Froogaloop API as Vimeo have neglected to maintain the library and there were bugs with their version. You don't need to worry about including your own versions of the Vimeo or YouTube JavaScript APIs.
|
||||
|
||||
The native API's can be accessed through the `embed` property of the plyr object. For example:
|
||||
|
||||
```javascript
|
||||
document.querySelector(".js-plyr").plyr.media.addEventListener("play", function() {
|
||||
console.log("play");
|
||||
document.querySelector('.js-plyr').addEventListener('ready', function() {
|
||||
var player = event.target.plyr;
|
||||
|
||||
// YouTube
|
||||
console.log(player.embed.getVideoData());
|
||||
|
||||
// Vimeo
|
||||
console.log(player.embed.api('getColor'));
|
||||
});
|
||||
```
|
||||
|
||||
The `.source()` API method can also be used but the video id must be passed as the argument.
|
||||
More info on the respective API's here:
|
||||
[YouTube API Reference](https://developers.google.com/youtube/js_api_reference)
|
||||
[Vimeo API Reference](https://developer.vimeo.com/player/js-api#reference)
|
||||
|
||||
Currently caption control is not supported but I will work on this.
|
||||
*Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.
|
||||
|
||||
## Fullscreen
|
||||
|
||||
@ -695,9 +869,12 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
|
||||
- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
|
||||
- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
|
||||
- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
|
||||
- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
|
||||
|
||||
## Used by
|
||||
- [Selz.com](https://selz.com)
|
||||
- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
|
||||
- [Oscar Radio](http://oscar-radio.xyz/)
|
||||
|
||||
Let me know on [Twitter](https://twitter.com/sam_potts) I can add you to the above list. It'd be awesome to see how you're using Plyr :-)
|
||||
|
||||
|
||||
@ -7,76 +7,76 @@
|
||||
// -------------------------------
|
||||
|
||||
// Colors
|
||||
$blue: #3498DB !default;
|
||||
$gray-dark: #343F4A !default;
|
||||
$gray: #565D64 !default;
|
||||
$gray-light: #6B7D86 !default;
|
||||
$gray-lighter: #CBD0D3 !default;
|
||||
$off-white: #D6DADD !default;
|
||||
$plyr-blue: #3498DB !default;
|
||||
$plyr-gray-dark: #343F4A !default;
|
||||
$plyr-gray: #565D64 !default;
|
||||
$plyr-gray-light: #6B7D86 !default;
|
||||
$plyr-gray-lighter: #CBD0D3 !default;
|
||||
$plyr-off-white: #D6DADD !default;
|
||||
|
||||
// Font sizes
|
||||
$font-size-small: 14px !default;
|
||||
$font-size-base: 16px !default;
|
||||
$plyr-font-size-small: 14px !default;
|
||||
$plyr-font-size-base: 16px !default;
|
||||
|
||||
// Captions
|
||||
$font-size-captions-base: ceil($font-size-base * 1.25) !default;
|
||||
$font-size-captions-medium: ceil($font-size-base * 1.5) !default;
|
||||
$font-size-captions-large: ($font-size-base * 2) !default;
|
||||
$plyr-font-size-captions-base: ceil($plyr-font-size-base * 1.25) !default;
|
||||
$plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default;
|
||||
$plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default;
|
||||
|
||||
// Controls
|
||||
$control-spacing: 10px !default;
|
||||
$controls-bg: #fff !default;
|
||||
$control-bg-hover: $blue !default;
|
||||
$control-color: null !default;
|
||||
$control-color-hover: null !default;
|
||||
$plyr-control-spacing: 10px !default;
|
||||
$plyr-controls-bg: #fff !default;
|
||||
$plyr-control-bg-hover: $plyr-blue !default;
|
||||
|
||||
// Contrast
|
||||
@if lightness($controls-bg) >= 65% {
|
||||
$control-color: $gray-light;
|
||||
@if lightness($plyr-controls-bg) >= 65% {
|
||||
$plyr-control-color: $plyr-gray-light !default;
|
||||
}
|
||||
@else {
|
||||
$control-color: $gray-lighter;
|
||||
$plyr-control-color: $plyr-gray-lighter !default;
|
||||
}
|
||||
@if lightness($control-bg-hover) >= 65% {
|
||||
$control-color-hover: $gray;
|
||||
@if lightness($plyr-control-bg-hover) >= 65% {
|
||||
$plyr-control-color-hover: $plyr-gray !default;
|
||||
}
|
||||
@else {
|
||||
$control-color-hover: #fff;
|
||||
$plyr-control-color-hover: #fff !default;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
$tooltip-bg: $controls-bg !default;
|
||||
$tooltip-border-color: transparentize(@gray-dark, .1) !default;
|
||||
$tooltip-border-width: 1px;
|
||||
$tooltip-shadow: 0 0 5px $tooltip-border-color, 0 0 0 $tooltip-border-width $tooltip-border-color;
|
||||
$tooltip-color: $control-color !default;
|
||||
$tooltip-padding: $control-spacing !default;
|
||||
$tooltip-arrow-size: 6px !default;
|
||||
$tooltip-radius: 3px !default;
|
||||
$plyr-tooltip-bg: $plyr-controls-bg !default;
|
||||
$plyr-tooltip-border-color: transparentize(darken($plyr-controls-bg, 75%), .9) !default;
|
||||
$plyr-tooltip-arrow-border-color: transparentize(darken($plyr-controls-bg, 75%), .8) !default;
|
||||
|
||||
$plyr-tooltip-border-width: 1px;
|
||||
$plyr-tooltip-shadow: 0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color;
|
||||
$plyr-tooltip-color: $plyr-control-color !default;
|
||||
$plyr-tooltip-padding: $plyr-control-spacing !default;
|
||||
$plyr-tooltip-arrow-size: 6px !default;
|
||||
$plyr-tooltip-radius: 3px !default;
|
||||
|
||||
// Progress
|
||||
$progress-bg: transparentize($gray, .2) !default;
|
||||
$progress-playing-bg: $blue !default;
|
||||
$progress-buffered-bg: transparentize($gray, .25) !default;
|
||||
$progress-loading-size: 40px !default;
|
||||
$progress-loading-bg: rgba(0,0,0, .15) !default;
|
||||
$plyr-progress-bg: transparentize($plyr-gray, .8) !default;
|
||||
$plyr-progress-playing-bg: $plyr-blue !default;
|
||||
$plyr-progress-buffered-bg: transparentize($plyr-gray, .75) !default;
|
||||
$plyr-progress-loading-size: 40px !default;
|
||||
$plyr-progress-loading-bg: transparentize(#000, .85) !default;
|
||||
|
||||
// Volume
|
||||
$volume-track-height: 6px !default;
|
||||
$volume-track-bg: darken($controls-bg, 10%) !default;
|
||||
$volume-thumb-height: ($volume-track-height * 2) !default;
|
||||
$volume-thumb-width: ($volume-track-height * 2) !default;
|
||||
$volume-thumb-bg: $control-color !default;
|
||||
$volume-thumb-bg-focus: $control-bg-hover !default;
|
||||
$plyr-volume-track-height: 6px !default;
|
||||
$plyr-volume-track-bg: darken($plyr-controls-bg, 10%) !default;
|
||||
$plyr-volume-thumb-height: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-width: ($plyr-volume-track-height * 2) !default;
|
||||
$plyr-volume-thumb-bg: $plyr-control-color !default;
|
||||
$plyr-volume-thumb-bg-focus: $plyr-control-bg-hover !default;
|
||||
|
||||
// Breakpoints
|
||||
$bp-control-split: 560px !default; // When controls split into left/right
|
||||
$bp-captions-large: 768px !default; // When captions jump to the larger font size
|
||||
$plyr-bp-control-split: 560px !default; // When controls split into left/right
|
||||
$plyr-bp-captions-large: 768px !default; // When captions jump to the larger font size
|
||||
|
||||
// Animation
|
||||
// ---------------------------------------
|
||||
@keyframes progress {
|
||||
to { background-position: $progress-loading-size 0; }
|
||||
@keyframes plyr-progress {
|
||||
to { background-position: $plyr-progress-loading-size 0; }
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
@ -92,41 +92,30 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
}
|
||||
}
|
||||
|
||||
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
||||
@mixin clearfix()
|
||||
{
|
||||
zoom: 1;
|
||||
&:before,
|
||||
&:after { content: ''; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
// Tab focus styles
|
||||
@mixin tab-focus() {
|
||||
outline: thin dotted transparentize($gray-dark, .8);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
// <input type="range"> styling
|
||||
@mixin volume-thumb() {
|
||||
height: $volume-thumb-height;
|
||||
width: $volume-thumb-width;
|
||||
background: $volume-thumb-bg;
|
||||
height: $plyr-volume-thumb-height;
|
||||
width: $plyr-volume-thumb-width;
|
||||
background: $plyr-volume-thumb-bg;
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
transition: background .3s ease;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
@mixin volume-track() {
|
||||
height: $volume-track-height;
|
||||
background: $volume-track-bg;
|
||||
height: $plyr-volume-track-height;
|
||||
background: $plyr-volume-track-bg;
|
||||
border: 0;
|
||||
border-radius: ($volume-track-height / 2);
|
||||
border-radius: ($plyr-volume-track-height / 2);
|
||||
}
|
||||
@mixin seek-thumb() {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: ($control-spacing * 4);
|
||||
height: $control-spacing;
|
||||
width: 1px;
|
||||
height: $plyr-control-spacing;
|
||||
}
|
||||
@mixin seek-thumb-touch() {
|
||||
width: ($plyr-control-spacing * 4);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@mixin seek-track() {
|
||||
@ -141,6 +130,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
min-width: 290px;
|
||||
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
|
||||
// border-box everything
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
@ -178,6 +168,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Hide default captions
|
||||
video::-webkit-media-text-track-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// For embeds
|
||||
&__video-embed {
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
@ -192,6 +187,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Vimeo hack
|
||||
@ -200,6 +196,11 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
padding-bottom: 200%;
|
||||
transform: translateY(-35.95%);
|
||||
}
|
||||
|
||||
// To allow mouse events to be captured if full support
|
||||
&.plyr iframe {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
@ -209,49 +210,55 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: ($control-spacing * 2) ($control-spacing * 2) ($control-spacing * 3);
|
||||
padding: ($plyr-control-spacing * 2) ($plyr-control-spacing * 2) ($plyr-control-spacing * 3);
|
||||
color: #fff;
|
||||
font-size: $font-size-captions-base;
|
||||
font-size: $plyr-font-size-captions-base;
|
||||
text-align: center;
|
||||
@include font-smoothing();
|
||||
|
||||
span {
|
||||
border-radius: 2px;
|
||||
padding: 3px 10px;
|
||||
background: rgba(0,0,0, .9);
|
||||
background: transparentize(#000, .1);
|
||||
}
|
||||
span:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: $bp-captions-large) {
|
||||
font-size: $font-size-captions-medium;
|
||||
@media (min-width: $plyr-bp-captions-large) {
|
||||
font-size: $plyr-font-size-captions-medium;
|
||||
}
|
||||
}
|
||||
&--captions-active &__captions {
|
||||
display: block;
|
||||
}
|
||||
&--fullscreen-active &__captions {
|
||||
font-size: $font-size-captions-large;
|
||||
font-size: $plyr-font-size-captions-large;
|
||||
}
|
||||
|
||||
// Playback controls
|
||||
&__controls {
|
||||
@include clearfix();
|
||||
@include font-smoothing();
|
||||
position: relative;
|
||||
padding: $control-spacing;
|
||||
background: $controls-bg;
|
||||
padding: $plyr-control-spacing;
|
||||
background: $plyr-controls-bg;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 1px transparentize($gray-dark, .2);
|
||||
box-shadow: 0 1px 1px transparentize($plyr-gray-dark, .8);
|
||||
|
||||
// Clear floats
|
||||
&::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// Layout
|
||||
&--right {
|
||||
display: block;
|
||||
margin: $control-spacing auto 0;
|
||||
margin: $plyr-control-spacing auto 0;
|
||||
}
|
||||
@media (min-width: $bp-control-split) {
|
||||
@media (min-width: $plyr-bp-control-split) {
|
||||
&--left {
|
||||
float: left;
|
||||
}
|
||||
@ -266,13 +273,13 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 2px;
|
||||
padding: ($control-spacing / 2) $control-spacing;
|
||||
padding: ($plyr-control-spacing / 2) $plyr-control-spacing;
|
||||
overflow: hidden;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
color: $control-color;
|
||||
color: $plyr-control-color;
|
||||
transition: background .3s ease, color .3s ease, opacity .3s ease;
|
||||
|
||||
svg {
|
||||
@ -286,8 +293,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
// Hover and tab focus
|
||||
&.tab-focus:hover,
|
||||
&:hover {
|
||||
background: $control-bg-hover;
|
||||
color: $control-color-hover;
|
||||
background: $plyr-control-bg-hover;
|
||||
color: $plyr-control-color-hover;
|
||||
}
|
||||
// Default focus
|
||||
&:focus {
|
||||
@ -306,48 +313,50 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
.plyr__time {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: $control-spacing;
|
||||
color: $control-color;
|
||||
margin-left: $plyr-control-spacing;
|
||||
color: $plyr-control-color;
|
||||
font-weight: 600;
|
||||
font-size: $font-size-small;
|
||||
font-size: $plyr-font-size-small;
|
||||
}
|
||||
|
||||
// Media duration hidden on small screens
|
||||
.plyr__time + .plyr__time {
|
||||
display: none;
|
||||
|
||||
@media (min-width: $bp-control-split) {
|
||||
@media (min-width: $plyr-bp-control-split) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Add a slash in before
|
||||
&::before {
|
||||
content: '\2044';
|
||||
margin-right: $control-spacing;
|
||||
margin-right: $plyr-control-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
&__tooltip {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 100%;
|
||||
margin-bottom: $tooltip-padding;
|
||||
padding: $tooltip-padding ($tooltip-padding * 1.5);
|
||||
margin-bottom: $plyr-tooltip-padding;
|
||||
padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 0;
|
||||
background: $tooltip-bg;
|
||||
box-shadow: $tooltip-shadow;
|
||||
border-radius: $tooltip-radius;
|
||||
color: $tooltip-color;
|
||||
font-size: $font-size-small;
|
||||
background: $plyr-tooltip-bg;
|
||||
box-shadow: $plyr-tooltip-shadow;
|
||||
border-radius: $plyr-tooltip-radius;
|
||||
color: $plyr-tooltip-color;
|
||||
font-size: $plyr-font-size-small;
|
||||
line-height: 1.5;
|
||||
font-weight: 600;
|
||||
|
||||
transform: translate(-50%, ($tooltip-padding * 3)) scale(.8);
|
||||
transform: translate(-50%, 10px) scale(.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease, visibility .3s ease;
|
||||
|
||||
// Arrows
|
||||
&::after,
|
||||
@ -362,24 +371,26 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
}
|
||||
// The border triangle
|
||||
&::after {
|
||||
$border-arrow-size: ($tooltip-arrow-size + ($tooltip-border-width * 1));
|
||||
bottom: -($border-arrow-size + $tooltip-border-width);
|
||||
border-right: $border-arrow-size solid transparent;
|
||||
border-top: $border-arrow-size solid $tooltip-border-color;
|
||||
border-left: $border-arrow-size solid transparent;
|
||||
$plyr-border-arrow-size: ($plyr-tooltip-arrow-size + ($plyr-tooltip-border-width * 1));
|
||||
bottom: -($plyr-border-arrow-size + $plyr-tooltip-border-width);
|
||||
border-right: $plyr-border-arrow-size solid transparent;
|
||||
border-top: $plyr-border-arrow-size solid $plyr-tooltip-arrow-border-color;
|
||||
border-left: $plyr-border-arrow-size solid transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
// The background triangle
|
||||
&::before {
|
||||
bottom: -$tooltip-arrow-size;
|
||||
border-right: $tooltip-arrow-size solid transparent;
|
||||
border-top: $tooltip-arrow-size solid $tooltip-bg;
|
||||
border-left: $tooltip-arrow-size solid transparent;
|
||||
bottom: -$plyr-tooltip-arrow-size;
|
||||
border-right: $plyr-tooltip-arrow-size solid transparent;
|
||||
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
|
||||
border-left: $plyr-tooltip-arrow-size solid transparent;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
button:hover .plyr__tooltip,
|
||||
button.tab-focus:focus .plyr__tooltip {
|
||||
button.tab-focus:focus .plyr__tooltip,
|
||||
&__tooltip--visible {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
@ -389,19 +400,20 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
|
||||
// Common range styles
|
||||
input[type='range'].tab-focus:focus {
|
||||
.tab-focus();
|
||||
outline: thin dotted transparentize($plyr-gray-dark, .8);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
// Playback progress
|
||||
// <progress> element
|
||||
&-progress {
|
||||
&__progress {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: $control-spacing;
|
||||
background: $progress-bg;
|
||||
height: $plyr-control-spacing;
|
||||
background: $plyr-progress-bg;
|
||||
|
||||
&--buffer[value],
|
||||
&--played[value],
|
||||
@ -410,7 +422,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: $control-spacing;
|
||||
height: $plyr-control-spacing;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
@ -424,22 +436,25 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
&--played[value] {
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
transition: width .2s ease;
|
||||
}
|
||||
|
||||
// Inherit from currentColor;
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
transition: width .2s ease;
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
transition: width .2s ease;
|
||||
}
|
||||
}
|
||||
&--played[value] {
|
||||
z-index: 2;
|
||||
color: $progress-playing-bg;
|
||||
color: $plyr-progress-playing-bg;
|
||||
}
|
||||
&--buffer[value] {
|
||||
color: $progress-buffered-bg;
|
||||
color: $plyr-progress-buffered-bg;
|
||||
}
|
||||
|
||||
// Seek control
|
||||
@ -488,21 +503,41 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Seek tooltip to show time
|
||||
.plyr__tooltip {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Touch seek wider handle
|
||||
&--is-touch &--seek[type='range'] {
|
||||
&::-webkit-slider-thumb {
|
||||
@include seek-thumb-touch();
|
||||
}
|
||||
// Mozilla
|
||||
&::-moz-range-thumb {
|
||||
@include seek-thumb-touch();
|
||||
}
|
||||
// Microsoft
|
||||
&::-ms-thumb {
|
||||
@include seek-thumb-touch();
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
&--loading .plyr__progress--buffer {
|
||||
animation: progress 1s linear infinite;
|
||||
background-size: $progress-loading-size $progress-loading-size;
|
||||
animation: plyr-progress 1s linear infinite;
|
||||
background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
|
||||
background-repeat: repeat-x;
|
||||
background-color: $progress-buffered-bg;
|
||||
background-color: $plyr-progress-buffered-bg;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
$progress-loading-bg 25%,
|
||||
$plyr-progress-loading-bg 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
$progress-loading-bg 50%,
|
||||
$progress-loading-bg 75%,
|
||||
$plyr-progress-loading-bg 50%,
|
||||
$plyr-progress-loading-bg 75%,
|
||||
transparent 75%,
|
||||
transparent);
|
||||
color: transparent;
|
||||
@ -526,7 +561,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 100px;
|
||||
margin: 0 $control-spacing 0 0;
|
||||
margin: 0 $plyr-control-spacing 0 0;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
@ -538,7 +573,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
|
||||
margin-top: -(($plyr-volume-thumb-height - $plyr-volume-track-height) / 2);
|
||||
@include volume-thumb();
|
||||
}
|
||||
|
||||
@ -552,10 +587,10 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
|
||||
// Microsoft
|
||||
&::-ms-track {
|
||||
height: $volume-track-height;
|
||||
height: $plyr-volume-track-height;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: (($volume-thumb-height - $volume-track-height) / 2) 0;
|
||||
border-width: (($plyr-volume-thumb-height - $plyr-volume-track-height) / 2) 0;
|
||||
color: transparent;
|
||||
}
|
||||
&::-ms-fill-lower,
|
||||
@ -570,13 +605,13 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
outline: 0;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: $volume-thumb-bg-focus;
|
||||
background: $plyr-volume-thumb-bg-focus;
|
||||
}
|
||||
&::-moz-range-thumb {
|
||||
background: $volume-thumb-bg-focus;
|
||||
background: $plyr-volume-thumb-bg-focus;
|
||||
}
|
||||
&::-ms-thumb {
|
||||
background: $volume-thumb-bg-focus;
|
||||
background: $plyr-volume-thumb-bg-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -597,12 +632,12 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
// Audio specific styles
|
||||
// Position the progress within the container
|
||||
&--audio .plyr__controls {
|
||||
padding-top: ($control-spacing * 2);
|
||||
padding-top: ($plyr-control-spacing * 2);
|
||||
}
|
||||
&--audio .plyr__progress {
|
||||
bottom: auto;
|
||||
top: 0;
|
||||
background: $off-white;
|
||||
background: $plyr-off-white;
|
||||
}
|
||||
|
||||
// Full screen mode
|
||||
@ -631,32 +666,33 @@ $bp-captions-large: 768px !default; // When captions jump to the larger
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide controls when playing in full screen
|
||||
&--fullscreen--hide-controls&--fullscreen-active&--playing {
|
||||
.plyr__controls {
|
||||
transform: translateY(100%) translateY($control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
}
|
||||
&.plyr--hover .plyr__controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.plyr__captions {
|
||||
bottom: ($control-spacing / 2);
|
||||
transition: bottom .3s .2s ease;
|
||||
}
|
||||
// Hide controls when playing in full screen
|
||||
&--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
|
||||
&.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
|
||||
.plyr__controls {
|
||||
transform: translateY(100%) translateY($plyr-control-spacing / 2);
|
||||
transition: transform .3s .2s ease;
|
||||
}
|
||||
.plyr__captions {
|
||||
bottom: ($plyr-control-spacing / 2);
|
||||
transition: bottom .3s .2s ease;
|
||||
}
|
||||
&.plyr--hover .plyr__controls {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Captions
|
||||
&--fullscreen .plyr__captions,
|
||||
&--fullscreen-active .plyr__captions,
|
||||
&--fullscreen--hide-controls&--fullscreen-active&--playing&--hover &__captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
// Captions
|
||||
&.plyr--fullscreen .plyr__captions,
|
||||
&--fullscreen-active .plyr__captions,
|
||||
&--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
|
||||
top: auto;
|
||||
bottom: 90px;
|
||||
|
||||
@media (min-width: $bp-control-split) {
|
||||
bottom: 60px;
|
||||
}
|
||||
@media (min-width: $plyr-bp-control-split) {
|
||||
bottom: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<title>Captions Off</title>
|
||||
<g>
|
||||
<path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 474 B After Width: | Height: | Size: 443 B |
@ -1,10 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Captions On</title>
|
||||
<g>
|
||||
<path d="M1,2 C0.448,2 0,2.448 0,3 L0,15 C0,15.552 0.448,16 1,16 L17,16 C17.552,16 18,15.552 18,15 L18,3 C18,2.448 17.552,2 17,2 L1,2 Z M2,14 L2,4 L16,4 L16,14 L2,14 L2,14 Z"></path>
|
||||
<rect x="3" y="11" width="3" height="2"></rect>
|
||||
<rect x="12" y="11" width="3" height="2"></rect>
|
||||
<rect x="7" y="11" width="4" height="2"></rect>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 587 B After Width: | Height: | Size: 557 B |
@ -1,10 +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">
|
||||
<title>Enter Fullscreen</title>
|
||||
<g>
|
||||
<g transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) translate(0.000000, 2.000000)">
|
||||
<path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
|
||||
<path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
|
||||
</g>
|
||||
<g transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) translate(0.000000, 2.000000)">
|
||||
<path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
|
||||
<path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 787 B After Width: | Height: | Size: 719 B |
@ -1,10 +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">
|
||||
<title>Exit Fullscreen</title>
|
||||
<g>
|
||||
<g transform="translate(0.000000, 2.000000)">
|
||||
<path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
|
||||
<path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
|
||||
</g>
|
||||
<g transform="translate(0.000000, 2.000000)">
|
||||
<path d="M7.69999981,6.30000001 C7.00064659,5.62264405 6.3,6.3 6.3,6.3 L2,10.6 L2,6 L0,6 L0,13 C0,13.6 0.4,14 1,14 L8,14 L8,12 L3.4,12 L7.7,7.7 C7.7,7.7 8.39935303,6.97735597 7.69999981,6.30000001 Z"></path>
|
||||
<path d="M11,14 L11,12 L16,12 L16,2 L2,2 L2,3 L0,3 L0,1 C0,0.4 0.4,0 1,0 L17,0 C17.6,0 18,0.4 18,1 L18,13 C18,13.6 17.6,14 17,14 L11,14 Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 704 B After Width: | Height: | Size: 637 B |
@ -1,9 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Muted</title>
|
||||
<g transform="translate(0.000000, 2.000000)">
|
||||
<path d="M9.214,0 C9.103,0 8.989,0.032 8.88,0.101 L4.832,2.911 C4.749,2.969 4.65,3 4.549,3 L0.996,3 C0.446,3 1.33226763e-15,3.448 1.33226763e-15,4 L1.33226763e-15,10 C1.33226763e-15,10.552 0.446,11 0.996,11 L4.549,11 C4.651,11 4.749,11.031 4.832,11.089 L8.88,13.899 C8.989,13.968 9.103,14 9.214,14 C9.606,14 9.961,13.6 9.961,13.051 L9.961,0.95 C9.961,0.4 9.606,0.001 9.214,0.001 L9.214,0 Z M7.969,10.834 L5.582,9.177 C5.416,9.062 5.218,8.999 5.016,8.999 L2.491,8.999 C2.216,8.999 1.993,8.775 1.993,8.499 L1.993,5.499 C1.993,5.223 2.216,4.999 2.491,4.999 L5.016,4.999 C5.218,4.999 5.416,4.937 5.582,4.821 L7.969,3.164 L7.969,10.833 L7.969,10.834 Z"></path>
|
||||
<path d="M14.934,6.799 C14.848,5.051 13.42,3.808 12.427,3.15 C11.957,2.838 11.333,3.028 11.102,3.558 L11.064,3.644 C10.876,4.075 11.019,4.583 11.4,4.838 C12.106,5.311 12.986,6.085 13.024,6.903 C13.056,7.579 12.471,8.371 11.361,9.173 C10.963,9.461 10.832,10.012 11.076,10.448 L11.118,10.523 C11.384,10.998 11.984,11.147 12.418,10.835 C14.158,9.584 15.004,8.229 14.934,6.798 L14.934,6.799 Z"></path>
|
||||
<path d="M17.934,6.799 C17.848,5.051 16.42,3.808 15.427,3.15 C14.957,2.838 14.333,3.028 14.102,3.558 L14.064,3.644 C13.876,4.075 14.019,4.583 14.4,4.838 C15.106,5.311 15.986,6.085 16.024,6.903 C16.056,7.579 15.471,8.371 14.361,9.173 C13.963,9.461 13.832,10.012 14.076,10.448 L14.118,10.523 C14.384,10.998 14.984,11.147 15.418,10.835 C17.158,9.584 18.004,8.229 17.934,6.798 L17.934,6.799 Z" transform="translate(15.945467, 6.999165) rotate(-180.000000) translate(-15.945467, -6.999165) "></path>
|
||||
</g>
|
||||
</svg>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@ -1,8 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
|
||||
<svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<path d="M7.7,1.2l0.7,6.4l2.1-2.1c1.9,1.9,1.9,5.1,0,7C9.6,13.5,8.3,14,7,14c-1.3,0-2.6-0.5-3.5-1.5
|
||||
c-1.9-1.9-1.9-5.1,0-7c0.6-0.6,1.4-1.1,2.3-1.3L5.2,2.3C4,2.6,2.9,3.2,2,4.1c-2.7,2.7-2.7,7.1,0,9.9c1.3,1.3,3.1,2,4.9,2
|
||||
c1.9,0,3.6-0.7,4.9-2c2.7-2.7,2.7-7.1,0-9.9l2.2-2.2L7.7,1.2z"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 760 B After Width: | Height: | Size: 505 B |
@ -1,6 +1,5 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Volume</title>
|
||||
<path d="M10.214 2c-0.111 0-0.225 0.032-0.334 0.101l-4.048 2.81c-0.083 0.058-0.182 0.089-0.283 0.089h-3.553c-0.55 0-0.996 0.448-0.996 1v6c0 0.552 0.446 1 0.996 1h3.553c0.102 0 0.2 0.031 0.283 0.089l4.048 2.81c0.109 0.069 0.223 0.101 0.334 0.101 0.392 0 0.747-0.4 0.747-0.949v-12.101c0-0.55-0.355-0.949-0.747-0.949zM8.969 12.834l-2.387-1.657c-0.166-0.115-0.364-0.178-0.566-0.178h-2.525c-0.275 0-0.498-0.224-0.498-0.5v-3c0-0.276 0.223-0.5 0.498-0.5h2.525c0.202 0 0.4-0.062 0.566-0.178l2.387-1.657v7.669z"></path>
|
||||
<path d="M16.934 8.799c-0.086-1.748-1.514-2.991-2.507-3.649-0.47-0.312-1.094-0.122-1.325 0.408l-0.038 0.086c-0.188 0.431-0.045 0.939 0.336 1.194 0.706 0.473 1.586 1.247 1.624 2.065 0.032 0.676-0.553 1.468-1.663 2.27-0.398 0.288-0.529 0.839-0.285 1.275l0.042 0.075c0.266 0.475 0.866 0.624 1.3 0.312 1.74-1.251 2.586-2.606 2.516-4.037z"></path>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1020 B |
Loading…
x
Reference in New Issue
Block a user