ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Full screen improvements, tweaked examples

Browse Source
This commit is contained in:
Sam Potts 2015-02-15 14:35:30 +11:00
parent 21c20614d5
commit 0190e161b6
12 changed files with 95 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/js/docs.js
View File

@ -6,12 +6,12 @@
// Register a callback // Register a callback
simpleMedia.on("setup", function() { simpleMedia.on("setup", function() {
console.log(this); //console.log(this);
}); });
//execute shout //execute shout
simpleMedia.setup({ simpleMedia.setup({
debug: true, //debug: true,
title: "PayPal demo", title: "Video demo",
html: templates.controls.render({}) html: templates.controls.render({})
}); });

30
assets/js/simple-media.js
View File

@ -65,8 +65,8 @@
} }
}; };
// Credits: http://paypal.github.io/accessible-html5-video-player/
// Unfortunately, due to scattered support, browser sniffing is required // Unfortunately, due to scattered support, browser sniffing is required
// http://paypal.github.io/accessible-html5-video-player/
function browserSniff() { function browserSniff() {
var nAgt = navigator.userAgent, var nAgt = navigator.userAgent,
browserName = navigator.appName, browserName = navigator.appName,
@ -128,9 +128,7 @@
// Return data // Return data
return [browserName, majorVersion]; return [browserName, majorVersion];
} }
// Utilities for caption time codes // Utilities for caption time codes
// http://paypal.github.io/accessible-html5-video-player/
function video_timecode_min(tc) { function video_timecode_min(tc) {
var tcpair = []; var tcpair = [];
tcpair = tc.split(" --> "); tcpair = tc.split(" --> ");
@ -224,9 +222,7 @@
y: e.clientY - parentPosition.y y: e.clientY - parentPosition.y
}; };
} }
// Get element position // Get element position
// http://www.kirupa.com/html5/getting_mouse_click_position.htm
function getPosition(element) { function getPosition(element) {
var xPosition = 0; var xPosition = 0;
var yPosition = 0; var yPosition = 0;
@ -642,7 +638,9 @@
// If Safari 7, removing track from DOM [see "turn off native caption rendering" above] // If Safari 7, removing track from DOM [see "turn off native caption rendering" above]
if (player.browserName === "Safari" && player.browserMajorVersion === 7) { if (player.browserName === "Safari" && player.browserMajorVersion === 7) {
console.log("Safari 7 detected; removing track from DOM"); if (config.debug) {
console.log("Safari 7 detected; removing track from DOM");
}
tracks = player.media.getElementsByTagName("track"); tracks = player.media.getElementsByTagName("track");
player.media.removeChild(tracks[0]); player.media.removeChild(tracks[0]);
} }
@ -659,11 +657,23 @@
// Setup fullscreen // Setup fullscreen
function setupFullscreen() { function setupFullscreen() {
console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported"); if(player.type === "video" && config.fullscreen.enabled) {
if(config.fullscreen.enabled && fullscreen.supportsFullScreen) { if(config.debug) {
player.container.className += " " + config.classes.fullscreen.enabled; console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
}
if(fullscreen.supportsFullScreen) {
if(config.debug) {
console.log("Fullscreen enabled");
}
player.container.className += " " + config.classes.fullscreen.enabled;
}
else if(config.debug) {
console.warn("Fullscreen not supported");
}
} }
} }
// Listen for events // Listen for events
@ -904,7 +914,7 @@
} }
setupPlayer(element); setupPlayer(element);
//now we execute callbacks registered to shout // Trigger the setup event
executeHandlers("setup"); executeHandlers("setup");
} }

45
assets/less/docs.less
View File

