Safari fix (fixes #96), YouTube tweaks, docs
This commit is contained in:
Sam Potts
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr
|
||||
// plyr.js v1.2.2
|
||||
// plyr.js v1.2.3
|
||||
// https://github.com/selz/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
@ -529,12 +529,12 @@
|
||||
},
|
||||
browserPrefixes = "webkit moz o ms khtml".split(" ");
|
||||
|
||||
// check for native support
|
||||
// Check for native support
|
||||
if (typeof document.cancelFullScreen != "undefined") {
|
||||
fullscreen.supportsFullScreen = true;
|
||||
}
|
||||
else {
|
||||
// check for fullscreen support by vendor prefix
|
||||
// Check for fullscreen support by vendor prefix
|
||||
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
|
||||
fullscreen.prefix = browserPrefixes[i];
|
||||
|
||||
@ -551,12 +551,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Safari doesn't support the ALLOW_KEYBOARD_INPUT flag (for security) so set it to not supported
|
||||
// https://bugs.webkit.org/show_bug.cgi?id=121496
|
||||
if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
|
||||
fullscreen.supportsFullScreen = false;
|
||||
}
|
||||
|
||||
// Update methods to do something useful
|
||||
if (fullscreen.supportsFullScreen) {
|
||||
// Yet again Microsoft awesomeness,
|
||||
@ -578,7 +572,7 @@
|
||||
}
|
||||
};
|
||||
fullscreen.requestFullScreen = function(element) {
|
||||
return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
|
||||
return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")]();
|
||||
};
|
||||
fullscreen.cancelFullScreen = function() {
|
||||
return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + (this.prefix == "ms" ? "ExitFullscreen" : "CancelFullScreen")]();
|
||||
@ -852,11 +846,11 @@
|
||||
// Cache the container
|
||||
player.videoContainer = wrapper;
|
||||
}
|
||||
}
|
||||
|
||||
// YouTube
|
||||
if(player.type == "youtube") {
|
||||
_setupYouTube(player.media.getAttribute("data-video-id"));
|
||||
}
|
||||
// YouTube
|
||||
if(player.type == "youtube") {
|
||||
_setupYouTube(player.media.getAttribute("data-video-id"));
|
||||
}
|
||||
|
||||
// Autoplay
|
||||
@ -910,7 +904,7 @@
|
||||
videoId: id,
|
||||
playerVars: {
|
||||
autoplay: 0,
|
||||
controls: 0,
|
||||
controls: (player.supported.full ? 0 : 1),
|
||||
vq: "hd720",
|
||||
rel: 0,
|
||||
showinfo: 0,
|
||||
@ -953,14 +947,16 @@
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// Only setup controls once
|
||||
if(!player.container.querySelectorAll(config.selectors.controls).length) {
|
||||
_setupInterface();
|
||||
}
|
||||
if(player.supported.full) {
|
||||
// Only setup controls once
|
||||
if(!player.container.querySelectorAll(config.selectors.controls).length) {
|
||||
_setupInterface();
|
||||
}
|
||||
|
||||
// Display duration if available
|
||||
if(config.displayDuration) {
|
||||
_displayDuration();
|
||||
// Display duration if available
|
||||
if(config.displayDuration) {
|
||||
_displayDuration();
|
||||
}
|
||||
}
|
||||
},
|
||||
onStateChange: function(event) {
|
||||
@ -1692,10 +1688,12 @@
|
||||
}
|
||||
_on(window, "keyup", function(event) {
|
||||
var code = (event.keyCode ? event.keyCode : event.which);
|
||||
|
||||
if(code == 9) { checkFocus(); }
|
||||
});
|
||||
for (var button in player.buttons) {
|
||||
var element = player.buttons[button];
|
||||
|
||||
_on(element, "blur", function() {
|
||||
_toggleClass(element, "tab-focus", false);
|
||||
});
|
||||
@ -1982,7 +1980,7 @@
|
||||
|
||||
case "youtube":
|
||||
basic = true;
|
||||
full = !oldIE;
|
||||
full = (!oldIE && !iPhone);
|
||||
break;
|
||||
|
||||
default:
|
||||
|
||||
@ -316,6 +316,8 @@
|
||||
|
||||
// Tooltips
|
||||
&-tooltip {
|
||||
@border-base: darken(@tooltip-bg, 8%);
|
||||
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
@ -325,6 +327,7 @@
|
||||
|
||||
opacity: 0;
|
||||
background: @tooltip-bg;
|
||||
border: 1px solid @border-base;
|
||||
border-radius: @tooltip-radius;
|
||||
color: @tooltip-color;
|
||||
font-size: @font-size-small;
|
||||
@ -334,20 +337,23 @@
|
||||
transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
|
||||
|
||||
// Arrow
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
bottom: -@tooltip-arrow-size;
|
||||
margin-left: -@tooltip-arrow-size;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transition: inherit;
|
||||
border-style: solid;
|
||||
border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size;
|
||||
border-color: @controls-bg transparent transparent;
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: @tooltip-bg;
|
||||
transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
|
||||
|
||||
@arrow-border-color: darken(@border-base, 5%);
|
||||
border: 1px solid rgba(red(@arrow-border-color), green(@arrow-border-color), blue(@arrow-border-color), .8);
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
}
|
||||
label:hover .player-tooltip,
|
||||
|
||||
@ -314,6 +314,8 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
||||
|
||||
// Tooltips
|
||||
&-tooltip {
|
||||
$border-base: darken($tooltip-bg, 8%);
|
||||
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
@ -323,6 +325,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
||||
|
||||
opacity: 0;
|
||||
background: $tooltip-bg;
|
||||
border: 1px solid $border-base;
|
||||
border-radius: $tooltip-radius;
|
||||
color: $tooltip-color;
|
||||
font-size: $font-size-small;
|
||||
@ -333,25 +336,28 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||
|
||||
// Arrow
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
bottom: -$tooltip-arrow-size;
|
||||
margin-left: -$tooltip-arrow-size;
|
||||
width: 0;
|
||||
height: 0;
|
||||
transition: inherit;
|
||||
border-style: solid;
|
||||
border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size;
|
||||
border-color: $controls-bg transparent transparent;
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: $tooltip-bg;
|
||||
transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
|
||||
|
||||
$arrow-border-color: darken($border-base, 5%);
|
||||
border: 1px solid rgba(red($arrow-border-color), green($arrow-border-color), blue($arrow-border-color), .8);
|
||||
border-width: 0 1px 1px 0;
|
||||
}
|
||||
}
|
||||
label:hover .player-tooltip,
|
||||
input:focus + label .player-tooltip,
|
||||
input.tab-focus:focus + label .player-tooltip,
|
||||
button:hover .player-tooltip,
|
||||
button:focus .player-tooltip {
|
||||
button.tab-focus:focus .player-tooltip {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
|
||||
Reference in New Issue
Block a user