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

Fullscreen, update filenames, other tweaks

Browse Source
This commit is contained in:
Sam Potts 2015-02-15 02:14:02 +11:00
parent 751d8db9d8
commit f8c6dab92e
20 changed files with 342 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/AvenirLTStd-Heavy.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/AvenirLTStd-Heavy.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/AvenirLTStd-Heavy.woff2 Executable file
View File

Binary file not shown.

BIN
assets/fonts/AvenirLTStd-Medium.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/AvenirLTStd-Medium.woff Normal file
View File

Binary file not shown.

BIN
assets/fonts/AvenirLTStd-Medium.woff2 Executable file
View File

Binary file not shown.

4
assets/icons/expand.svg
View File

@ -4,8 +4,8 @@
<title>expand</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)" fill="#444444">
<g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
<g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">
<path d="M7.00325,17.01 L7.00325,13.377 L8.29625,14.694 C8.68825,15.082 9.32125,15.082 9.71325,14.694 C10.10525,14.306 10.10425,13.678 9.71325,13.291 L6.74625,10.291 C6.55825,10.105 6.30425,10 6.03725,10 C6.02625,10 6.01425,10 6.00325,10.001 C5.99225,10.002 5.98025,10 5.96925,10 C5.70325,10 5.44825,10.105 5.26025,10.291 L2.29325,13.291 C1.90225,13.679 1.90225,14.307 2.29325,14.694 C2.68425,15.081 3.31825,15.082 3.71025,14.694 L5.00425,13.377 L5.00425,17.01 C5.00425,17.557 5.44725,18 5.99425,18 L6.01225,18 C6.55925,18 7.00225,17.557 7.00225,17.01 L7.00325,17.01 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(6.003438, 14.000000) rotate(-135.000000) translate(-6.003438, -14.000000) "></path>
<path d="M15.0066876,5.377 L16.2996876,6.694 C16.6916876,7.082 17.3246876,7.082 17.7166876,6.694 C18.1086876,6.306 18.1076876,5.678 17.7166876,5.291 L14.7496876,2.291 C14.5616876,2.105 14.3076876,2 14.0406876,2 C14.0296876,2 14.0176876,2 14.0066876,2.001 C13.9956876,2.002 13.9836876,2 13.9726876,2 C13.7066876,2 13.4516876,2.105 13.2636876,2.291 L10.2966876,5.291 C9.90568756,5.679 9.90568756,6.307 10.2966876,6.694 C10.6876876,7.081 11.3216876,7.082 11.7136876,6.694 L13.0076876,5.377 L13.0076876,9.01 C13.0076876,9.557 13.4506876,10 13.9976876,10 C14.5626876,10 15.0056876,9.557 15.0056876,9.01 L15.0066876,5.377 Z" id="Shape-2" sketch:type="MSShapeGroup" transform="translate(14.006875, 6.000000) rotate(45.000000) translate(-14.006875, -6.000000) "></path>
</g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

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