@ -8,21 +8,21 @@
@import "lib/mixins.less"; @import "lib/mixins.less";
@font-face { @font-face {
font-family: "Avenir"; font-family: "Avenir";
src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), src: url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"),
url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"),
url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype"); url("../../assets/fonts/AvenirLTStd-Medium.ttf") format("truetype");
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
} }
@font-face { @font-face {
font-family: "Avenir"; font-family: "Avenir";
src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), src: url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"),
url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"),
url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype"); url("../../assets/fonts/AvenirLTStd-Heavy.ttf") format("truetype");
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
} }
// BORDER-BOX ALL THE THINGS! // BORDER-BOX ALL THE THINGS!
@ -38,9 +38,7 @@ body {
.font-size(18); .font-size(18);
color: #6D797F; color: #6D797F;
line-height: 1.5; line-height: 1.5;
background: #ECF0F1; background: #fff;
max-width: 960px;
margin: 40px auto;
text-align: center; text-align: center;
} }
h1 { h1 {
@ -56,5 +54,20 @@ p {
margin: 0 0 20px; margin: 0 0 20px;
} }
header { header {
margin-bottom: 40px; margin: 40px 0;
}
.example-audio .player,
.example-video .player {
margin: 0 auto;
&:fullscreen {
max-width: none;
}
}
.example-audio .player {
max-width: 480px;
}
.example-video .player {
max-width: 1200px;
} }

36
assets/less/simple-media.less
View File

@ -89,6 +89,7 @@
.player { .player {
position: relative; position: relative;
max-width: 100%; max-width: 100%;
min-width: 290px;
overflow: hidden; // For the controls overflow: hidden; // For the controls
background: #000; background: #000;
@ -141,11 +142,18 @@
line-height: 1; line-height: 1;
// Layout // Layout
&-playback {
float: left;
}
&-sound { &-sound {
float: right; display: inline-block;
margin-top: @control-spacing;
}
@media (min-width: 560px) {
&-playback {
float: left;
}
&-sound {
float: right;
margin-top: 0;
}
} }
input + label, input + label,
@ -327,15 +335,25 @@
// Full screen mode // Full screen mode
&:fullscreen { &:fullscreen {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%; height: 100%;
width: 100%; width: 100%;
.player-video { .player-video {
position: absolute; height: 100%;
top: 50%; width: 100%;
left: 0;
right: 0; video {
transform: translateY(-50%); height: 100%;
}
.player-captions {
top: auto;
bottom: 80px;
}
} }
.player-controls { .player-controls {
position: absolute; position: absolute;

10
assets/templates/controls.html
View File

@ -2,8 +2,7 @@
<progress class="player-progress" max="100" value="0"> <progress class="player-progress" max="100" value="0">
<span>0</span>% played <span>0</span>% played
</progress> </progress>
<span class="player-controls-playback">
<div class="player-controls-playback">
<button data-player="restart"> <button data-player="restart">
<svg><use xlink:href="#icon-refresh"></use></svg> <svg><use xlink:href="#icon-refresh"></use></svg>
<span class="sr-only">Restart</span> <span class="sr-only">Restart</span>
@ -28,9 +27,8 @@
<span class="sr-only">Time</span> <span class="sr-only">Time</span>
<span class="player-duration">00:00</span> <span class="player-duration">00:00</span>
</span> </span>
</div> </span>
<span class="player-controls-sound">
<div class="player-controls-sound">
<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute"> <input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
<label id="mute{id}" for="mute{id}"> <label id="mute{id}" for="mute{id}">
<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg> <svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
@ -52,5 +50,5 @@
<svg><use xlink:href="#icon-expand"></use></svg> <svg><use xlink:href="#icon-expand"></use></svg>
<span class="sr-only">Toggle fullscreen</span> <span class="sr-only">Toggle fullscreen</span>
</button> </button>
</div> </span>
</div> </div>

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%}a{background:0 0}a:focus{outline:dotted thin}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"}small{font-size:80%}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;font-size:18px;font-size:1.8rem;color:#6D797F;line-height:1.5;background:#ECF0F1;max-width:960px;margin:40px auto;text-align:center}h1{font-size:48px;font-size:4.8rem;letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p{margin:0 0 20px}header{margin-bottom:40px} /*! 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:focus{outline:dotted thin}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"}small{font-size:80%}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;font-size:18px;font-size:1.8rem;color:#6D797F;line-height:1.5;background:#fff;text-align:center}h1{font-size:48px;font-size:4.8rem;letter-spacing:-.025em;color:#2E3C44;margin:0 0 10px;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}p{margin:0 0 20px}header{margin:40px 0}.example-audio .player,.example-video .player{margin:0 auto}.example-audio .player:-webkit-full-screen,.example-video .player:-webkit-full-screen{max-width:none}.example-audio .player:-moz-full-screen,.example-video .player:-moz-full-screen{max-width:none}.example-audio .player:-ms-fullscreen,.example-video .player:-ms-fullscreen{max-width:none}.example-audio .player:fullscreen,.example-video .player:fullscreen{max-width:none}.example-audio .player{max-width:480px}.example-video .player{max-width:1200px}

2
dist/css/simple-media.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/docs.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/simple-media.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/templates.js vendored
View File

@ -1,2 +1,2 @@
var templates = {}; var templates = {};
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <progress class=\"player-progress\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button aria-label=\"{aria-label}\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </div>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume:</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b("</div>");t.b("\n");return t.fl(); },partials: {}, subs: { }}); templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <progress class=\"player-progress\" max=\"100\" value=\"0\">");t.b("\n" + i);t.b(" <span>0</span>% played");t.b("\n" + i);t.b(" </progress>");t.b("\n" + i);t.b(" <span class=\"player-controls-playback\">");t.b("\n" + i);t.b(" <button data-player=\"restart\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-refresh\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Restart</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button data-player=\"rewind\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-rewind\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Rewind <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button aria-label=\"{aria-label}\" data-player=\"play\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-play\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Play</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button data-player=\"pause\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-pause\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Pause</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button data-player=\"fast-forward\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-fast-forward\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Fast forward <span class=\"player-seek-time\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <span class=\"player-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"player-duration\">00:00</span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b(" <span class=\"player-controls-sound\">");t.b("\n" + i);t.b(" <input class=\"inverted sr-only\" id=\"mute{id}\" type=\"checkbox\" data-player=\"mute\">");t.b("\n" + i);t.b(" <label id=\"mute{id}\" for=\"mute{id}\">");t.b("\n" + i);t.b(" <svg class=\"icon-muted\"><use xlink:href=\"#icon-muted\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-sound\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Mute</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <label for=\"volume{id}\" class=\"sr-only\">Volume:</label>");t.b("\n" + i);t.b(" <input id=\"volume{id}\" class=\"player-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\" data-player=\"volume\">");t.b("\n");t.b("\n" + i);t.b(" <input class=\"sr-only\" id=\"captions{id}\" type=\"checkbox\" data-player=\"captions\">");t.b("\n" + i);t.b(" <label for=\"captions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-bubble\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n");t.b("\n" + i);t.b(" <button data-player=\"fullscreen\">");t.b("\n" + i);t.b(" <svg class=\"icon-exit-fullscreen\"><use xlink:href=\"#icon-collapse\"></use></svg>");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-expand\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Toggle fullscreen</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" </span>");t.b("\n" + i);t.b("</div>");return t.fl(); },partials: {}, subs: { }});

