Compare commits

..

12 Commits

8 changed files with 222 additions and 142 deletions

View File

@ -1,13 +1,11 @@
// ==========================================================================
// Plyr
// plyr.js v1.0.0
// plyr.js v1.0.6
// https://github.com/sampotts/plyr
// ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/
// ==========================================================================
/*global ActiveXObject*/
(function (api) {
"use strict";
@ -48,21 +46,30 @@
playing: "playing",
muted: "muted",
captions: {
active: "captions-active",
enabled: "captions-enabled"
enabled: "captions-enabled",
active: "captions-active"
},
fullscreen: {
enabled: "fullscreen-enabled"
enabled: "fullscreen-enabled",
active: "fullscreen-active"
}
},
captions: {
defaultActive: false
},
fullscreen: {
enabled: true
enabled: true,
fallback: true
}
};
// Debugging
function _log(text, error) {
if(config.debug && window.console) {
console[(error ? "error" : "log")](text);
}
}
// Credits: http://paypal.github.io/accessible-html5-video-player/
// Unfortunately, due to scattered support, browser sniffing is required
function _browserSniff() {
@ -182,6 +189,11 @@
element.addEventListener(event, callback, false);
}
// Unbind event
function _off(element, event, callback) {
element.removeEventListener(event, callback, false);
}
// Get click position relative to parent
// http://www.kirupa.com/html5/getting_mouse_click_position.htm
function _getClickPosition(event) {
@ -247,9 +259,14 @@
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullscreen.prefix = browserPrefixes[i];
if (typeof document[fullscreen.prefix + "CancelFullScreen" ] != "undefined" ) {
if (typeof document[fullscreen.prefix + "CancelFullScreen"] != "undefined") {
fullscreen.supportsFullScreen = true;
break;
}
// Special case for MS (when isn't it?)
else if (typeof document.msExitFullscreen != "undefined" && document.msFullscreenEnabled) {
fullscreen.prefix = "ms";
fullscreen.supportsFullScreen = true;
break;
}
}
@ -263,7 +280,9 @@
// Update methods to do something useful
if (fullscreen.supportsFullScreen) {
fullscreen.fullScreenEventName = fullscreen.prefix + "fullscreenchange";
// Yet again Microsoft awesomeness,
// Sometimes the prefix is "ms", sometimes "MS" to keep you on your toes
fullscreen.fullScreenEventName = (fullscreen.prefix == "ms" ? "MSFullscreenChange" : fullscreen.prefix + "fullscreenchange");
fullscreen.isFullScreen = function() {
switch (this.prefix) {
@ -271,15 +290,20 @@
return document.fullScreen;
case "webkit":
return document.webkitIsFullScreen;
case "ms":
// Docs say document.msFullScreenElement returns undefined
// if no element is full screem but it returns null, cheers
// https://msdn.microsoft.com/en-us/library/ie/dn265028%28v=vs.85%29.aspx
return (document.msFullscreenElement !== null);
default:
return document[this.prefix + "FullScreen"];
}
};
fullscreen.requestFullScreen = function(element) {
return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + "RequestFullScreen"](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
};
fullscreen.cancelFullScreen = function() {
return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + "CancelFullScreen"]();
return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + (this.prefix == "ms" ? "ExitFullscreen" : "CancelFullScreen")]();
};
fullscreen.element = function() {
return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"];
@ -353,12 +377,20 @@
return _getElements(selector)[0];
}
// Determine if we're in an iframe
function _inFrame() {
try {
return window.self !== window.top;
}
catch (e) {
return true;
}
}
// Insert controls
function _injectControls() {
// Insert custom video controls
if (config.debug) {
console.log("Injecting custom controls");
}
_log("Injecting custom controls");
// Use specified html
// Need to do a default?
@ -408,7 +440,7 @@
// If there's no media, bail
if(!player.media) {
console.error("No audio or video element found!");
_log("No audio or video element found!", true);
return false;
}
@ -471,14 +503,10 @@
player.captionExists = true;
if (captionSrc === "") {
player.captionExists = false;
if (config.debug) {
console.log("No caption track found.");
}
_log("No caption track found.");
}
else {
if (config.debug) {
console.log("Caption track found; URI: " + captionSrc);
}
_log("Caption track found; URI: " + captionSrc);
}
// If no caption file exists, hide container for caption text
@ -494,13 +522,13 @@
(player.browserName === "IE" && player.browserMajorVersion === 11) ||
(player.browserName === "Firefox" && player.browserMajorVersion >= 31) ||
(player.browserName === "Safari" && player.browserMajorVersion >= 7)) {
if (config.debug) {
console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+");
}
// set to false so skips to "manual" captioning
// Debugging
_log("Detected IE 10/11 or Firefox 31+ or Safari 7+");
// Set to false so skips to "manual" captioning
player.isTextTracks = false;
// turn off native caption rendering to avoid double captions [doesn"t work in Safari 7; see patch below]
// Turn off native caption rendering to avoid double captions [doesn"t work in Safari 7; see patch below]
track = {};
tracks = player.media.textTracks;
for (j=0; j < tracks.length; j++) {
@ -511,9 +539,7 @@
// Rendering caption tracks - native support required - http://caniuse.com/webvtt
if (player.isTextTracks) {
if (config.debug) {
console.log("textTracks supported");
}
_log("textTracks supported");
_showCaptions(player);
track = {};
@ -534,9 +560,7 @@
}
// Caption tracks not natively supported
else {
if (config.debug) {
console.log("textTracks not supported so rendering captions manually");
}
_log("textTracks not supported so rendering captions manually");
_showCaptions(player);
// Render captions from array at appropriate time
@ -561,55 +585,46 @@
if (captionSrc !== "") {
// Create XMLHttpRequest Object
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE8
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (config.debug) {
console.log("xhr = 200");
}
player.captions = [];
var records = [],
record,
req = xhr.responseText;
records = req.split("\n\n");
for (var r=0; r < records.length; r++) {
record = records[r];
player.captions[r] = [];
player.captions[r] = record.split("\n");
}
// Remove first element ("VTT")
player.captions.shift();
if (config.debug) {
console.log("Successfully loaded the caption file via ajax.");
}
_log("Successfully loaded the caption file via ajax.");
}
else {
if (config.debug) {
console.log("There was a problem loading the caption file via ajax.");
}
_log("There was a problem loading the caption file via ajax.", true);
}
}
}
xhr.open("get", captionSrc, true);
xhr.send();
}
}
// If Safari 7, removing track from DOM [see "turn off native caption rendering" above]
if (player.browserName === "Safari" && player.browserMajorVersion === 7) {
if (config.debug) {
console.log("Safari 7 detected; removing track from DOM");
}
_log("Safari 7 detected; removing track from DOM");
tracks = player.media.getElementsByTagName("track");
player.media.removeChild(tracks[0]);
}
}
@ -626,15 +641,17 @@
// Setup fullscreen
function _setupFullscreen() {
if(player.type === "video" && config.fullscreen.enabled) {
if(fullscreen.supportsFullScreen) {
if(config.debug) {
console.log("Fullscreen enabled");
}
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
if(nativeSupport || (config.fullscreen.fallback && !_inFrame())) {
_log((nativeSupport ? "Native" : "Fallback") + " fullscreen enabled");
// Add styling hook
_toggleClass(player.container, config.classes.fullscreen.enabled, true);
}
else if(config.debug) {
console.warn("Fullscreen not supported");
else {
_log("Fullscreen not supported and fallback disabled.");
}
}
}
@ -713,12 +730,52 @@
// Toggle fullscreen
function _toggleFullscreen() {
// Check for native support
var nativeSupport = fullscreen.supportsFullScreen;
// If it's a fullscreen change event, it's probably a native close
if(event.type === fullscreen.fullScreenEventName) {
config.fullscreen.active = fullscreen.isFullScreen();
}
// If there's native support, use it
else if(nativeSupport) {
// Request fullscreen
if(!fullscreen.isFullScreen()) {
fullscreen.requestFullScreen(player.container);
}
// Bail from fullscreen
else {
fullscreen.cancelFullScreen();
}
// Check if we're actually full screen (it could fail)
config.fullscreen.active = fullscreen.isFullScreen();
}
else {
// Otherwise, it's a simple toggle
config.fullscreen.active = !config.fullscreen.active;
// Bind/unbind escape key
if(config.fullscreen.active) {
_on(document, "keyup", _handleEscapeFullscreen);
document.body.style.overflow = "hidden";
}
else {
_off(document, "keyup", _handleEscapeFullscreen);
document.body.style.overflow = "";
}
}
// Set class hook
_toggleClass(player.container, config.classes.fullscreen.active, config.fullscreen.active);
}
// Bail from faux-fullscreen
function _handleEscapeFullscreen(event) {
// If it's a keypress and not escape, bail
if((event.which || event.charCode || event.keyCode) === 27 && config.fullscreen.active) {
_toggleFullscreen();
}
}
// Set volume
@ -772,24 +829,6 @@
// Listen for events
function _listeners() {
// Fullscreen
_on(player.buttons.fullscreen, "click", _toggleFullscreen);
// Click video
if(player.type === "video" && config.click) {
_on(player.videoContainer, "click", function() {
if(player.media.paused) {
_play();
}
else if(player.media.ended) {
_restart();
}
else {
_pause();
}
});
}
// Play
_on(player.buttons.play, "click", function() {
_play();
@ -825,6 +864,27 @@
_toggleMute(this.checked);
});
// Fullscreen
_on(player.buttons.fullscreen, "click", _toggleFullscreen);
// Handle user exiting fullscreen by escaping etc
_on(document, fullscreen.fullScreenEventName, _toggleFullscreen);
// Click video
if(player.type === "video" && config.click) {
_on(player.videoContainer, "click", function() {
if(player.media.paused) {
_play();
}
else if(player.media.ended) {
_restart();
}
else {
_pause();
}
});
}
// Duration
_on(player.media, "timeupdate", function() {
player.secs = parseInt(player.media.currentTime % 60);
@ -884,16 +944,12 @@
player.browserMajorVersion = player.browserInfo[1];
// Debug info
if(config.debug) {
console.log(player.browserName + " " + player.browserMajorVersion);
}
_log(player.browserName + " " + player.browserMajorVersion);
// If IE8, stop customization (use fallback)
// If IE9, stop customization (use native controls)
if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) {
if(config.debug) {
console.error("Browser not suppported.");
}
_log("Browser not suppported.", true);
return false;
}
@ -968,7 +1024,9 @@
var element = elements[i];
// Setup a player instance and add to the element
if(typeof element.plyr === "undefined") {
element.plyr = new Plyr(element);
}
// Add to return array
players.push(element.plyr);

View File

@ -6,8 +6,6 @@
@import "docs/normalize.less";
// Mixins
@import "docs/mixins.less";
// Fonts
@import "docs/fontface.less";
// Variables
// ---------------------------------------
@ -19,28 +17,36 @@
// Elements
@link-color: @blue;
@padding-base: 20px;
// Breakpoints
@screen-md: 768px;
// BORDER-BOX ALL THE THINGS!
// http://paulirish.com/2012/box-sizing-border-box-ftw/
*, *::after, *::before {
box-sizing: border-box;
}
// Base
html {
font-size: 62.5%;
//font-size: 62.5%;
}
body {
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
background: #fff;
.font-size(16);
//.font-size(16);
line-height: 1.5;
text-align: center;
color: #6D797F;
}
// Type
h1,
h2 {
letter-spacing: -.025em;
color: #2E3C44;
margin: 0 0 10px;
margin: 0 0 (@padding-base / 2);
line-height: 1.2;
.font-smoothing();
}
@ -50,20 +56,38 @@ h1 {
}
p,
small {
margin: 0 0 20px;
margin: 0 0 @padding-base;
}
small {
display: block;
padding: 0 (@padding-base / 2);
.font-size(14);
}
// Header
header {
padding: 60px 0;
margin-bottom: 20px;
padding: @padding-base;
margin-bottom: @padding-base;
p {
.font-size(18);
}
@media (min-width: 560px) {
padding-top: (@padding-base * 3);
padding-bottom: (@padding-base * 3);
}
}
// Sections
section {
padding-bottom: @padding-base;
@media (min-width: 560px) {
padding-bottom: (@padding-base * 2);
}
}
// Links & Buttons
a {
text-decoration: none;
color: @link-color;
@ -80,7 +104,7 @@ a {
}
.btn {
display: inline-block;
padding: 10px 25px;
padding: (@padding-base / 2) (@padding-base * 1.5);
background: @link-color;
border: 0;
color: #fff;
@ -95,10 +119,6 @@ a {
}
}
section {
padding-bottom: 80px;
}
// Players
.example-audio .player {
max-width: 480px;
@ -108,10 +128,14 @@ section {
}
.example-audio .player,
.example-video .player {
margin: 0 auto 20px;
margin: 0 auto @padding-base;
&:fullscreen,
&-fullscreen {
&-fullscreen,
&.fullscreen-active {
max-width: none;
}
}
// Fonts
// Last to not block rendering
@import "docs/fontface.less";

View File

@ -22,10 +22,11 @@
}
// Use rems for font sizing
// Leave <body> at 100%/16px
// ---------------------------------------
.font-size(@font-size: 16){
@rem: (@font-size / 10);
font-size: @font-size * 1px;
@rem: round((@font-size / 16), 1);
font-size: (@font-size * 1px);
font-size: ~"@{rem}rem";
}

View File

@ -23,11 +23,16 @@
// Range
@range-track-height: 6px;
@range-track-bg: @gray;
@range-thumb-height: (@range-track-height * 2);
@range-thumb-width: (@range-track-height * 2);
@range-thumb-bg: @control-color;
@range-thumb-bg-focus: @control-color-active;
// Breakpoints
@bp-control-split: 560px; // When controls split into left/right
@bg-captions-large: 768px; // When captions jump to the larger font size
// Utility classes & mixins
// -------------------------------
// Screen reader only
@ -67,7 +72,7 @@
}
.range-track() {
height: @range-track-height;
background: @gray;
background: @range-track-bg;
border: 0;
border-radius: (@range-track-height / 2);
}
@ -123,11 +128,16 @@
min-height: 2.5em;
color: #fff;
font-size: 16px;
text-shadow: 0 1px 1px rgba(0,0,0, .75);
font-weight: 600;
text-shadow:
-1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5),
1px -1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5),
-1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5),
1px 1px 0 rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .5);
text-align: center;
.font-smoothing();
@media (min-width: 560px) {
@media (min-width: @bg-captions-large) {
font-size: 24px;
}
}
@ -143,13 +153,14 @@
padding: (@control-spacing * 2) @control-spacing @control-spacing;
background: @controls-bg;
line-height: 1;
text-align: center;
// Layout
&-sound {
display: block;
margin: @control-spacing auto 0;
}
@media (min-width: 560px) {
@media (min-width: @bp-control-split) {
&-playback {
float: left;
}
@ -192,17 +203,17 @@
background: transparent;
overflow: hidden;
}
button:hover,
label:hover {
background: @control-color-active;
input:focus + label,
button:focus {
.tab-focus();
svg {
fill: #fff;
}
}
input:focus + label,
button:focus {
.tab-focus();
button:hover,
input + label:hover {
background: @control-color-active;
svg {
fill: #fff;
@ -338,15 +349,15 @@
// Full screen mode
&-fullscreen,
&:fullscreen {
position: absolute;
&.fullscreen-active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 999999;
z-index: 10000000;
.player-video-wrapper {
height: 100%;
@ -359,15 +370,13 @@
top: auto;
bottom: 90px;
@media (min-width: 560px) and (max-width: 767px) {
@media (min-width: @bp-control-split) and (max-width: (@bg-captions-large - 1)) {
bottom: 60px;
}
@media (min-width: 768px) {
@media (min-width: @bg-captions-large) {
bottom: 80px;
}
}
}
.player-controls {
position: absolute;

2
dist/css/docs.css vendored
View File

@ -1 +1 @@
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;font-size:16px;font-size:1.6rem;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:6.4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;font-size:14px;font-size:1.4rem}header{padding:60px 0;margin-bottom:20px}header p{font-size:18px;font-size:1.8rem}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 25px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}section{padding-bottom:80px}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player:-webkit-full-screen,.example-video .player-fullscreen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-moz-full-screen,.example-video .player-fullscreen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:-ms-fullscreen,.example-video .player-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player-fullscreen,.example-audio .player:fullscreen,.example-video .player-fullscreen,.example-video .player:fullscreen{max-width:none}
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}*,::after,::before{box-sizing:border-box}body{font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;line-height:1.5;text-align:center;color:#6D797F}h1,h2{letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}h1{font-size:64px;font-size:4rem;color:#3498DB}p,small{margin:0 0 20px}small{display:block;padding:0 10px;font-size:14px;font-size:.9rem}header{padding:20px;margin-bottom:20px}header p{font-size:18px;font-size:1.1rem}@media (min-width:560px){header{padding-top:60px;padding-bottom:60px}}section{padding-bottom:20px}@media (min-width:560px){section{padding-bottom:40px}}a{text-decoration:none;color:#3498db;border-bottom:1px solid currentColor;transition:all .3s ease}a:focus,a:hover{color:#000}a:focus{outline:#343f4a dotted thin;outline-offset:1px}.btn{display:inline-block;padding:10px 30px;background:#3498db;border:0;color:#fff;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:600;border-radius:3px}.btn:focus,.btn:hover{color:#fff;background:#258cd1}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}.example-audio .player,.example-video .player{margin:0 auto 20px}.example-audio .player-fullscreen,.example-audio .player.fullscreen-active,.example-video .player-fullscreen,.example-video .player.fullscreen-active{max-width:none}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Medium.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Medium.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Medium.ttf) format("truetype");font-style:normal;font-weight:400}@font-face{font-family:Avenir;src:url(../../assets/fonts/AvenirLTStd-Heavy.woff2) format("woff2"),url(../../assets/fonts/AvenirLTStd-Heavy.woff) format("woff"),url(../../assets/fonts/AvenirLTStd-Heavy.ttf) format("truetype");font-style:normal;font-weight:600}

2
dist/css/plyr.css vendored

File diff suppressed because one or more lines are too long

2
dist/js/plyr.js vendored

File diff suppressed because one or more lines are too long

View File

@ -30,9 +30,7 @@
<!-- Fallback for browsers that don't support the <video> element -->
<div>
<a href="//cdn.sampotts.me/plyr/movie.mp4">
<img src="//cdn.sampotts.me/plyr/poster.jpg" alt="Download">
</a>
<a href="//cdn.sampotts.me/plyr/movie.mp4">Download</a>
</div>
</video>
</div>
@ -44,6 +42,7 @@
<audio controls>
<!-- Audio files -->
<source src="//cdn.sampotts.me/plyr/logistics-96-sample.mp3" type="audio/mp3">
<source src="//cdn.sampotts.me/plyr/logistics-96-sample.ogg" type="application/ogg">
<!-- Fallback for browsers that don't support the <audio> element -->
<div>
@ -56,18 +55,7 @@
<!-- Load SVG defs -->
<script>
(function(d,p){
var a=new XMLHttpRequest(),
b=d.body;
a.open("GET",p,!0);
a.send();
a.onload=function(){
var c=d.createElement("div");
c.style.display="none";
c.innerHTML=a.responseText;
b.insertBefore(c,b.childNodes[0])
}
})(document,"dist/svg/sprite.svg");
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"dist/svg/sprite.svg");
</script>
<!-- Core player -->