Tidy up, fixing destroy
This commit is contained in:
Sam Potts
parent
3605989226
commit
bc61dac4c5
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
File diff suppressed because one or more lines are too long
@ -64,10 +64,36 @@
|
||||
</video>
|
||||
|
||||
<ul>
|
||||
<li class="plyr__cite plyr__cite--video"><small><a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm</small></li>
|
||||
<li class="plyr__cite plyr__cite--audio"><small><a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi</small></li>
|
||||
<li class="plyr__cite plyr__cite--youtube"><small><a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on <span class="color--youtube"><svg class="icon"><use xlink:href="#icon-youtube"/></svg>YouTube</span></small></li>
|
||||
<li class="plyr__cite plyr__cite--vimeo"><small><a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on <span class="color--vimeo"><svg class="icon"><use xlink:href="#icon-vimeo"/></svg>Vimeo</span></small></li>
|
||||
<li class="plyr__cite plyr__cite--video" hidden>
|
||||
<small>
|
||||
<a href="http://viewfromabluemoon.com/" target="_blank">View From A Blue Moon</a> © Brainfarm
|
||||
</small>
|
||||
</li>
|
||||
<li class="plyr__cite plyr__cite--audio" hidden>
|
||||
<small>
|
||||
<a href="http://www.kishibashi.com/" target="_blank">Kishi Bashi – “It All Began With A Burst”</a> © Kishi Bashi
|
||||
</small>
|
||||
</li>
|
||||
<li class="plyr__cite plyr__cite--youtube" hidden>
|
||||
<small>
|
||||
<a href="https://www.youtube.com/watch?v=bTqVqk7FSmY" target="_blank">View From A Blue Moon</a> on
|
||||
<span class="color--youtube">
|
||||
<svg class="icon">
|
||||
<use xlink:href="#icon-youtube"/>
|
||||
</svg> YouTube
|
||||
</span>
|
||||
</small>
|
||||
</li>
|
||||
<li class="plyr__cite plyr__cite--vimeo" hidden>
|
||||
<small>
|
||||
<a href="https://vimeo.com/ondemand/viewfromabluemoon4k" target="_blank">View From A Blue Moon</a> on
|
||||
<span class="color--vimeo">
|
||||
<svg class="icon">
|
||||
<use xlink:href="#icon-vimeo"/>
|
||||
</svg> Vimeo
|
||||
</span>
|
||||
</small>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -185,6 +185,12 @@
|
||||
|
||||
// Set active on parent
|
||||
toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, 'active', true);
|
||||
|
||||
// Show cite
|
||||
[].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) {
|
||||
cite.setAttribute('hidden', '');
|
||||
});
|
||||
document.querySelector('.plyr__cite--' + type).removeAttribute('hidden');
|
||||
}
|
||||
})();
|
||||
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
|
||||
// Base
|
||||
html {
|
||||
height: 100%;
|
||||
background: @body-background fixed;
|
||||
background: @body-background;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
max-width: @container-width;
|
||||
margin: auto;
|
||||
padding: (@padding-base / 2);
|
||||
}
|
||||
|
||||
@ -31,6 +31,7 @@ header {
|
||||
p {
|
||||
.font-size(18);
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
padding-top: (@padding-base * 3);
|
||||
padding-bottom: (@padding-base * 3);
|
||||
@ -39,8 +40,7 @@ header {
|
||||
|
||||
// Sections
|
||||
section {
|
||||
max-width: @example-width-video;
|
||||
margin: 0 auto @padding-base;
|
||||
margin-bottom: @padding-base;
|
||||
|
||||
@media (min-width: @screen-sm) {
|
||||
margin-bottom: (@padding-base * 2);
|
||||
|
||||
@ -3,170 +3,162 @@
|
||||
// ==========================================================================
|
||||
|
||||
nav {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-top: (@padding-base / 2);
|
||||
.font-size();
|
||||
white-space: nowrap;
|
||||
}
|
||||
li + li {
|
||||
margin-left: @padding-base;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-top: (@padding-base / 2);
|
||||
.font-size();
|
||||
white-space: nowrap;
|
||||
}
|
||||
li + li {
|
||||
margin-left: @padding-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Tabs
|
||||
.btn__bar {
|
||||
position: relative;
|
||||
margin: 0 auto @padding-base;
|
||||
max-width: @example-width-video;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
margin: 0 auto @padding-base;
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: @gray-lighter;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: @off-white;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
ul {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
li {
|
||||
margin: 0;
|
||||
|
||||
&:first-child .btn {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
&:last-child .btn {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
& + li .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
&:first-child .btn {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
&:last-child .btn {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
& + li .btn {
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
&.active .btn {
|
||||
&:extend(.btn--primary);
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&.active .btn {
|
||||
&:extend(.btn--primary);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&.active + li .btn:hover {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: relative;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
.icon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
&.active + li .btn:hover {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
position: relative;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 560px) {
|
||||
margin-bottom: (@padding-base * 2);
|
||||
}
|
||||
@media (min-width: 560px) {
|
||||
margin-bottom: (@padding-base * 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Shared
|
||||
.btn,
|
||||
.btn__count {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: @border-radius-base;
|
||||
user-select: none;
|
||||
font-weight: @font-weight-bold;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: @border-radius-base;
|
||||
user-select: none;
|
||||
font-weight: @font-weight-bold;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.btn {
|
||||
padding: (@padding-base / 2) ((@padding-base / 2) + 2);
|
||||
background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%));
|
||||
border: 1px solid @gray-light;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, .05);
|
||||
text-shadow: 0 1px 1px #fff;
|
||||
color: @gray;
|
||||
transition: background .1s ease, color .1s ease;
|
||||
.font-size(@font-size-small);
|
||||
padding: (@padding-base / 2) ((@padding-base / 2) + 2);
|
||||
background: #fff;
|
||||
border: 1px solid @gray-lighter;
|
||||
color: @gray;
|
||||
transition: all .2s ease;
|
||||
.font-size(@font-size-small);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: darken(@gray-light, 8%);
|
||||
color: @gray;
|
||||
outline: 0;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @gray-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
.btn--large {
|
||||
padding: (@padding-base / 2) @padding-base;
|
||||
.font-size();
|
||||
padding: (@padding-base / 2) @padding-base;
|
||||
.font-size();
|
||||
}
|
||||
|
||||
// Styles
|
||||
.btn--primary {
|
||||
background-image: linear-gradient(@link-color, darken(@link-color, 5%));
|
||||
background-color: @link-color;
|
||||
border-color: darken(@link-color, 10%);
|
||||
box-shadow: 0 1px 1px rgba(0,0,0, .15);
|
||||
text-shadow: 0 1px 1px rgba(0,0,0, .1);
|
||||
color: #fff;
|
||||
@border-color: darken(@link-color, 5%);
|
||||
background-image: linear-gradient(@link-color, @border-color);
|
||||
background-color: @link-color;
|
||||
border-color: @border-color;
|
||||
color: #fff;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
border-color: darken(@link-color, 20%);
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
border-color: darken(@border-color, 5%);
|
||||
}
|
||||
}
|
||||
.btn--youtube .icon {
|
||||
color: @color-youtube;
|
||||
color: @color-youtube;
|
||||
}
|
||||
.btn--vimeo .icon {
|
||||
color: @color-vimeo;
|
||||
color: @color-vimeo;
|
||||
}
|
||||
.btn--twitter .icon {
|
||||
color: @color-twitter;
|
||||
color: @color-twitter;
|
||||
}
|
||||
|
||||
// Count bubble
|
||||
.btn__count {
|
||||
position: relative;
|
||||
margin-left: (@padding-base / 2);
|
||||
padding: (@padding-base / 2) (@padding-base * .75);
|
||||
background: #fff;
|
||||
border: 1px solid @gray-light;
|
||||
position: relative;
|
||||
margin-left: (@padding-base / 2);
|
||||
padding: (@padding-base / 2) (@padding-base * .75);
|
||||
background: #fff;
|
||||
border: 1px solid @gray-lighter;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: @arrow-size;
|
||||
height: @arrow-size;
|
||||
left: 1px;
|
||||
top: 50%;
|
||||
margin-top: -(@arrow-size / 2);
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: @arrow-size;
|
||||
height: @arrow-size;
|
||||
left: 1px;
|
||||
top: 50%;
|
||||
margin-top: -(@arrow-size / 2);
|
||||
|
||||
background: inherit;
|
||||
border: inherit;
|
||||
border-width: 1px 0 0 1px;
|
||||
transform: rotate(-45deg) translate(-50%, -50%);
|
||||
}
|
||||
background: inherit;
|
||||
border: inherit;
|
||||
border-width: 1px 0 0 1px;
|
||||
transform: rotate(-45deg) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,17 +30,5 @@ video {
|
||||
|
||||
// Style full supported player
|
||||
.plyr__cite {
|
||||
display: none;
|
||||
margin-top: @padding-base;
|
||||
|
||||
.icon {
|
||||
margin-right: (@padding-base / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
|
||||
.plyr--audio ~ ul .plyr__cite--audio,
|
||||
.plyr--youtube ~ ul .plyr__cite--youtube,
|
||||
.plyr--vimeo ~ ul .plyr__cite--vimeo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -51,22 +51,22 @@ li {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: @link-color;
|
||||
border-bottom: 1px dotted currentColor;
|
||||
transition: background .3s ease, color .3s ease, border .3s ease;
|
||||
transition: color .3s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @gray-dark;
|
||||
border-bottom-color: rgba(0,0,0,0);
|
||||
}
|
||||
&:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
&.logo {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a:focus,
|
||||
button:focus {
|
||||
.tab-focus();
|
||||
}
|
||||
|
||||
.color--vimeo {
|
||||
color: @color-vimeo;
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
@gray-lighter: #dbe3e8;
|
||||
@off-white: #f2f5f7;
|
||||
|
||||
@brand-primary: #3498db;
|
||||
@brand-primary: #22b5ff;
|
||||
@brand-secondary: #02BD9B;
|
||||
|
||||
// Brands
|
||||
@ -18,7 +18,7 @@
|
||||
@color-vimeo: #19b7ed;
|
||||
|
||||
// Base
|
||||
@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);
|
||||
@body-background: #fff;
|
||||
|
||||
// Type
|
||||
@font-size-base: 16;
|
||||
@ -45,4 +45,4 @@
|
||||
|
||||
// Examples
|
||||
@example-width-audio: 520px;
|
||||
@example-width-video: 1200px;
|
||||
@container-width: 800px;
|
||||
|
||||
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
2
notes.md
2
notes.md
@ -24,6 +24,8 @@
|
||||
[ ] Start / end options for all players?
|
||||
[ ] Get quality options for HTML5 somehow (multi source?)
|
||||
[ ] Download button - grab first <source> or src attribute (or maybe use currentSrc?) for HTML5 and links for embedded players
|
||||
[ ] Scale captions size based on video size (in lieu of element queries)
|
||||
[ ] Allow passing YouTube/Vimeo iframe to setup
|
||||
|
||||
#### Bugs
|
||||
[ ] Fix audio setup bug when calling `.setup()` again
|
||||
|
||||
150
src/js/plyr.js
150
src/js/plyr.js
@ -721,6 +721,12 @@
|
||||
|
||||
// Toggle event listener
|
||||
toggleListener: function(elements, events, callback, toggle, passive, capture) {
|
||||
// Bail if no elements
|
||||
if (elements === null || utils.is.undefined(elements)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Allow multiple events
|
||||
events = events.split(' ');
|
||||
|
||||
// Whether the listener is a capturing listener or not
|
||||
@ -774,16 +780,12 @@
|
||||
|
||||
// Bind event handler
|
||||
on: function(element, events, callback, passive, capture) {
|
||||
if (!utils.is.undefined(element)) {
|
||||
utils.toggleListener(element, events, callback, true, passive, capture);
|
||||
}
|
||||
utils.toggleListener(element, events, callback, true, passive, capture);
|
||||
},
|
||||
|
||||
// Unbind event handler
|
||||
off: function(element, events, callback, passive, capture) {
|
||||
if (!utils.is.undefined(element)) {
|
||||
utils.toggleListener(element, events, callback, false, passive, capture);
|
||||
}
|
||||
utils.toggleListener(element, events, callback, false, passive, capture);
|
||||
},
|
||||
|
||||
// Trigger event
|
||||
@ -1189,8 +1191,8 @@
|
||||
reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches
|
||||
};
|
||||
|
||||
// Player instance
|
||||
function Player(media, options) {
|
||||
// Plyr instance
|
||||
function Plyr(media, options) {
|
||||
var player = this;
|
||||
var timers = {};
|
||||
var api = {};
|
||||
@ -3403,9 +3405,6 @@
|
||||
|
||||
// Setup new source
|
||||
function setup() {
|
||||
// Reset embed object
|
||||
player.embed = null;
|
||||
|
||||
// Remove media
|
||||
removeElement(player.media);
|
||||
|
||||
@ -4111,7 +4110,9 @@
|
||||
player.ready = true;
|
||||
|
||||
// Ready event at end of execution stack
|
||||
trigger(player.elements.container, 'ready', true);
|
||||
window.setTimeout(function() {
|
||||
trigger(player.elements.container, 'ready', true);
|
||||
}, 0);
|
||||
|
||||
// Autoplay
|
||||
if (player.config.autoplay) {
|
||||
@ -4120,13 +4121,20 @@
|
||||
}
|
||||
|
||||
// Setup a player
|
||||
function setup(target) {
|
||||
function setup(media) {
|
||||
// We need an element to setup
|
||||
if (target === null || utils.is.undefined(target) || !utils.is.htmlElement(target)) {
|
||||
if (media === null || utils.is.undefined(media) || !utils.is.htmlElement(media)) {
|
||||
error('Setup failed: no suitable element passed');
|
||||
return;
|
||||
}
|
||||
|
||||
// Bail if the element is initialized
|
||||
if (media.plyr) {
|
||||
warn('Target already setup');
|
||||
player = media.plyr;
|
||||
return;
|
||||
}
|
||||
|
||||
// Bail if not enabled
|
||||
if (!player.config.enabled) {
|
||||
error('Setup failed: disabled by config');
|
||||
@ -4140,21 +4148,18 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// Bail if the element is initialized
|
||||
if (target.plyr) {
|
||||
log('Target already setup');
|
||||
return target.plyr;
|
||||
}
|
||||
// Cache original element state for .destroy()
|
||||
player.elements.original = media.cloneNode(true);
|
||||
|
||||
// Set media type based on tag or data attribute
|
||||
// Supported: video, audio, vimeo, youtube
|
||||
var type = target.tagName.toLowerCase();
|
||||
var type = media.tagName.toLowerCase();
|
||||
|
||||
// Different setup based on type
|
||||
switch (type) {
|
||||
case 'div':
|
||||
player.type = target.getAttribute('data-type');
|
||||
player.embedId = target.getAttribute('data-video-id');
|
||||
player.type = media.getAttribute('data-type');
|
||||
player.embedId = media.getAttribute('data-video-id');
|
||||
|
||||
if (utils.is.empty(player.type)) {
|
||||
error('Setup failed: embed type missing');
|
||||
@ -4167,26 +4172,26 @@
|
||||
}
|
||||
|
||||
// Clean up
|
||||
target.removeAttribute('data-type');
|
||||
target.removeAttribute('data-video-id');
|
||||
media.removeAttribute('data-type');
|
||||
media.removeAttribute('data-video-id');
|
||||
break;
|
||||
|
||||
case 'iframe':
|
||||
// Do something with the iframe
|
||||
// TODO: Handle passing an iframe for true progressive enhancement
|
||||
break;
|
||||
|
||||
case 'video':
|
||||
case 'audio':
|
||||
player.type = type;
|
||||
player.config.crossorigin = target.getAttribute('crossorigin') !== null;
|
||||
player.config.autoplay = player.config.autoplay || (target.getAttribute('autoplay') !== null);
|
||||
player.config.inline = target.getAttribute('playsinline') !== null;
|
||||
player.config.loop.active = player.config.loop || (target.getAttribute('loop') !== null);
|
||||
player.config.crossorigin = media.getAttribute('crossorigin') !== null;
|
||||
player.config.autoplay = player.config.autoplay || (media.getAttribute('autoplay') !== null);
|
||||
player.config.inline = media.getAttribute('playsinline') !== null;
|
||||
player.config.loop.active = player.config.loop || (media.getAttribute('loop') !== null);
|
||||
break;
|
||||
|
||||
default:
|
||||
error('Setup failed: unsupported type');
|
||||
return false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Sniff out the browser
|
||||
@ -4201,14 +4206,14 @@
|
||||
// If no native support, bail
|
||||
if (!player.supported.basic) {
|
||||
error('Setup failed: no support');
|
||||
return false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Wrap media
|
||||
player.elements.container = utils.wrap(target, utils.createElement('div'));
|
||||
// Store reference
|
||||
media.plyr = player;
|
||||
|
||||
// Cache original element state for .destroy()
|
||||
player.elements.original = target.cloneNode(true);
|
||||
// Wrap media
|
||||
player.elements.container = utils.wrap(media, utils.createElement('div'));
|
||||
|
||||
// Allow focus to be captured
|
||||
player.elements.container.setAttribute('tabindex', 0);
|
||||
@ -4227,7 +4232,7 @@
|
||||
var events = player.config.events.concat(['setup', 'statechange', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', 'captionsdisabled']);
|
||||
|
||||
utils.on(player.elements.container, events.join(' '), function(event) {
|
||||
log(['event:', event.type].join(' ').trim());
|
||||
log('event: ' + event.type);
|
||||
});
|
||||
}
|
||||
|
||||
@ -4273,7 +4278,7 @@
|
||||
// API
|
||||
// ---------------------------------------
|
||||
// Play
|
||||
Player.prototype.play = function() {
|
||||
Plyr.prototype.play = function() {
|
||||
var player = this;
|
||||
|
||||
if ('play' in player.media) {
|
||||
@ -4285,7 +4290,7 @@
|
||||
};
|
||||
|
||||
// Pause
|
||||
Player.prototype.pause = function() {
|
||||
Plyr.prototype.pause = function() {
|
||||
var player = this;
|
||||
|
||||
if ('pause' in player.media) {
|
||||
@ -4297,7 +4302,7 @@
|
||||
};
|
||||
|
||||
// Toggle playback
|
||||
Player.prototype.togglePlay = function(toggle) {
|
||||
Plyr.prototype.togglePlay = function(toggle) {
|
||||
var player = this;
|
||||
|
||||
// True toggle if nothing passed
|
||||
@ -4315,7 +4320,7 @@
|
||||
};
|
||||
|
||||
// Stop
|
||||
Player.prototype.stop = function() {
|
||||
Plyr.prototype.stop = function() {
|
||||
var player = this;
|
||||
|
||||
player.restart();
|
||||
@ -4326,7 +4331,7 @@
|
||||
};
|
||||
|
||||
// Restart
|
||||
Player.prototype.restart = function() {
|
||||
Plyr.prototype.restart = function() {
|
||||
var player = this;
|
||||
|
||||
// Seek to 0
|
||||
@ -4337,7 +4342,7 @@
|
||||
};
|
||||
|
||||
// Rewind
|
||||
Player.prototype.rewind = function(seekTime) {
|
||||
Plyr.prototype.rewind = function(seekTime) {
|
||||
var player = this;
|
||||
|
||||
// Use default if needed
|
||||
@ -4352,7 +4357,7 @@
|
||||
};
|
||||
|
||||
// Fast forward
|
||||
Player.prototype.forward = function(seekTime) {
|
||||
Plyr.prototype.forward = function(seekTime) {
|
||||
var player = this;
|
||||
|
||||
// Use default if needed
|
||||
@ -4368,7 +4373,7 @@
|
||||
|
||||
// Seek to time
|
||||
// The input parameter can be an event or a number
|
||||
Player.prototype.seek = function(input) {
|
||||
Plyr.prototype.seek = function(input) {
|
||||
var player = this;
|
||||
var targetTime = 0;
|
||||
var paused = player.media.paused;
|
||||
@ -4389,11 +4394,6 @@
|
||||
player.core.updateSeekDisplay(targetTime);
|
||||
|
||||
// Set the current time
|
||||
// Try/catch incase the media isn't set and we're calling seek() from source() and IE moans
|
||||
try {
|
||||
player.media.currentTime = targetTime.toFixed(4);
|
||||
} catch (e) {}
|
||||
|
||||
// Embeds
|
||||
if (utils.inArray(types.embed, player.type)) {
|
||||
switch (player.type) {
|
||||
@ -4423,6 +4423,8 @@
|
||||
|
||||
// Trigger seeking
|
||||
player.core.trigger(player.media, 'seeking');
|
||||
} else {
|
||||
player.media.currentTime = targetTime.toFixed(4);
|
||||
}
|
||||
|
||||
// Logging
|
||||
@ -4433,7 +4435,7 @@
|
||||
};
|
||||
|
||||
// Set volume
|
||||
Player.prototype.setVolume = function(volume) {
|
||||
Plyr.prototype.setVolume = function(volume) {
|
||||
var player = this;
|
||||
var max = 10;
|
||||
var min = 0;
|
||||
@ -4494,7 +4496,7 @@
|
||||
};
|
||||
|
||||
// Increase volume
|
||||
Player.prototype.increaseVolume = function(step) {
|
||||
Plyr.prototype.increaseVolume = function(step) {
|
||||
var player = this;
|
||||
var volume = player.media.muted ? 0 : (player.media.volume * 10);
|
||||
|
||||
@ -4509,7 +4511,7 @@
|
||||
};
|
||||
|
||||
// Decrease volume
|
||||
Player.prototype.decreaseVolume = function(step) {
|
||||
Plyr.prototype.decreaseVolume = function(step) {
|
||||
var player = this;
|
||||
var volume = player.media.muted ? 0 : (player.media.volume * 10);
|
||||
|
||||
@ -4524,7 +4526,7 @@
|
||||
};
|
||||
|
||||
// Toggle mute
|
||||
Player.prototype.toggleMute = function(muted) {
|
||||
Plyr.prototype.toggleMute = function(muted) {
|
||||
var player = this;
|
||||
|
||||
// If the method is called without parameter, toggle based on current value
|
||||
@ -4566,7 +4568,7 @@
|
||||
};
|
||||
|
||||
// Set playback speed
|
||||
Player.prototype.setSpeed = function(speed) {
|
||||
Plyr.prototype.setSpeed = function(speed) {
|
||||
var player = this;
|
||||
|
||||
// Load speed from storage or default value
|
||||
@ -4606,7 +4608,7 @@
|
||||
// Toggle loop
|
||||
// TODO: Finish logic
|
||||
// TODO: Set the indicator on load as user may pass loop as config
|
||||
Player.prototype.loop = function(type) {
|
||||
Plyr.prototype.loop = function(type) {
|
||||
var player = this;
|
||||
|
||||
// Set default to be a true toggle
|
||||
@ -4689,7 +4691,7 @@
|
||||
};
|
||||
|
||||
// Add common function to retrieve media source
|
||||
Player.prototype.source = function(source) {
|
||||
Plyr.prototype.source = function(source) {
|
||||
var player = this;
|
||||
|
||||
// If object or string, parse it
|
||||
@ -4727,7 +4729,7 @@
|
||||
};
|
||||
|
||||
// Set or get poster
|
||||
Player.prototype.poster = function(source) {
|
||||
Plyr.prototype.poster = function(source) {
|
||||
var player = this;
|
||||
|
||||
if (!utils.is.string(source)) {
|
||||
@ -4743,7 +4745,7 @@
|
||||
};
|
||||
|
||||
// Toggle captions
|
||||
Player.prototype.toggleCaptions = function(show) {
|
||||
Plyr.prototype.toggleCaptions = function(show) {
|
||||
var player = this;
|
||||
|
||||
// If there's no full support, or there's no caption toggle
|
||||
@ -4778,7 +4780,7 @@
|
||||
};
|
||||
|
||||
// Select active caption
|
||||
Player.prototype.language = function(language) {
|
||||
Plyr.prototype.language = function(language) {
|
||||
var player = this;
|
||||
|
||||
if (utils.is.string(language)) {
|
||||
@ -4801,7 +4803,7 @@
|
||||
|
||||
// Toggle fullscreen
|
||||
// Requires user input event
|
||||
Player.prototype.toggleFullscreen = function(event) {
|
||||
Plyr.prototype.toggleFullscreen = function(event) {
|
||||
var player = this;
|
||||
|
||||
// Save scroll position
|
||||
@ -4873,7 +4875,7 @@
|
||||
// Toggle picture-in-picture
|
||||
// TODO: update player with state, support, enabled
|
||||
// TODO: detect outside changes
|
||||
Player.prototype.togglePictureInPicture = function(toggle) {
|
||||
Plyr.prototype.togglePictureInPicture = function(toggle) {
|
||||
var player = this;
|
||||
var states = {
|
||||
pip: 'picture-in-picture',
|
||||
@ -4899,7 +4901,7 @@
|
||||
|
||||
// Trigger airplay
|
||||
// TODO: update player with state, support, enabled
|
||||
Player.prototype.airPlay = function() {
|
||||
Plyr.prototype.airPlay = function() {
|
||||
var player = this;
|
||||
|
||||
// Bail if no support
|
||||
@ -4915,7 +4917,7 @@
|
||||
};
|
||||
|
||||
// Show the player controls in fullscreen mode
|
||||
Player.prototype.toggleControls = function(toggle) {
|
||||
Plyr.prototype.toggleControls = function(toggle) {
|
||||
var player = this;
|
||||
|
||||
// Don't hide if config says not to, it's audio, or not ready or loading
|
||||
@ -4987,9 +4989,10 @@
|
||||
};
|
||||
|
||||
// Event listener
|
||||
Player.prototype.on = function(event, callback) {
|
||||
Plyr.prototype.on = function(event, callback) {
|
||||
var player = this;
|
||||
|
||||
// Listen for events on container
|
||||
utils.on(player.elements.container, event, callback);
|
||||
|
||||
// Allow chaining
|
||||
@ -4997,14 +5000,14 @@
|
||||
};
|
||||
|
||||
// Check for support
|
||||
Player.prototype.supports = function(mimeType) {
|
||||
Plyr.prototype.supports = function(mimeType) {
|
||||
return support.mime(this, mimeType);
|
||||
};
|
||||
|
||||
// Destroy an instance
|
||||
// Event listeners are removed when elements are removed
|
||||
// http://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory
|
||||
Player.prototype.destroy = function(callback, restore) {
|
||||
Plyr.prototype.destroy = function(callback, restore) {
|
||||
var player = this;
|
||||
|
||||
// Type specific stuff
|
||||
@ -5045,7 +5048,7 @@
|
||||
|
||||
function done() {
|
||||
// Bail if already destroyed
|
||||
if (!player.ready) {
|
||||
if (player === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -5066,9 +5069,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Remove ready state
|
||||
player.ready = false;
|
||||
|
||||
// Event
|
||||
player.core.trigger(player.elements.original, 'destroyed', true);
|
||||
|
||||
@ -5076,14 +5076,14 @@
|
||||
if (utils.is.function(callback)) {
|
||||
callback.call(player.elements.original);
|
||||
}
|
||||
}
|
||||
|
||||
// Allow chaining
|
||||
return player;
|
||||
// Allow chaining
|
||||
player = null;
|
||||
}
|
||||
};
|
||||
|
||||
// Get the duration (or custom if set)
|
||||
Player.prototype.getDuration = function() {
|
||||
Plyr.prototype.getDuration = function() {
|
||||
var player = this;
|
||||
|
||||
// It should be a number, but parse it just incase
|
||||
@ -5101,5 +5101,5 @@
|
||||
return (isNaN(duration) ? mediaDuration : duration);
|
||||
};
|
||||
|
||||
return Player;
|
||||
return Plyr;
|
||||
});
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
@plyr-sr-only-important: true;
|
||||
|
||||
// Colors
|
||||
@plyr-color-main: #3498db;
|
||||
@plyr-color-main: #22b5ff;
|
||||
|
||||
// Font
|
||||
@plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user