6
docs/audio.html
View File

@ -1,6 +1,6 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="example-audio">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Simple Media</title> <title>Simple Media</title>
<meta name="description" content="Custom HTML5 video controls and WebVTT captions."> <meta name="description" content="Custom HTML5 video controls and WebVTT captions.">
@ -11,7 +11,7 @@
<link rel="stylesheet" href="../dist/css/simple-media.css"> <link rel="stylesheet" href="../dist/css/simple-media.css">
<link rel="stylesheet" href="../dist/css/docs.css"> <link rel="stylesheet" href="../dist/css/docs.css">
</head> </head>
<body class="container"> <body>
<header> <header>
<h1>Simple Media</h1> <h1>Simple Media</h1>
<p>A simple HTML5 media player</p> <p>A simple HTML5 media player</p>

6
docs/video.html
View File

@ -1,6 +1,6 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="example-video">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Simple Media</title> <title>Simple Media</title>
<meta name="description" content="Custom HTML5 video controls and WebVTT captions."> <meta name="description" content="Custom HTML5 video controls and WebVTT captions.">
@ -11,7 +11,7 @@
<link rel="stylesheet" href="../dist/css/simple-media.css"> <link rel="stylesheet" href="../dist/css/simple-media.css">
<link rel="stylesheet" href="../dist/css/docs.css"> <link rel="stylesheet" href="../dist/css/docs.css">
</head> </head>
<body class="container"> <body>
<header> <header>
<h1>Simple Media</h1> <h1>Simple Media</h1>
<p>A simple HTML5 media player</p> <p>A simple HTML5 media player</p>