@ -1,3 +1,77 @@
// ==========================================================================
// Simple Media Player
// simple-media.js v1.0.0
// https://github.com/sampotts/simple-media
// ==========================================================================
// Credits: http://paypal.github.io/accessible-html5-video-player/
// ==========================================================================
// Fullscreen API
(function() {
var
fullscreen = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: "",
element: null,
prefix: ""
},
browserPrefixes = "webkit moz o ms khtml".split(" ");
// check for native support
if (typeof document.cancelFullScreen != "undefined") {
fullscreen.supportsFullScreen = true;
}
else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullscreen.prefix = browserPrefixes[i];
if (typeof document[fullscreen.prefix + "CancelFullScreen" ] != "undefined" ) {
fullscreen.supportsFullScreen = true;
break;
}
}
}
// Safari doesn't support the ALLOW_KEYBOARD_INPUT flag 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) {
fullscreen.fullScreenEventName = fullscreen.prefix + "fullscreenchange";
fullscreen.isFullScreen = function() {
switch (this.prefix) {
case "":
return document.fullScreen;
case "webkit":
return document.webkitIsFullScreen;
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);
};
fullscreen.cancelFullScreen = function() {
return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + "CancelFullScreen"]();
};
fullscreen.element = function() {
return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"];
};
}
// Export api
window.fullscreen = fullscreen;
})();
function InitPxVideo(options) {
"use strict";
@ -12,6 +86,37 @@ function InitPxVideo(options) {
});
}
// Get click position relative to parent
// http://www.kirupa.com/html5/getting_mouse_click_position.htm
// ---------------------------------
function getClickPosition(e) {
var parentPosition = window.fullscreen.isFullScreen() ? { x: 0, y: 0 } : getPosition(e.currentTarget);
return {
x: e.clientX - parentPosition.x,
y: e.clientY - parentPosition.y
};
}
// Get element position
// http://www.kirupa.com/html5/getting_mouse_click_position.htm
// ---------------------------------
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return {
x: xPosition,
y: yPosition
};
}
// Utilities for caption time codes
function video_timecode_min(tc) {
var tcpair = [];
@ -255,6 +360,9 @@ function InitPxVideo(options) {
obj.duration = obj.container.getElementsByClassName("px-video-duration")[0];
obj.txtSeconds = obj.container.getElementsByClassName("px-seconds");
obj.toggleFullscreen = obj.container.querySelector("[data-player='toggle-fullscreen']");
obj.videoContainer = obj.container.querySelector(".player-video");
// Update number of seconds in rewind and fast forward buttons
obj.txtSeconds[0].innerHTML = obj.seekInterval;
obj.txtSeconds[1].innerHTML = obj.seekInterval;
@ -265,30 +373,41 @@ function InitPxVideo(options) {
obj.isTextTracks = true;
}
// Play
obj.btnPlay.addEventListener("click", function() {
obj.movie.play();
// Fullscreen
obj.toggleFullscreen.addEventListener("click", function() {
if(!window.fullscreen.isFullScreen()) {
window.fullscreen.requestFullScreen(obj.container);
}
else {
window.fullscreen.cancelFullScreen();
}
}, false);
// Click video
obj.videoContainer.addEventListener("click", function() {
if(obj.movie.paused) {
play();
}
else if(obj.movie.ended) {
restart();
}
else {
pause();
}
}, false);
function play() {
obj.movie.play();
obj.container.className = obj.container.className.replace("stopped", "playing");
obj.btnPlay.className = "px-video-play hide";
obj.btnPause.className = "px-video-pause px-video-show-inline";
obj.btnPause.focus();
}, false);
}
// Pause
obj.btnPause.addEventListener("click", function() {
function pause() {
obj.movie.pause();
obj.container.className = obj.container.className.replace("playing", "stopped");
}
obj.btnPlay.className = "px-video-play px-video-show-inline";
obj.btnPause.className = "px-video-pause hide";
obj.btnPlay.focus();
}, false);
// Restart
obj.btnRestart.addEventListener("click", function() {
function restart() {
// Move to beginning
obj.movie.currentTime = 0;
@ -298,11 +417,17 @@ function InitPxVideo(options) {
}
// Play and ensure the play button is in correct state
obj.movie.play();
obj.btnPlay.className = "px-video-play hide";
obj.btnPause.className = "px-video-pause px-video-show-inline";
play();
}
}, false);
// Play
obj.btnPlay.addEventListener("click", function() { play(); obj.btnPause.focus(); }, false);
// Pause
obj.btnPause.addEventListener("click", function() { pause(); obj.btnPlay.focus(); }, false);
// Restart
obj.btnRestart.addEventListener("click", restart, false);
// Rewind
obj.btnRewind.addEventListener("click", function() {
@ -373,7 +498,7 @@ function InitPxVideo(options) {
// Skip when clicking progress bar
obj.progressBar.addEventListener("click", function(e) {
obj.pos = (e.pageX - this.offsetLeft) / this.offsetWidth;
obj.pos = getClickPosition(e).x / this.offsetWidth;
obj.movie.currentTime = obj.pos * obj.movie.duration;
// Special handling for "manual" captions
@ -527,101 +652,5 @@ function InitPxVideo(options) {
var tracks = obj.movie.getElementsByTagName("track");
obj.movie.removeChild(tracks[0]);
}
}
};
/*$(function() {
$("video").simplePlayer();
});*/
// Simple player plugin
// ---------------------------------
/*;(function($) {
$.fn.simplePlayer = function (settings) {
// Config defaults
var config = {
wrapperClass: "media", // Class name added to replaced selects
shownClass: "in",
autoplay: false,
templates: {
controls: "<div class="media-controls js-media-controls"> \
<button type="button" class="play button-toggle-play js-button-toggle-play"> \
<span class="icon-play"></span> \
</button> \
<div class="progress progress-play js-progress-play" role="progress-bar"> \
<div class="progress-buffered js-progress-buffered"></div> \
<div class="progress-played js-progress-played"></div> \
</div> \
<div class="time js-time"> \
<span class="time-elapsed js-time-elapsed">88:88</span> \
<span class="time-seperator js-time-seperator">/</span> \
<span class="time-total js-time-total">88:88</span> \
</div> \
<div class="volume has-popover js-volume"> \
<button type="button" class="button-toggle-mute js-button-toggle-mute"> \
<span class="icon-volume-up"></span> \
</button> \
<div class="popover popover-volume js-popover-volume"> \
<div class="progress vertical-progress progress-audio-volume js-progress-audio-volume"> \
<div class="progress-volume js-progress-volume" style="height: 80%"></div> \
</div> \
<div class="volume-label js-volume-label">100%</div> \
</div> \
</div> \
<button type="button" class="fullscreen button-fullscreen js-button-fullscreen"> \
<span class="icon-resize-full"></span> \
</button> \
</div>",
overlay: "<div class="overlay overlay-play"><span><i class="icon-play"></i></span></div>"
}
};
// Extend settings if they"re passed
if (settings) {
$.extend(config, settings);
}
this.each(function() {
var player = this,
status = {},
$player = $(this).wrap("<div class="" + config.wrapperClass + (config.autoplay ? " playing" : " stopped") + "" />"),
$wrapper = $player.parents("." + config.wrapperClass),
supportMP4 = (function (v) { return (v.canPlayType && v.canPlayType("video/mp4")); }(document.createElement("video")));
console.log($wrapper);
// Inject the controls
$(config.templates.controls).insertAfter($player);
$(config.templates.overlay).insertAfter($player);
// Select controls
var $playbackToggle = $(".js-button-toggle-play"),
$muteToggle = $(".js-button-toggle-mute");
function togglePlayback() {
if(status.playing && status.playing == true) {
player.pause();
status.playing = false;
$wrapper.removeClass("playing").addClass("paused");
} else {
player.play();
status.playing = true;
$wrapper.removeClass("paused stopped").addClass("playing");
}
$("span", this).attr("class", "icon-" + (status.playing ? "pause" : "play"));
};
function toggleMute() {
player.muted = !status.muted;
status.muted = player.muted;
$("span", this).attr("class", "icon-" + (status.muted ? "mute" : "volume-up"));
};
$playbackToggle.on("click", togglePlayback);
$muteToggle.on("click", toggleMute);
});
};
})(jQuery);*/

29
assets/less/docs.less
View File

@ -7,6 +7,24 @@
// Mixins
@import "lib/mixins.less";
@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;
}
// BORDER-BOX ALL THE THINGS!
// http://paulirish.com/2012/box-sizing-border-box-ftw/
*, *::after, *::before {
@ -16,22 +34,27 @@ html {
font-size: 62.5%;
}
body {
font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
.font-size(18);
color: #6D797F;
line-height: 1.5;
background: #ECF0F1;
max-width: 960px;
margin: 50px auto;
margin: 40px auto;
text-align: center;
}
h1 {
.font-size(48);
letter-spacing: -.025em;
color: #2E3C44;
margin: 0 0 20px;
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;
}

203
assets/less/simple-player.less → assets/less/simple-media.less
View File

@ -4,12 +4,25 @@
// Variables
// -------------------------------
// Colors
@base-color: #2E3C44;
@green: #1ABC9C;
@red: #D44334;
//@green: #4CB953;
@blue: #3498DB;
@control-color: @blue;
// Grays
@gray-dark: #343f4a;
@gray: #565d64;
@gray-light: #6f7e86;
@gray-lighter: #859093;
@gray-lightest: #cbd0d3;
@gray-light-mega: #dadfe2;
@off-white: #f9fafb;
// Controls
@control-color: @gray-lightest;
@control-color-active: @blue;
@control-spacing: 10px;
// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
@ -51,7 +64,39 @@
position: relative;
max-width: 100%;
overflow: hidden; // For the controls
background: #000;
// For video
&-video {
position: relative;
}
&:fullscreen {
height: 100%;
width: 100%;
.player-video {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
.controls {
position: absolute;
bottom: 0;
left: 0;
right: 0;
.icon-exit-fullscreen {
display: block;
& + svg {
display: none;
}
}
}
}
video {
width: 100%;
height: auto;
@ -61,15 +106,34 @@
width: 18px;
height: 18px;
}
.controls {
.clearfix();
.px-video-captions {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 5px;
background: rgba(0,0,0, .75);
transition: transform .3s ease;
width: 100%;
padding: 20px;
min-height: 2.5em;
//background-color: #000;
color: #fff;
font-size: 24px;
text-shadow: 0 1px 1px rgba(0,0,0, .75);
text-align: center;
//opacity: 0.75;
-webkit-font-smoothing: antialiased;
font-weight: 500;
}
.controls {
.clearfix();
position: relative;
//position: absolute;
//bottom: 0;
//left: 0;
//right: 0;
padding: (@control-spacing * 2) @control-spacing @control-spacing;
//background: rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .9);
background: @gray-dark;
//transition: transform .3s ease;
line-height: 1;
button {
@ -82,8 +146,8 @@
display: inline-block;
vertical-align: middle;
margin: 0 2px;
padding: 5px 10px;
color: #ddd;
padding: (@control-spacing / 2) @control-spacing;
color: @control-color;
transition: background .3s ease;
border-radius: 3px;
@ -93,22 +157,23 @@
transition: fill .3s ease;
}
&:focus {
background: #000;
outline: 0;
}
&:hover {
background: @control-color;
background: @control-color-active;
}
&:hover svg,
&:focus svg {
fill: #fff;
}
}
.icon-exit-fullscreen {
display: none;
}
.px-video-time {
display: inline-block;
vertical-align: middle;
padding-top: 3px;
margin-left: 10px;
margin-left: @control-spacing;
color: #fff;
font-weight: 600;
font-size: 14px;
@ -117,11 +182,11 @@
}
progress {
position: absolute;
top: -10px;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 10px;
height: @control-spacing;
margin: 0;
vertical-align: top;
@ -129,12 +194,19 @@
/* Reset the default appearance */
-webkit-appearance: none;
border: none;
background: @gray;
cursor: pointer;
&::-webkit-progress-bar {
background-color: #eee;
background: @gray;
}
// The value
&::-webkit-progress-value {
background-color: @control-color;
background: @control-color-active;
}
&::-moz-progress-bar {
background: @control-color-active;
}
}
}
@ -147,17 +219,55 @@
/*&.playing .controls {
transform: translateY(100%);
}*/
.controls .px-video-pause,
&.playing .controls .px-video-play {
display: none;
}
&.playing .controls .px-video-pause {
display: inline-block;
}
/* volume range input */
input[type='range'] {
-webkit-appearance: none;
height: 6px;
width: 100px;
margin-right: @control-spacing;
background: @gray;
outline: 0;
border-radius: 10px;
&:focus::-webkit-slider-thumb {
//outline: 1px #999 dotted;
background: @control-color-active;
}
&::-moz-range-track {
-moz-appearance: none;
height: 6px;
background: @gray;
border: none;
border-radius: 10px;
}
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
height: 12px;
width: 12px;
background: @control-color;
border-radius: 100%;
transition: background .3s ease;
}
&::-moz-range-thumb {
height: 12px;
width: 12px;
background: @control-color;
border-radius: 100%;
}
}
}
/* containers */
.px-video-img-captions-container * {
box-sizing: border-box;
}
.px-video-img-captions-container {
position: relative;
}
/* progress indicator */
.px-video-progress {
@ -173,22 +283,7 @@
}*/
/* caption area */
.px-video-captions {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: .5em;
min-height: 2.5em;
background-color: #000;
color: #fff;
font-size: 1.1em;
text-align: center;
opacity: 0.75;
-webkit-font-smoothing: antialiased;
font-weight: 500;
}
/* buttons */
.px-video-controls button {
@ -259,34 +354,6 @@
background-position: -6px -656px;
}
/* volume range input */
.px-video-controls input[type='range'] {
-webkit-appearance: none;
height: 6px;
width: 100px;
margin-top: 8px;
background-color: #E6E6E6;
outline:none;
}
.px-video-controls input[type='range']:focus::-webkit-slider-thumb {
outline: 1px #999 dotted;
}
.px-video-controls input[type='range']::-moz-range-track {
-moz-appearance: none;
height: 6px;
background-color: #E6E6E6;
border: none;
}
.px-video-controls input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none !important;
height: 10px;
width: 6px;
background-color: #666;
}
.px-video-controls input[type='range']::-moz-range-thumb {
height: 12px;
width: 8px;
}
/* fixing display for IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.px-video-controls input[type='range'] {

8
assets/templates/controls.html
View File

@ -14,7 +14,7 @@
<svg><use xlink:href="#icon-play"></use></svg>
<span class="sr-only">Play</span>
</button>
<button class="px-video-pause hide" data-player="pause">
<button class="px-video-pause" data-player="pause">
<svg><use xlink:href="#icon-pause"></use></svg>
<span class="sr-only">Pause</span>
</button>
@ -47,5 +47,11 @@
<span class="sr-only">Captions</span>
</label>
<!--</div>-->
<button class="player-toggle-fullscreen" data-player="toggle-fullscreen">
<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>
<svg><use xlink:href="#icon-expand"></use></svg>
<span class="sr-only">Toggle fullscreen</span>
</button>
</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}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{font-family:"Avenir Next","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:50px auto;text-align:center}h1{font-size:48px;font-size:4.8rem;letter-spacing:-.025em;color:#2E3C44;margin:0 0 20px;line-height:1.2}p{margin:0 0 20px}
/*! 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}

1
dist/css/simple-media.css vendored Normal file
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

1
dist/js/simple-media.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/simple-player.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 = {};
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"controls\">");t.b("\n" + i);t.b(" <progress class=\"px-video-progress\" max=\"100\" value=\"0\"><span>0</span>% played</progress>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"play-controls\">");t.b("\n" + i);t.b(" <button class=\"px-video-restart\" 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 class=\"px-video-rewind\" 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=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button class=\"px-video-play\" 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 class=\"px-video-pause hide\" 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 class=\"px-video-forward\" 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=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <div class=\"px-video-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"px-video-duration\">00:00</span>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"sound-controls\">");t.b("\n" + i);t.b(" <!--<div class=\"px-video-mute-btn-container\">-->");t.b("\n" + i);t.b(" <input class=\"px-video-mute sr-only\" id=\"btnMute{id}\" type=\"checkbox\">");t.b("\n" + i);t.b(" <label id=\"labelMute{id}\" for=\"btnMute{id}\">");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" + i);t.b(" <!--</div>-->");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=\"px-video-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\">");t.b("\n");t.b("\n" + i);t.b(" <!--<div class=\"px-video-captions-btn-container hide\">-->");t.b("\n" + i);t.b(" <input class=\"px-video-btnCaptions sr-only\" id=\"btnCaptions{id}\" type=\"checkbox\">");t.b("\n" + i);t.b(" <label for=\"btnCaptions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-film\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n" + i);t.b(" <!--</div>-->");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=\"controls\">");t.b("\n" + i);t.b(" <progress class=\"px-video-progress\" max=\"100\" value=\"0\"><span>0</span>% played</progress>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"play-controls\">");t.b("\n" + i);t.b(" <button class=\"px-video-restart\" 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 class=\"px-video-rewind\" 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=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <button class=\"px-video-play\" 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 class=\"px-video-pause\" 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 class=\"px-video-forward\" 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=\"px-seconds\">10</span> seconds</span>");t.b("\n" + i);t.b(" </button>");t.b("\n" + i);t.b(" <div class=\"px-video-time\">");t.b("\n" + i);t.b(" <span class=\"sr-only\">Time</span>");t.b("\n" + i);t.b(" <span class=\"px-video-duration\">00:00</span>");t.b("\n" + i);t.b(" </div>");t.b("\n" + i);t.b(" </div>");t.b("\n");t.b("\n" + i);t.b(" <div class=\"sound-controls\">");t.b("\n" + i);t.b(" <!--<div class=\"px-video-mute-btn-container\">-->");t.b("\n" + i);t.b(" <input class=\"px-video-mute sr-only\" id=\"btnMute{id}\" type=\"checkbox\">");t.b("\n" + i);t.b(" <label id=\"labelMute{id}\" for=\"btnMute{id}\">");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" + i);t.b(" <!--</div>-->");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=\"px-video-volume\" type=\"range\" min=\"0\" max=\"10\" value=\"5\">");t.b("\n");t.b("\n" + i);t.b(" <!--<div class=\"px-video-captions-btn-container hide\">-->");t.b("\n" + i);t.b(" <input class=\"px-video-btnCaptions sr-only\" id=\"btnCaptions{id}\" type=\"checkbox\">");t.b("\n" + i);t.b(" <label for=\"btnCaptions{id}\">");t.b("\n" + i);t.b(" <svg><use xlink:href=\"#icon-film\"></use></svg>");t.b("\n" + i);t.b(" <span class=\"sr-only\">Captions</span>");t.b("\n" + i);t.b(" </label>");t.b("\n" + i);t.b(" <!--</div>-->");t.b("\n");t.b("\n" + i);t.b(" <button class=\"player-toggle-fullscreen\" data-player=\"toggle-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: { }});

2
dist/svg/sprite.svg vendored
View File

@ -1 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-collapse" viewBox="0 0 18 18"><title>collapse</title><g><g><path d="M14.424 2.165l-2.57 2.568.018-1.845c-.003-.552-.45-1-1.002-1.002-.55-.003-.994.442-.992.992l-.023 4.22c.002.263.107.517.296.706l.025.023c.01.007.016.017.024.025.187.188.44.294.706.295l4.218-.023c.55.002.995-.442.992-.992-.002-.55-.45-1-1-1.002l-1.847.016 2.567-2.568c.387-.387.387-1.013 0-1.4l-.013-.013c-.386-.386-1.013-.386-1.4 0z"/><path d="M6.154 13.266l-.017 1.846c.003.55.45 1 1.002 1 .55.004.994-.44.99-.99l.024-4.22c0-.264-.106-.517-.295-.706l-.026-.024-.023-.024c-.187-.188-.442-.294-.706-.296l-4.22.023c-.55-.002-.994.442-.99.992.002.55.45 1 1 1.002l1.847-.017-2.568 2.57c-.386.385-.386 1.012 0 1.398.4.4 1.026.4 1.413.014l2.57-2.568z"/></g></g></symbol><symbol id="icon-expand" viewBox="0 0 18 18"><title>expand</title><g fill="none" fill-rule="evenodd"><g fill="#444"><path d="M6.424 10.165l-2.57 2.568.018-1.845c-.003-.552-.45-1-1.002-1.002-.55-.003-.994.442-.992.992l-.023 4.22c.002.263.107.517.296.706l.025.023c.01.007.016.017.024.025.187.188.44.294.706.295l4.218-.023c.55.002.995-.442.992-.992-.002-.55-.45-1-1-1.002l-1.847.016 2.567-2.568c.387-.387.387-1.013 0-1.4l-.013-.013c-.386-.386-1.013-.386-1.4 0z"/><path d="M14.154 5.266l-.017 1.846c.003.55.45 1 1.002 1 .55.004.994-.44.99-.99l.024-4.22c0-.264-.106-.517-.295-.706l-.026-.024-.023-.024c-.187-.188-.442-.294-.706-.296l-4.22.023c-.55-.002-.994.442-.99.992.002.55.45 1 1 1.002l1.847-.017-2.568 2.57c-.386.385-.386 1.012 0 1.398.4.4 1.026.4 1.413.014l2.57-2.568z"/></g></g></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-film" viewBox="0 0 18 18"><path d="M17 2H1c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1zM2 4h2v2H2V4zm0 4h2v2H2V8zm0 6v-2h2v2H2zm4 0V4h6v10H6zm10 0h-2v-2h2v2zm0-4h-2V8h2v2zm0-4h-2V4h2v2z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><title>pause</title><g fill="none" fill-rule="evenodd"><g transform="translate(3 3)" stroke="#fff" stroke-width="2"><rect x="8" width="4" height="12" rx="1"/><rect width="4" height="12" rx="1"/></g></g></symbol><symbol id="icon-play" viewBox="0 0 18 18"><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-refresh" viewBox="0 0 18 18"><path d="M8.013 14.006H7.19c-2.37-.388-4.186-2.453-4.186-4.934 0-.83.213-1.61.574-2.3l.613.85c.447.62 1.41.447 1.615-.288l1.162-4.18C7.13 2.575 6.692 2 6.09 2.002l-4.174.007c-.74 0-1.17.84-.736 1.443l1.128 1.564C1.49 6.16 1.006 7.558 1.006 9.074c0 3.498 2.566 6.398 5.918 6.916.09.014.18.01.267 0V16h.823c.545 0 .987-.44.987-.986v-.02c0-.545-.442-.987-.987-.987zM16.82 14.55l-1.13-1.563c.82-1.145 1.303-2.544 1.303-4.06 0-3.498-2.566-6.398-5.918-6.917-.09-.014-.18-.01-.267 0V2h-.822c-.545 0-.986.442-.986.987v.02c0 .546.442.988.986.988h.822c2.372.388 4.187 2.453 4.187 4.934 0 .83-.213 1.61-.573 2.3l-.614-.85c-.446-.62-1.41-.447-1.613.288l-1.163 4.18c-.16.58.275 1.154.878 1.153l4.174-.006c.742 0 1.17-.842.736-1.443z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><title>rewind</title><g><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></g></symbol><symbol id="icon-sound" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-collapse" viewBox="0 0 18 18"><title>collapse</title><g><g><path d="M14.424 2.165l-2.57 2.568.018-1.845c-.003-.552-.45-1-1.002-1.002-.55-.003-.994.442-.992.992l-.023 4.22c.002.263.107.517.296.706l.025.023c.01.007.016.017.024.025.187.188.44.294.706.295l4.218-.023c.55.002.995-.442.992-.992-.002-.55-.45-1-1-1.002l-1.847.016 2.567-2.568c.387-.387.387-1.013 0-1.4l-.013-.013c-.386-.386-1.013-.386-1.4 0z"/><path d="M6.154 13.266l-.017 1.846c.003.55.45 1 1.002 1 .55.004.994-.44.99-.99l.024-4.22c0-.264-.106-.517-.295-.706l-.026-.024-.023-.024c-.187-.188-.442-.294-.706-.296l-4.22.023c-.55-.002-.994.442-.99.992.002.55.45 1 1 1.002l1.847-.017-2.568 2.57c-.386.385-.386 1.012 0 1.398.4.4 1.026.4 1.413.014l2.57-2.568z"/></g></g></symbol><symbol id="icon-expand" viewBox="0 0 18 18"><title>expand</title><g><g><path d="M6.424 10.165l-2.57 2.568.018-1.845c-.003-.552-.45-1-1.002-1.002-.55-.003-.994.442-.992.992l-.023 4.22c.002.263.107.517.296.706l.025.023c.01.007.016.017.024.025.187.188.44.294.706.295l4.218-.023c.55.002.995-.442.992-.992-.002-.55-.45-1-1-1.002l-1.847.016 2.567-2.568c.387-.387.387-1.013 0-1.4l-.013-.013c-.386-.386-1.013-.386-1.4 0z"/><path d="M14.154 5.266l-.017 1.846c.003.55.45 1 1.002 1 .55.004.994-.44.99-.99l.024-4.22c0-.264-.106-.517-.295-.706l-.026-.024-.023-.024c-.187-.188-.442-.294-.706-.296l-4.22.023c-.55-.002-.994.442-.99.992.002.55.45 1 1 1.002l1.847-.017-2.568 2.57c-.386.385-.386 1.012 0 1.398.4.4 1.026.4 1.413.014l2.57-2.568z"/></g></g></symbol><symbol id="icon-fast-forward" viewBox="0 0 18 18"><path d="M17.57 8.246L7 2c-.552 0-1 .448-1 1v1.954L1 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l5-2.955V15c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754zM6 10.722l-4 2.364V4.914l4 2.364v3.444zm2 2.364V4.914L14.915 9 8 13.086z"/></symbol><symbol id="icon-film" viewBox="0 0 18 18"><path d="M17 2H1c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1h16c.552 0 1-.448 1-1V3c0-.552-.448-1-1-1zM2 4h2v2H2V4zm0 4h2v2H2V8zm0 6v-2h2v2H2zm4 0V4h6v10H6zm10 0h-2v-2h2v2zm0-4h-2V8h2v2zm0-4h-2V4h2v2z"/></symbol><symbol id="icon-pause" viewBox="0 0 18 18"><title>pause</title><g fill="none" fill-rule="evenodd"><g transform="translate(3 3)" stroke="#fff" stroke-width="2"><rect x="8" width="4" height="12" rx="1"/><rect width="4" height="12" rx="1"/></g></g></symbol><symbol id="icon-play" viewBox="0 0 18 18"><path d="M5 4.914L11.915 9 5 13.086V4.914zM4 2c-.552 0-1 .448-1 1v12c0 .552.448 1 1 1l10.57-6.246c.266-.158.43-.444.43-.754s-.164-.597-.43-.754L4 2z"/></symbol><symbol id="icon-refresh" viewBox="0 0 18 18"><path d="M8.013 14.006H7.19c-2.37-.388-4.186-2.453-4.186-4.934 0-.83.213-1.61.574-2.3l.613.85c.447.62 1.41.447 1.615-.288l1.162-4.18C7.13 2.575 6.692 2 6.09 2.002l-4.174.007c-.74 0-1.17.84-.736 1.443l1.128 1.564C1.49 6.16 1.006 7.558 1.006 9.074c0 3.498 2.566 6.398 5.918 6.916.09.014.18.01.267 0V16h.823c.545 0 .987-.44.987-.986v-.02c0-.545-.442-.987-.987-.987zM16.82 14.55l-1.13-1.563c.82-1.145 1.303-2.544 1.303-4.06 0-3.498-2.566-6.398-5.918-6.917-.09-.014-.18-.01-.267 0V2h-.822c-.545 0-.986.442-.986.987v.02c0 .546.442.988.986.988h.822c2.372.388 4.187 2.453 4.187 4.934 0 .83-.213 1.61-.573 2.3l-.614-.85c-.446-.62-1.41-.447-1.613.288l-1.163 4.18c-.16.58.275 1.154.878 1.153l4.174-.006c.742 0 1.17-.842.736-1.443z"/></symbol><symbol id="icon-rewind" viewBox="0 0 18 21"><title>rewind</title><g><path d="M.43 10.754L11 17c.552 0 1-.448 1-1v-1.954L17 17c.552 0 1-.448 1-1V4c0-.552-.448-1-1-1l-5 2.955V4c0-.552-.448-1-1-1L.43 9.246C.165 9.404 0 9.69 0 10s.164.597.43.754zM12 8.278l4-2.364v8.172l-4-2.364V8.278zm-2-2.364v8.172L3.085 10 10 5.914z"/></g></symbol><symbol id="icon-sound" viewBox="0 0 18 18"><path d="M10.214 2c-.11 0-.225.032-.334.1L5.832 4.91C5.75 4.97 5.65 5 5.55 5H1.995C1.446 5 1 5.448 1 6v6c0 .552.446 1 .996 1H5.55c.1 0 .2.03.282.09L9.88 15.9c.11.068.223.1.334.1.392 0 .747-.4.747-.95V2.95c0-.55-.354-.95-.746-.95zM8.97 12.834L6.58 11.177c-.166-.115-.364-.178-.566-.178H3.49c-.274 0-.497-.225-.497-.5v-3c0-.277.223-.5.498-.5h2.526c.202 0 .4-.063.566-.18L8.97 5.165v7.67zM16.934 8.8c-.086-1.75-1.514-2.992-2.507-3.65-.47-.312-1.094-.122-1.325.408l-.038.086c-.188.43-.045.94.336 1.194.706.473 1.586 1.247 1.624 2.065.032.676-.553 1.468-1.663 2.27-.397.288-.528.84-.284 1.275l.042.075c.266.475.866.624 1.3.312 1.74-1.25 2.586-2.606 2.516-4.037z"/></symbol></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

12
docs/index.html
View File

@ -2,23 +2,23 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Simple HTML5 Video Player</title>
<title>Simple Media</title>
<meta name="description" content="Custom HTML5 video controls and WebVTT captions.">
<meta name="author" content="Sam Potts">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles -->
<link rel="stylesheet" href="../dist/css/simple-player.css">
<link rel="stylesheet" href="../dist/css/simple-media.css">
<link rel="stylesheet" href="../dist/css/docs.css">
</head>
<body class="container">
<header>
<h1>HTML5 Media Player</h1>
<h1>Simple Media</h1>
<p>A simple HTML5 media player</p>
</header>
<div class="player px-video-container" id="myvid">
<div class="px-video-img-captions-container">
<div class="player" id="myvid">
<div class="player-video">
<div class="px-video-captions hide"></div>
<video width="640" height="360" poster="../media/poster_PayPal_Austin2.jpg" controls>
<!-- video files -->
@ -44,7 +44,7 @@
<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");</script>
<!-- Core player -->
<script src="../dist/js/simple-player.js"></script>
<script src="../dist/js/simple-media.js"></script>
<!-- Docs setup -->
<script src="../dist/js/docs.js"></script>

4
readme.md
View File

@ -10,3 +10,7 @@
- [http://stackoverflow.com/questions/5138077/html5-video-file-loading-complete-event](http://stackoverflow.com/questions/5138077/html5-video-file-loading-complete-event)
- [http://www.sitepoint.com/essential-audio-and-video-events-for-html5/](http://www.sitepoint.com/essential-audio-and-video-events-for-html5/)
- [http://dev.opera.com/articles/view/simple-html5-video-flash-fallback-custom-controls/](http://dev.opera.com/articles/view/simple-html5-video-flash-fallback-custom-controls/)
- [http://www.hongkiat.com/blog/html5-progress-bar/](http://www.hongkiat.com/blog/html5-progress-bar/)
- [http://codereview.stackexchange.com/questions/21105/pattern-for-creating-a-globally-accessible-custom-plugin](http://codereview.stackexchange.com/questions/21105/pattern-for-creating-a-globally-accessible-custom-plugin)
- [https://scotch.io/tutorials/building-your-own-javascript-modal-plugin](https://scotch.io/tutorials/building-your-own-javascript-modal-plugin)