aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/fonts/AvenirLTStd-Heavy.ttfbin0 -> 49936 bytes
-rw-r--r--assets/fonts/AvenirLTStd-Heavy.woffbin0 -> 28088 bytes
-rwxr-xr-xassets/fonts/AvenirLTStd-Heavy.woff2bin0 -> 21164 bytes
-rw-r--r--assets/fonts/AvenirLTStd-Medium.ttfbin0 -> 52748 bytes
-rw-r--r--assets/fonts/AvenirLTStd-Medium.woffbin0 -> 28964 bytes
-rwxr-xr-xassets/fonts/AvenirLTStd-Medium.woff2bin0 -> 22084 bytes
-rw-r--r--assets/icons/expand.svg4
-rw-r--r--assets/js/simple-media.js269
-rw-r--r--assets/less/docs.less29
-rw-r--r--assets/less/simple-media.less (renamed from assets/less/simple-player.less)215
-rw-r--r--assets/templates/controls.html8
-rw-r--r--dist/css/docs.css2
-rw-r--r--dist/css/simple-media.css1
-rw-r--r--dist/js/docs.js2
-rw-r--r--dist/js/simple-media.js1
-rw-r--r--dist/js/simple-player.js1
-rw-r--r--dist/js/templates.js2
-rw-r--r--dist/svg/sprite.svg2
-rw-r--r--docs/index.html12
-rw-r--r--readme.md6
20 files changed, 342 insertions, 212 deletions
diff --git a/assets/fonts/AvenirLTStd-Heavy.ttf b/assets/fonts/AvenirLTStd-Heavy.ttf
new file mode 100644
index 00000000..7bee7997
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Heavy.ttf
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Heavy.woff b/assets/fonts/AvenirLTStd-Heavy.woff
new file mode 100644
index 00000000..771c45a1
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Heavy.woff
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Heavy.woff2 b/assets/fonts/AvenirLTStd-Heavy.woff2
new file mode 100755
index 00000000..b889b061
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Heavy.woff2
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Medium.ttf b/assets/fonts/AvenirLTStd-Medium.ttf
new file mode 100644
index 00000000..73ec1e54
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Medium.ttf
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Medium.woff b/assets/fonts/AvenirLTStd-Medium.woff
new file mode 100644
index 00000000..bc2a778e
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Medium.woff
Binary files differ
diff --git a/assets/fonts/AvenirLTStd-Medium.woff2 b/assets/fonts/AvenirLTStd-Medium.woff2
new file mode 100755
index 00000000..bcf4649b
--- /dev/null
+++ b/assets/fonts/AvenirLTStd-Medium.woff2
Binary files differ
diff --git a/assets/icons/expand.svg b/assets/icons/expand.svg
index 9c541d48..5fd651bd 100644
--- a/assets/icons/expand.svg
+++ b/assets/icons/expand.svg
@@ -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>
diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js
index 954cc9b2..7179cd6b 100644
--- a/assets/js/simple-media.js
+++ b/assets/js/simple-media.js
@@ -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();
-
- obj.container.className = obj.container.className.replace("stopped", "playing");
+ // Fullscreen
+ obj.toggleFullscreen.addEventListener("click", function() {
+ if(!window.fullscreen.isFullScreen()) {
+ window.fullscreen.requestFullScreen(obj.container);
+ }
+ else {
+ window.fullscreen.cancelFullScreen();
+ }
+ }, false);
- obj.btnPlay.className = "px-video-play hide";
- obj.btnPause.className = "px-video-pause px-video-show-inline";
- obj.btnPause.focus();
+ // Click video
+ obj.videoContainer.addEventListener("click", function() {
+ if(obj.movie.paused) {
+ play();
+ }
+ else if(obj.movie.ended) {
+ restart();
+ }
+ else {
+ pause();
+ }
}, false);
- // Pause
- obj.btnPause.addEventListener("click", function() {
- obj.movie.pause();
+ function play() {
+ obj.movie.play();
+ obj.container.className = obj.container.className.replace("stopped", "playing");
+
+ }
+ 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);*/ \ No newline at end of file
+} \ No newline at end of file
diff --git a/assets/less/docs.less b/assets/less/docs.less
index 05b19a48..57b4ad9e 100644
--- a/assets/less/docs.less
+++ b/assets/less/docs.less
@@ -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;
} \ No newline at end of file
diff --git a/assets/less/simple-player.less b/assets/less/simple-media.less
index a935e09e..ec83f4e0 100644
--- a/assets/less/simple-player.less
+++ b/assets/less/simple-media.less
@@ -4,12 +4,25 @@
// Variables
// -------------------------------
-@base-color: #2E3C44;
-@green: #1ABC9C;
-@red: #D44334;
-//@green: #4CB953;
-@blue: #3498DB;
-@control-color: @blue;
+// Colors
+@base-color: #2E3C44;
+@green: #1ABC9C;
+@red: #D44334;
+@blue: #3498DB;
+
+// 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,24 +182,31 @@
}
progress {
position: absolute;
- top: -10px;
+ top: 0;
left: 0;
right: 0;
width: 100%;
- height: 10px;
+ height: @control-spacing;
margin: 0;
vertical-align: top;
-
+
&[value] {
/* 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;
+ }
-/* containers */
-.px-video-img-captions-container * {
- box-sizing: border-box;
+ /* 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%;
+ }
+ }
}
-.px-video-img-captions-container {
- position: relative;
-}
+
+/* containers */
/* 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'] {
diff --git a/assets/templates/controls.html b/assets/templates/controls.html
index 2fc38196..7434f9c9 100644
--- a/assets/templates/controls.html
+++ b/assets/templates/controls.html
@@ -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>
diff --git a/dist/css/docs.css b/dist/css/docs.css
index 9372da09..6269d78c 100644
--- a/dist/css/docs.css
+++ b/dist/css/docs.css
@@ -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} \ No newline at end of file
+/*! 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} \ No newline at end of file
diff --git a/dist/css/simple-media.css b/dist/css/simple-media.css
new file mode 100644
index 00000000..cdf99575
--- /dev/null
+++ b/dist/css/simple-media.css
@@ -0,0 +1 @@
+.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.sr-only{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}.hide{display:none}.show-inline{display:inline-block}.player{position:relative;max-width:100%;overflow:hidden;background:#000}.player-video{position:relative}.player:-webkit-full-screen{height:100%;width:100%}.player:-moz-full-screen{height:100%;width:100%}.player:-ms-fullscreen{height:100%;width:100%}.player:fullscreen{height:100%;width:100%}.player:-webkit-full-screen .player-video{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.player:-moz-full-screen .player-video{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.player:-ms-fullscreen .player-video{position:absolute;top:50%;left:0;right:0;-ms-transform:translateY(-50%);transform:translateY(-50%)}.player:fullscreen .player-video{position:absolute;top:50%;left:0;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.player:-webkit-full-screen .controls{position:absolute;bottom:0;left:0;right:0}.player:-moz-full-screen .controls{position:absolute;bottom:0;left:0;right:0}.player:-ms-fullscreen .controls{position:absolute;bottom:0;left:0;right:0}.player:fullscreen .controls{position:absolute;bottom:0;left:0;right:0}.player:-webkit-full-screen .controls .icon-exit-fullscreen{display:block}.player:-moz-full-screen .controls .icon-exit-fullscreen{display:block}.player:-ms-fullscreen .controls .icon-exit-fullscreen{display:block}.player:fullscreen .controls .icon-exit-fullscreen{display:block}.player:-webkit-full-screen .controls .icon-exit-fullscreen+svg{display:none}.player:-moz-full-screen .controls .icon-exit-fullscreen+svg{display:none}.player:-ms-fullscreen .controls .icon-exit-fullscreen+svg{display:none}.player:fullscreen .controls .icon-exit-fullscreen+svg{display:none}.player video{width:100%;height:auto;vertical-align:middle}.player svg{width:18px;height:18px}.player .px-video-captions{position:absolute;bottom:0;left:0;width:100%;padding:20px;min-height:2.5em;color:#fff;font-size:24px;text-shadow:0 1px 1px rgba(0,0,0,.75);text-align:center;-webkit-font-smoothing:antialiased;font-weight:500}.player .controls{zoom:1;position:relative;padding:20px 10px 10px;background:#343f4a;line-height:1}.player .controls:after,.player .controls:before{content:"";display:table}.player .controls:after{clear:both}.player .controls button{border:0;background:0 0;overflow:hidden}.player .controls button,.player .controls label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;color:#cbd0d3;transition:background .3s ease;border-radius:3px}.player .controls button svg,.player .controls label svg{display:block;fill:currentColor;transition:fill .3s ease}.player .controls button:focus,.player .controls label:focus{outline:0}.player .controls button:hover,.player .controls label:hover{background:#3498db}.player .controls button:focus svg,.player .controls button:hover svg,.player .controls label:focus svg,.player .controls label:hover svg{fill:#fff}.player .controls .icon-exit-fullscreen{display:none}.player .controls .px-video-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#fff;font-weight:600;font-size:14px;-webkit-font-smoothing:antialiased}.player progress{position:absolute;top:0;left:0;right:0;width:100%;height:10px;margin:0;vertical-align:top}.player progress[value]{-webkit-appearance:none;border:none;background:#565d64;cursor:pointer}.player progress[value]::-webkit-progress-bar{background:#565d64}.player progress[value]::-webkit-progress-value{background:#3498db}.player progress[value]::-moz-progress-bar{background:#3498db}.player .play-controls{float:left}.player .sound-controls{float:right}.player .controls .px-video-pause,.player.playing .controls .px-video-play{display:none}.player.playing .controls .px-video-pause{display:inline-block}.player input[type=range]{-webkit-appearance:none;height:6px;width:100px;margin-right:10px;background:#565d64;outline:0;border-radius:10px}.player input[type=range]:focus::-webkit-slider-thumb{background:#3498db}.player input[type=range]::-moz-range-track{-moz-appearance:none;height:6px;background:#565d64;border:none;border-radius:10px}.player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;height:12px;width:12px;background:#cbd0d3;border-radius:100%;transition:background .3s ease}.player input[type=range]::-moz-range-thumb{height:12px;width:12px;background:#cbd0d3;border-radius:100%}.px-video-captions-btn-container label{display:inline-block;width:25px;height:20px;margin-left:25px;background:url(../images/px-video-sprite.png) -6px -835px no-repeat}.px-video-captions-btn-container input[type=checkbox]:hover+label{background-position:-6px -799px;cursor:pointer}.px-video-captions-btn-container input[type=checkbox]:focus+label{outline:#999 dotted 1px;background-position:-6px -799px}.px-video-captions-btn-container input[type=checkbox]:checked+label{background-position:-6px -871px}.px-video-mute-btn-container label{display:inline-block;width:25px;height:20px;margin-left:240px;margin-top:2px;background:url(../images/px-video-sprite.png) -6px -476px no-repeat}.px-video-mute-btn-container input[type=checkbox]:hover+label{background-position:-6px -440px;cursor:pointer}.px-video-mute-btn-container input[type=checkbox]:focus+label{outline:#999 dotted 1px;background-position:-6px -440px}.px-video-mute-btn-container input[type=checkbox]:checked+label{background-position:-6px -692px}.px-video-mute-btn-container input[type=checkbox]:checked:focus+label,.px-video-mute-btn-container input[type=checkbox]:checked:hover+label{background-position:-6px -656px}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.px-video-controls input[type=range]{position:relative;padding:0;height:8px;top:-3px}.px-video-time{margin-top:4px}.px-video-captions{padding:8px;min-height:36px}} \ No newline at end of file
diff --git a/dist/js/docs.js b/dist/js/docs.js
index 98c30afa..581329da 100644
--- a/dist/js/docs.js
+++ b/dist/js/docs.js
@@ -1 +1 @@
-var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,i,r){function a(){}function o(){}a.prototype=t,o.prototype=t.subs;var l,u=new a;u.subs=new o,u.subsText={},u.buf="",s=s||{},u.stackSubs=s,u.subsText=r;for(l in n)s[l]||(s[l]=n[l]);for(l in s)u.subs[l]=s[l];i=i||{},u.stackPartials=i;for(l in e)i[l]||(i[l]=e[l]);for(l in i)u.partials[l]=i[l];return u}function s(t){return String(null===t||void 0===t?"":t)}function i(t){return t=s(t),c.test(t)?t.replace(r,"&amp;").replace(a,"&lt;").replace(o,"&gt;").replace(l,"&#39;").replace(u,"&quot;"):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:i,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],i=n[s.name];if(s.instance&&s.base==i)return s.instance;if("string"==typeof i){if(!this.c)throw new Error("No compiler available.");i=this.c.compile(i,this.options)}if(!i)return null;if(this.partials[t].base=i,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);i=e(i,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=i,i},rp:function(t,n,e,s){var i=this.ep(t,e);return i?i.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var i=0;i<s.length;i++)t.push(s[i]),e(t,n,this),t.pop()},s:function(t,n,e,s,i,r,a){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,i,r,a)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,i){var r,a=t.split("."),o=this.f(a[0],e,s,i),l=this.options.modelGet,u=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var c=1;c<a.length;c++)r=n(a[c],o,l),void 0!==r?(u=o,o=r):o="";return i&&!o?!1:(i||"function"!=typeof o||(e.push(u),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,i){for(var r=!1,a=null,o=!1,l=this.options.modelGet,u=e.length-1;u>=0;u--)if(a=e[u],r=n(t,a,l),void 0!==r){o=!0;break}return o?(i||"function"!=typeof r||(r=this.mv(r,e,s)),r):i?!1:""},ls:function(t,n,e,i,r){var a=this.options.delimiters;return this.options.delimiters=r,this.b(this.ct(s(t.call(n,i)),n,e)),this.options.delimiters=a,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,i,r,a){var o,l=n[n.length-1],u=t.call(l);return"function"==typeof u?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(u,l,e,o.substring(i,r),a)):u},mv:function(t,n,e){var i=n[n.length-1],r=t.call(i);return"function"==typeof r?this.ct(s(r.call(i)),i,e):r},sub:function(t,n,e,s){var i=this.subs[t];i&&(this.activeSub=t,i(n,e,this,s),this.activeSub=!1)}};var r=/&/g,a=/</g,o=/>/g,l=/\'/g,u=/\"/g,c=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,i=t.length;i>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function i(n,e,s,o){var l=[],u=null,c=null,p=null;for(c=s[s.length-1];n.length>0;){if(p=n.shift(),c&&"<"==c.tag&&!(p.tag in w))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||r(p,o))s.push(p),p.nodes=i(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(u=s.pop(),p.n!=u.n&&!a(p.n,u.n,o))throw new Error("Nesting error: "+u.n+" vs. "+p.n);return u.end=p.i,l}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}l.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return l}function r(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function a(t,n,e){for(var s=0,i=e.length;i>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+u(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function l(t){var n=[];for(var e in t.partials)n.push('"'+u(e)+'":{name:"'+u(t.partials[e].name)+'", '+l(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function u(t){return t.replace(m,"\\\\").replace(d,'\\"').replace(v,"\\n").replace(g,"\\r").replace(x,"\\u2028").replace(y,"\\u2029")}function c(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+k++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+u(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var h=/\S/,d=/\"/g,v=/\n/g,g=/\r/g,m=/\\/g,x=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(i,r){function a(){m.length>0&&(x.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=k;e<x.length;e++)if(n=t.tags[x[e].tag]<t.tags._v||"_t"==x[e].tag&&null===x[e].text.match(h),!n)return!1;return n}function l(t,n){if(a(),t&&o())for(var e,s=k;s<x.length;s++)x[s].text&&((e=x[s+1])&&">"==e.tag&&(e.indent=x[s].text.toString()),x.splice(s,1));else n||x.push({tag:"\n"});y=!1,k=x.length}function u(t,n){var s="="+S,i=t.indexOf(s,n),r=e(t.substring(t.indexOf("=",n)+1,i)).split(" ");return T=r[0],S=r[r.length-1],i+s.length-1}var c=i.length,p=0,b=1,f=2,d=p,v=null,g=null,m="",x=[],y=!1,w=0,k=0,T="{{",S="}}";for(r&&(r=r.split(" "),T=r[0],S=r[1]),w=0;c>w;w++)d==p?s(T,i,w)?(--w,a(),d=b):"\n"==i.charAt(w)?l(y):m+=i.charAt(w):d==b?(w+=T.length-1,g=t.tags[i.charAt(w+1)],v=g?i.charAt(w+1):"_v","="==v?(w=u(i,w),d=p):(g&&w++,d=f),y=w):s(S,i,w)?(x.push({tag:v,n:e(m),otag:T,ctag:S,i:"/"==v?y-T.length:w+S.length}),m="",w+=S.length-1,d=p,"{"==v&&("}}"==S?w++:n(x[x.length-1]))):m+=i.charAt(w);return l(y,!0),x};var w={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+l(n)+"}"};var k=0;t.generate=function(n,e,s){k=0;var i={code:"",subs:{},partials:{}};return t.walk(n,i),s.asString?this.stringify(i,e,s):this.makeTemplate(i,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+c(n.n)+'("'+u(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+c(n.n)+'("'+u(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var i=e.partials[p(n,e)];i.subs=s.subs,i.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+u(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+c(t.n)+'("'+u(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+u(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,i=0,r=n.length;r>i;i++)s=t.codegen[n[i].tag],s&&s(n[i],e);return e},t.parse=function(t,n,e){return e=e||{},i(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),i=this.cache[s];if(i){var r=i.partials;for(var a in r)delete r[a].instance;return i}return i=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=i}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,i){var r=this.f(n,e,s,0),a=e;return r&&(a=a.concat(r)),t.Template.prototype.rp.call(this,n,a,s,i)}var e=function(e,s,i){this.rp=n,t.Template.call(this,e,s,i)};e.prototype=t.Template.prototype;var s,i=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return i.prototype=t,s=new i,{to_html:function(t,n,e,i){var r=s.compile(t),a=r.render(n,e);return i?(i(a),void 0):a}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="controls">'),s.b("\n"+e),s.b(' <progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>'),s.b("\n"),s.b("\n"+e),s.b(' <div class="play-controls">'),s.b("\n"+e),s.b(' <button class="px-video-restart" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-refresh"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-rewind" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind <span class="px-seconds">10</span> seconds</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-play" aria-label="{aria-label}" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-pause hide" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-forward" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Fast forward <span class="px-seconds">10</span> seconds</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <div class="px-video-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Time</span>'),s.b("\n"+e),s.b(' <span class="px-video-duration">00:00</span>'),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"),s.b("\n"+e),s.b(' <div class="sound-controls">'),s.b("\n"+e),s.b(' <!--<div class="px-video-mute-btn-container">-->'),s.b("\n"+e),s.b(' <input class="px-video-mute sr-only" id="btnMute{id}" type="checkbox">'),s.b("\n"+e),s.b(' <label id="labelMute{id}" for="btnMute{id}">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-sound"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"+e),s.b(" <!--</div>-->"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume:</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="px-video-volume" type="range" min="0" max="10" value="5">'),s.b("\n"),s.b("\n"+e),s.b(' <!--<div class="px-video-captions-btn-container hide">-->'),s.b("\n"+e),s.b(' <input class="px-video-btnCaptions sr-only" id="btnCaptions{id}" type="checkbox">'),s.b("\n"+e),s.b(' <label for="btnCaptions{id}">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-film"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"+e),s.b(" <!--</div>-->"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b("</div>"),s.b("\n"),s.fl()},partials:{},subs:{}});var video=new InitPxVideo({videoId:"myvid",captionsOnDefault:!0,seekInterval:20,videoTitle:"PayPal Austin promo",debug:!0,html:templates.controls.render({})});console.log(video); \ No newline at end of file
+var Hogan={};!function(t){function n(t,n,e){var s;return n&&"object"==typeof n&&(void 0!==n[t]?s=n[t]:e&&n.get&&"function"==typeof n.get&&(s=n.get(t))),s}function e(t,n,e,s,i,r){function a(){}function o(){}a.prototype=t,o.prototype=t.subs;var l,c=new a;c.subs=new o,c.subsText={},c.buf="",s=s||{},c.stackSubs=s,c.subsText=r;for(l in n)s[l]||(s[l]=n[l]);for(l in s)c.subs[l]=s[l];i=i||{},c.stackPartials=i;for(l in e)i[l]||(i[l]=e[l]);for(l in i)c.partials[l]=i[l];return c}function s(t){return String(null===t||void 0===t?"":t)}function i(t){return t=s(t),u.test(t)?t.replace(r,"&amp;").replace(a,"&lt;").replace(o,"&gt;").replace(l,"&#39;").replace(c,"&quot;"):t}t.Template=function(t,n,e,s){t=t||{},this.r=t.code||this.r,this.c=e,this.options=s||{},this.text=n||"",this.partials=t.partials||{},this.subs=t.subs||{},this.buf=""},t.Template.prototype={r:function(){return""},v:i,t:s,render:function(t,n,e){return this.ri([t],n||{},e)},ri:function(t,n,e){return this.r(t,n,e)},ep:function(t,n){var s=this.partials[t],i=n[s.name];if(s.instance&&s.base==i)return s.instance;if("string"==typeof i){if(!this.c)throw new Error("No compiler available.");i=this.c.compile(i,this.options)}if(!i)return null;if(this.partials[t].base=i,s.subs){n.stackText||(n.stackText={});for(key in s.subs)n.stackText[key]||(n.stackText[key]=void 0!==this.activeSub&&n.stackText[this.activeSub]?n.stackText[this.activeSub]:this.text);i=e(i,s.subs,s.partials,this.stackSubs,this.stackPartials,n.stackText)}return this.partials[t].instance=i,i},rp:function(t,n,e,s){var i=this.ep(t,e);return i?i.ri(n,e,s):""},rs:function(t,n,e){var s=t[t.length-1];if(!p(s))return e(t,n,this),void 0;for(var i=0;i<s.length;i++)t.push(s[i]),e(t,n,this),t.pop()},s:function(t,n,e,s,i,r,a){var o;return p(t)&&0===t.length?!1:("function"==typeof t&&(t=this.ms(t,n,e,s,i,r,a)),o=!!t,!s&&o&&n&&n.push("object"==typeof t?t:n[n.length-1]),o)},d:function(t,e,s,i){var r,a=t.split("."),o=this.f(a[0],e,s,i),l=this.options.modelGet,c=null;if("."===t&&p(e[e.length-2]))o=e[e.length-1];else for(var u=1;u<a.length;u++)r=n(a[u],o,l),void 0!==r?(c=o,o=r):o="";return i&&!o?!1:(i||"function"!=typeof o||(e.push(c),o=this.mv(o,e,s),e.pop()),o)},f:function(t,e,s,i){for(var r=!1,a=null,o=!1,l=this.options.modelGet,c=e.length-1;c>=0;c--)if(a=e[c],r=n(t,a,l),void 0!==r){o=!0;break}return o?(i||"function"!=typeof r||(r=this.mv(r,e,s)),r):i?!1:""},ls:function(t,n,e,i,r){var a=this.options.delimiters;return this.options.delimiters=r,this.b(this.ct(s(t.call(n,i)),n,e)),this.options.delimiters=a,!1},ct:function(t,n,e){if(this.options.disableLambda)throw new Error("Lambda features disabled.");return this.c.compile(t,this.options).render(n,e)},b:function(t){this.buf+=t},fl:function(){var t=this.buf;return this.buf="",t},ms:function(t,n,e,s,i,r,a){var o,l=n[n.length-1],c=t.call(l);return"function"==typeof c?s?!0:(o=this.activeSub&&this.subsText&&this.subsText[this.activeSub]?this.subsText[this.activeSub]:this.text,this.ls(c,l,e,o.substring(i,r),a)):c},mv:function(t,n,e){var i=n[n.length-1],r=t.call(i);return"function"==typeof r?this.ct(s(r.call(i)),i,e):r},sub:function(t,n,e,s){var i=this.subs[t];i&&(this.activeSub=t,i(n,e,this,s),this.activeSub=!1)}};var r=/&/g,a=/</g,o=/>/g,l=/\'/g,c=/\"/g,u=/[&<>\"\']/,p=Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)}}("undefined"!=typeof exports?exports:Hogan),function(t){function n(t){"}"===t.n.substr(t.n.length-1)&&(t.n=t.n.substring(0,t.n.length-1))}function e(t){return t.trim?t.trim():t.replace(/^\s*|\s*$/g,"")}function s(t,n,e){if(n.charAt(e)!=t.charAt(0))return!1;for(var s=1,i=t.length;i>s;s++)if(n.charAt(e+s)!=t.charAt(s))return!1;return!0}function i(n,e,s,o){var l=[],c=null,u=null,p=null;for(u=s[s.length-1];n.length>0;){if(p=n.shift(),u&&"<"==u.tag&&!(p.tag in w))throw new Error("Illegal content in < super tag.");if(t.tags[p.tag]<=t.tags.$||r(p,o))s.push(p),p.nodes=i(n,p.tag,s,o);else{if("/"==p.tag){if(0===s.length)throw new Error("Closing tag without opener: /"+p.n);if(c=s.pop(),p.n!=c.n&&!a(p.n,c.n,o))throw new Error("Nesting error: "+c.n+" vs. "+p.n);return c.end=p.i,l}"\n"==p.tag&&(p.last=0==n.length||"\n"==n[0].tag)}l.push(p)}if(s.length>0)throw new Error("missing closing tag: "+s.pop().n);return l}function r(t,n){for(var e=0,s=n.length;s>e;e++)if(n[e].o==t.n)return t.tag="#",!0}function a(t,n,e){for(var s=0,i=e.length;i>s;s++)if(e[s].c==t&&e[s].o==n)return!0}function o(t){var n=[];for(var e in t)n.push('"'+c(e)+'": function(c,p,t,i) {'+t[e]+"}");return"{ "+n.join(",")+" }"}function l(t){var n=[];for(var e in t.partials)n.push('"'+c(e)+'":{name:"'+c(t.partials[e].name)+'", '+l(t.partials[e])+"}");return"partials: {"+n.join(",")+"}, subs: "+o(t.subs)}function c(t){return t.replace(m,"\\\\").replace(d,'\\"').replace(g,"\\n").replace(v,"\\r").replace(x,"\\u2028").replace(y,"\\u2029")}function u(t){return~t.indexOf(".")?"d":"f"}function p(t,n){var e="<"+(n.prefix||""),s=e+t.n+k++;return n.partials[s]={name:t.n,partials:{}},n.code+='t.b(t.rp("'+c(s)+'",c,p,"'+(t.indent||"")+'"));',s}function b(t,n){n.code+="t.b(t.t(t."+u(t.n)+'("'+c(t.n)+'",c,p,0)));'}function f(t){return"t.b("+t+");"}var h=/\S/,d=/\"/g,g=/\n/g,v=/\r/g,m=/\\/g,x=/\u2028/,y=/\u2029/;t.tags={"#":1,"^":2,"<":3,$:4,"/":5,"!":6,">":7,"=":8,_v:9,"{":10,"&":11,_t:12},t.scan=function(i,r){function a(){m.length>0&&(x.push({tag:"_t",text:new String(m)}),m="")}function o(){for(var n=!0,e=k;e<x.length;e++)if(n=t.tags[x[e].tag]<t.tags._v||"_t"==x[e].tag&&null===x[e].text.match(h),!n)return!1;return n}function l(t,n){if(a(),t&&o())for(var e,s=k;s<x.length;s++)x[s].text&&((e=x[s+1])&&">"==e.tag&&(e.indent=x[s].text.toString()),x.splice(s,1));else n||x.push({tag:"\n"});y=!1,k=x.length}function c(t,n){var s="="+S,i=t.indexOf(s,n),r=e(t.substring(t.indexOf("=",n)+1,i)).split(" ");return T=r[0],S=r[r.length-1],i+s.length-1}var u=i.length,p=0,b=1,f=2,d=p,g=null,v=null,m="",x=[],y=!1,w=0,k=0,T="{{",S="}}";for(r&&(r=r.split(" "),T=r[0],S=r[1]),w=0;u>w;w++)d==p?s(T,i,w)?(--w,a(),d=b):"\n"==i.charAt(w)?l(y):m+=i.charAt(w):d==b?(w+=T.length-1,v=t.tags[i.charAt(w+1)],g=v?i.charAt(w+1):"_v","="==g?(w=c(i,w),d=p):(v&&w++,d=f),y=w):s(S,i,w)?(x.push({tag:g,n:e(m),otag:T,ctag:S,i:"/"==g?y-T.length:w+S.length}),m="",w+=S.length-1,d=p,"{"==g&&("}}"==S?w++:n(x[x.length-1]))):m+=i.charAt(w);return l(y,!0),x};var w={_t:!0,"\n":!0,$:!0,"/":!0};t.stringify=function(n){return"{code: function (c,p,i) { "+t.wrapMain(n.code)+" },"+l(n)+"}"};var k=0;t.generate=function(n,e,s){k=0;var i={code:"",subs:{},partials:{}};return t.walk(n,i),s.asString?this.stringify(i,e,s):this.makeTemplate(i,e,s)},t.wrapMain=function(t){return'var t=this;t.b(i=i||"");'+t+"return t.fl();"},t.template=t.Template,t.makeTemplate=function(t,n,e){var s=this.makePartials(t);return s.code=new Function("c","p","i",this.wrapMain(t.code)),new this.template(s,n,this,e)},t.makePartials=function(t){var n,e={subs:{},partials:t.partials,name:t.name};for(n in e.partials)e.partials[n]=this.makePartials(e.partials[n]);for(n in t.subs)e.subs[n]=new Function("c","p","t","i",t.subs[n]);return e},t.codegen={"#":function(n,e){e.code+="if(t.s(t."+u(n.n)+'("'+c(n.n)+'",c,p,1),c,p,0,'+n.i+","+n.end+',"'+n.otag+" "+n.ctag+'")){t.rs(c,p,function(c,p,t){',t.walk(n.nodes,e),e.code+="});c.pop();}"},"^":function(n,e){e.code+="if(!t.s(t."+u(n.n)+'("'+c(n.n)+'",c,p,1),c,p,1,0,0,"")){',t.walk(n.nodes,e),e.code+="};"},">":p,"<":function(n,e){var s={partials:{},code:"",subs:{},inPartial:!0};t.walk(n.nodes,s);var i=e.partials[p(n,e)];i.subs=s.subs,i.partials=s.partials},$:function(n,e){var s={subs:{},code:"",partials:e.partials,prefix:n.n};t.walk(n.nodes,s),e.subs[n.n]=s.code,e.inPartial||(e.code+='t.sub("'+c(n.n)+'",c,p,i);')},"\n":function(t,n){n.code+=f('"\\n"'+(t.last?"":" + i"))},_v:function(t,n){n.code+="t.b(t.v(t."+u(t.n)+'("'+c(t.n)+'",c,p,0)));'},_t:function(t,n){n.code+=f('"'+c(t.text)+'"')},"{":b,"&":b},t.walk=function(n,e){for(var s,i=0,r=n.length;r>i;i++)s=t.codegen[n[i].tag],s&&s(n[i],e);return e},t.parse=function(t,n,e){return e=e||{},i(t,"",[],e.sectionTags||[])},t.cache={},t.cacheKey=function(t,n){return[t,!!n.asString,!!n.disableLambda,n.delimiters,!!n.modelGet].join("||")},t.compile=function(n,e){e=e||{};var s=t.cacheKey(n,e),i=this.cache[s];if(i){var r=i.partials;for(var a in r)delete r[a].instance;return i}return i=this.generate(this.parse(this.scan(n,e.delimiters),n,e),n,e),this.cache[s]=i}}("undefined"!=typeof exports?exports:Hogan);var Mustache=function(t){function n(n,e,s,i){var r=this.f(n,e,s,0),a=e;return r&&(a=a.concat(r)),t.Template.prototype.rp.call(this,n,a,s,i)}var e=function(e,s,i){this.rp=n,t.Template.call(this,e,s,i)};e.prototype=t.Template.prototype;var s,i=function(){this.cache={},this.generate=function(t,n){return new e(new Function("c","p","i",t),n,s)}};return i.prototype=t,s=new i,{to_html:function(t,n,e,i){var r=s.compile(t),a=r.render(n,e);return i?(i(a),void 0):a}}}(Hogan),templates={};templates.controls=new Hogan.Template({code:function(t,n,e){var s=this;return s.b(e=e||""),s.b('<div class="controls">'),s.b("\n"+e),s.b(' <progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>'),s.b("\n"),s.b("\n"+e),s.b(' <div class="play-controls">'),s.b("\n"+e),s.b(' <button class="px-video-restart" data-player="restart">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-refresh"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Restart</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-rewind" data-player="rewind">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-rewind"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Rewind <span class="px-seconds">10</span> seconds</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-play" aria-label="{aria-label}" data-player="play">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-play"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Play</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-pause" data-player="pause">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-pause"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Pause</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <button class="px-video-forward" data-player="fast-forward">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-fast-forward"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Fast forward <span class="px-seconds">10</span> seconds</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(' <div class="px-video-time">'),s.b("\n"+e),s.b(' <span class="sr-only">Time</span>'),s.b("\n"+e),s.b(' <span class="px-video-duration">00:00</span>'),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"),s.b("\n"+e),s.b(' <div class="sound-controls">'),s.b("\n"+e),s.b(' <!--<div class="px-video-mute-btn-container">-->'),s.b("\n"+e),s.b(' <input class="px-video-mute sr-only" id="btnMute{id}" type="checkbox">'),s.b("\n"+e),s.b(' <label id="labelMute{id}" for="btnMute{id}">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-sound"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Mute</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"+e),s.b(" <!--</div>-->"),s.b("\n"),s.b("\n"+e),s.b(' <label for="volume{id}" class="sr-only">Volume:</label>'),s.b("\n"+e),s.b(' <input id="volume{id}" class="px-video-volume" type="range" min="0" max="10" value="5">'),s.b("\n"),s.b("\n"+e),s.b(' <!--<div class="px-video-captions-btn-container hide">-->'),s.b("\n"+e),s.b(' <input class="px-video-btnCaptions sr-only" id="btnCaptions{id}" type="checkbox">'),s.b("\n"+e),s.b(' <label for="btnCaptions{id}">'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-film"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Captions</span>'),s.b("\n"+e),s.b(" </label>"),s.b("\n"+e),s.b(" <!--</div>-->"),s.b("\n"),s.b("\n"+e),s.b(' <button class="player-toggle-fullscreen" data-player="toggle-fullscreen">'),s.b("\n"+e),s.b(' <svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>'),s.b("\n"+e),s.b(' <svg><use xlink:href="#icon-expand"></use></svg>'),s.b("\n"+e),s.b(' <span class="sr-only">Toggle fullscreen</span>'),s.b("\n"+e),s.b(" </button>"),s.b("\n"+e),s.b(" </div>"),s.b("\n"+e),s.b("</div>"),s.b("\n"),s.fl()},partials:{},subs:{}});var video=new InitPxVideo({videoId:"myvid",captionsOnDefault:!0,seekInterval:20,videoTitle:"PayPal Austin promo",debug:!0,html:templates.controls.render({})});console.log(video); \ No newline at end of file
diff --git a/dist/js/simple-media.js b/dist/js/simple-media.js
new file mode 100644
index 00000000..6044bf06
--- /dev/null
+++ b/dist/js/simple-media.js
@@ -0,0 +1 @@
+function InitPxVideo(e){"use strict";function n(e){var n=window.fullscreen.isFullScreen()?{x:0,y:0}:t(e.currentTarget);return{x:e.clientX-n.x,y:e.clientY-n.y}}function t(e){for(var n=0,t=0;e;)n+=e.offsetLeft-e.scrollLeft+e.clientLeft,t+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:n,y:t}}function r(e){var n=[];return n=e.split(" --> "),o(n[0])}function i(e){var n=[];return n=e.split(" --> "),o(n[1])}function o(e){if(null===e||void 0===e)return 0;var n,t=[],r=[];return t=e.split(","),r=t[0].split(":"),n=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function a(e){for(e.subcount=0;i(e.captions[e.subcount][0])<e.movie.currentTime.toFixed(1);)if(e.subcount++,e.subcount>e.captions.length-1){e.subcount=e.captions.length-1;break}}function s(e){e.isCaptionDefault&&(e.captionsContainer.className="px-video-captions show",e.captionsBtn.setAttribute("checked","checked"))}function c(){var e,n,t,r=navigator.userAgent,i=navigator.appName,o=""+parseFloat(navigator.appVersion),a=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(i="IE",o="11;"):-1!==(n=r.indexOf("MSIE"))?(i="IE",o=r.substring(n+5)):-1!==(n=r.indexOf("Chrome"))?(i="Chrome",o=r.substring(n+7)):-1!==(n=r.indexOf("Safari"))?(i="Safari",o=r.substring(n+7),-1!==(n=r.indexOf("Version"))&&(o=r.substring(n+8))):-1!==(n=r.indexOf("Firefox"))?(i="Firefox",o=r.substring(n+8)):(e=r.lastIndexOf(" ")+1)<(n=r.lastIndexOf("/"))&&(i=r.substring(e,n),o=r.substring(n+1),i.toLowerCase()==i.toUpperCase()&&(i=navigator.appName)),-1!==(t=o.indexOf(";"))&&(o=o.substring(0,t)),-1!==(t=o.indexOf(" "))&&(o=o.substring(0,t)),a=parseInt(""+o,10),isNaN(a)&&(o=""+parseFloat(navigator.appVersion),a=parseInt(navigator.appVersion,10)),[i,a]}function l(){p.movie.play(),p.container.className=p.container.className.replace("stopped","playing")}function u(){p.movie.pause(),p.container.className=p.container.className.replace("playing","stopped")}function d(){p.movie.currentTime=0,p.isTextTracks||(p.subcount=0),l()}String.prototype.replaceAll||Object.defineProperty(String.prototype,"replaceAll",{value:function(e,n){return this.replace(new RegExp(e.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}});var p={};if(p.arBrowserInfo=c(),p.browserName=p.arBrowserInfo[0],p.browserMajorVersion=p.arBrowserInfo[1],"IE"===p.browserName&&(8===p.browserMajorVersion||9===p.browserMajorVersion))return!1;if(p.isSmartphoneOrTablet=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),p.isSmartphoneOrTablet)return!1;"undefined"==typeof e.debug&&(e.debug=!1),p.debug=e.debug,e.debug&&console.log(p.browserName+" "+p.browserMajorVersion),p.playAriaLabel="undefined"==typeof e.videoTitle||""===e.videoTitle?"Play":"Play video, "+e.videoTitle,p.container=document.getElementById(e.videoId),p.container.className=p.container.className+" stopped",p.movie=p.container.getElementsByTagName("video")[0],p.controls=p.container.getElementsByClassName("px-video-controls")[0],p.movie.removeAttribute("controls"),p.randomNum=Math.floor(1e4*Math.random()),e.debug&&console.log("Inserting custom video controls"),p.controls.innerHTML=e.html.replaceAll("{aria-label}",p.playAriaLabel).replaceAll("{id}",p.randomNum),p.labelMute=document.getElementById("labelMute"+p.randomNum),p.labelMuteOffset=p.movieWidth-390,p.labelMuteOffset<0&&(p.labelMuteOffset=0),p.labelMute.setAttribute("style","margin-left:"+p.labelMuteOffset+"px");for(var m,f="",v=p.movie.childNodes,g=0;g<v.length;g++)"track"===v[g].nodeName.toLowerCase()&&(m=v[g].getAttribute("kind"),"captions"===m&&(f=v[g].getAttribute("src")));if(p.captionExists=!0,""===f?(p.captionExists=!1,e.debug&&console.log("No caption track found.")):e.debug&&console.log("Caption track found; URI: "+f),"undefined"==typeof e.captionsOnDefault&&(e.captionsOnDefault=!0),p.isCaptionDefault=e.captionsOnDefault,"undefined"==typeof e.seekInterval&&(e.seekInterval=10),p.seekInterval=e.seekInterval,p.btnPlay=p.container.getElementsByClassName("px-video-play")[0],p.btnPause=p.container.getElementsByClassName("px-video-pause")[0],p.btnRestart=p.container.getElementsByClassName("px-video-restart")[0],p.btnRewind=p.container.getElementsByClassName("px-video-rewind")[0],p.btnForward=p.container.getElementsByClassName("px-video-forward")[0],p.btnVolume=p.container.getElementsByClassName("px-video-volume")[0],p.btnMute=p.container.getElementsByClassName("px-video-mute")[0],p.progressBar=p.container.getElementsByClassName("px-video-progress")[0],p.progressBarSpan=p.progressBar.getElementsByTagName("span")[0],p.captionsContainer=p.container.getElementsByClassName("px-video-captions")[0],p.captionsBtn=p.container.getElementsByClassName("px-video-btnCaptions")[0],p.captionsBtnContainer=p.container.getElementsByClassName("px-video-captions-btn-container")[0],p.duration=p.container.getElementsByClassName("px-video-duration")[0],p.txtSeconds=p.container.getElementsByClassName("px-seconds"),p.toggleFullscreen=p.container.querySelector("[data-player='toggle-fullscreen']"),p.videoContainer=p.container.querySelector(".player-video"),p.txtSeconds[0].innerHTML=p.seekInterval,p.txtSeconds[1].innerHTML=p.seekInterval,p.isTextTracks=!1,p.movie.textTracks&&(p.isTextTracks=!0),p.toggleFullscreen.addEventListener("click",function(){window.fullscreen.isFullScreen()?window.fullscreen.cancelFullScreen():window.fullscreen.requestFullScreen(p.container)},!1),p.videoContainer.addEventListener("click",function(){p.movie.paused?l():p.movie.ended?d():u()},!1),p.btnPlay.addEventListener("click",function(){l(),p.btnPause.focus()},!1),p.btnPause.addEventListener("click",function(){u(),p.btnPlay.focus()},!1),p.btnRestart.addEventListener("click",d,!1),p.btnRewind.addEventListener("click",function(){var e=p.movie.currentTime-p.seekInterval;p.movie.currentTime=0>e?0:e,p.isTextTracks||a(p)},!1),p.btnForward.addEventListener("click",function(){var e=p.movie.currentTime+p.seekInterval;p.movie.currentTime=e>p.movie.duration?p.movie.duration:e,p.isTextTracks||a(p)},!1),p.btnVolume.addEventListener("change",function(){p.movie.volume=parseFloat(this.value/10)},!1),p.btnMute.addEventListener("click",function(){p.movie.muted=p.movie.muted===!0?!1:!0},!1),p.movie.addEventListener("timeupdate",function(){p.secs=parseInt(p.movie.currentTime%60),p.mins=parseInt(p.movie.currentTime/60%60),p.secs=("0"+p.secs).slice(-2),p.mins=("0"+p.mins).slice(-2),p.duration.innerHTML=p.mins+":"+p.secs},!1),p.movie.addEventListener("timeupdate",function(){p.percent=100/p.movie.duration*p.movie.currentTime,p.percent>0&&(p.progressBar.value=p.percent,p.progressBarSpan.innerHTML=p.percent)},!1),p.progressBar.addEventListener("click",function(e){p.pos=n(e).x/this.offsetWidth,p.movie.currentTime=p.pos*p.movie.duration,p.isTextTracks||a(p)}),p.movie.addEventListener("ended",function(){p.captionsContainer.innerHTML=""}),p.captionsBtn.addEventListener("click",function(){p.captionsContainer.className=this.checked?"px-video-captions show":"px-video-captions hide"},!1),p.captionExists){if("IE"===p.browserName&&10===p.browserMajorVersion||"IE"===p.browserName&&11===p.browserMajorVersion||"Firefox"===p.browserName&&p.browserMajorVersion>=31||"Safari"===p.browserName&&p.browserMajorVersion>=7){e.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),p.isTextTracks=!1;for(var b={},x=p.movie.textTracks,T=0;T<x.length;T++)b=p.movie.textTracks[T],b.mode="hidden"}if(p.isTextTracks){e.debug&&console.log("textTracks supported"),s(p);for(var b={},x=p.movie.textTracks,T=0;T<x.length;T++)b=p.movie.textTracks[T],b.mode="hidden","captions"===b.kind&&b.addEventListener("cuechange",function(){this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&(p.captionsContainer.innerHTML=this.activeCues[0].text)},!1)}else if(e.debug&&console.log("textTracks not supported so rendering captions manually"),s(p),p.currentCaption="",p.subcount=0,p.captions=[],p.movie.addEventListener("timeupdate",function(){p.movie.currentTime.toFixed(1)>r(p.captions[p.subcount][0])&&p.movie.currentTime.toFixed(1)<i(p.captions[p.subcount][0])&&(p.currentCaption=p.captions[p.subcount][1]),p.movie.currentTime.toFixed(1)>i(p.captions[p.subcount][0])&&p.subcount<p.captions.length-1&&p.subcount++,p.captionsContainer.innerHTML=p.currentCaption},!1),""!==f){var h;window.XMLHttpRequest?h=new XMLHttpRequest:window.ActiveXObject&&(h=new ActiveXObject("Microsoft.XMLHTTP")),h.onreadystatechange=function(){if(4===h.readyState)if(200===h.status){e.debug&&console.log("xhr = 200"),p.captions=[];var n,t=[],r=h.responseText;t=r.split("\n\n");for(var i=0;i<t.length;i++)n=t[i],p.captions[i]=[],p.captions[i]=n.split("\n");p.captions.shift(),e.debug&&console.log("Successfully loaded the caption file via ajax.")}else e.debug&&console.log("There was a problem loading the caption file via ajax.")},h.open("get",f,!0),h.send()}if("Safari"===p.browserName&&7===p.browserMajorVersion){console.log("Safari 7 detected; removing track from DOM");var x=p.movie.getElementsByTagName("track");p.movie.removeChild(x[0])}}else p.captionsContainer.className="px-video-captions hide"}!function(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},n="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var t=0,r=n.length;r>t;t++)if(e.prefix=n[t],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}"webkit"===e.prefix&&navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)&&(e.supportsFullScreen=!1),e.supportsFullScreen&&(e.fullScreenEventName=e.prefix+"fullscreenchange",e.isFullScreen=function(){switch(this.prefix){case"":return document.fullScreen;case"webkit":return document.webkitIsFullScreen;default:return document[this.prefix+"FullScreen"]}},e.requestFullScreen=function(e){return""===this.prefix?e.requestFullScreen():e[this.prefix+"RequestFullScreen"]("webkit"===this.prefix?e.ALLOW_KEYBOARD_INPUT:null)},e.cancelFullScreen=function(){return""===this.prefix?document.cancelFullScreen():document[this.prefix+"CancelFullScreen"]()},e.element=function(){return""===this.prefix?document.fullscreenElement:document[this.prefix+"FullscreenElement"]}),window.fullscreen=e}(); \ No newline at end of file
diff --git a/dist/js/simple-player.js b/dist/js/simple-player.js
deleted file mode 100644
index 26c3968b..00000000
--- a/dist/js/simple-player.js
+++ /dev/null
@@ -1 +0,0 @@
-function InitPxVideo(e){"use strict";function t(e){var t=[];return t=e.split(" --> "),o(t[0])}function n(e){var t=[];return t=e.split(" --> "),o(t[1])}function o(e){if(null===e||void 0===e)return 0;var t,n=[],o=[];return n=e.split(","),o=n[0].split(":"),t=Math.floor(60*o[0]*60)+Math.floor(60*o[1])+Math.floor(o[2])}function a(e){for(e.subcount=0;n(e.captions[e.subcount][0])<e.movie.currentTime.toFixed(1);)if(e.subcount++,e.subcount>e.captions.length-1){e.subcount=e.captions.length-1;break}}function i(e){e.isCaptionDefault&&(e.captionsContainer.className="px-video-captions show",e.captionsBtn.setAttribute("checked","checked"))}function s(){var e,t,n,o=navigator.userAgent,a=navigator.appName,i=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(a="IE",i="11;"):-1!==(t=o.indexOf("MSIE"))?(a="IE",i=o.substring(t+5)):-1!==(t=o.indexOf("Chrome"))?(a="Chrome",i=o.substring(t+7)):-1!==(t=o.indexOf("Safari"))?(a="Safari",i=o.substring(t+7),-1!==(t=o.indexOf("Version"))&&(i=o.substring(t+8))):-1!==(t=o.indexOf("Firefox"))?(a="Firefox",i=o.substring(t+8)):(e=o.lastIndexOf(" ")+1)<(t=o.lastIndexOf("/"))&&(a=o.substring(e,t),i=o.substring(t+1),a.toLowerCase()==a.toUpperCase()&&(a=navigator.appName)),-1!==(n=i.indexOf(";"))&&(i=i.substring(0,n)),-1!==(n=i.indexOf(" "))&&(i=i.substring(0,n)),s=parseInt(""+i,10),isNaN(s)&&(i=""+parseFloat(navigator.appVersion),s=parseInt(navigator.appVersion,10)),[a,s]}String.prototype.replaceAll||Object.defineProperty(String.prototype,"replaceAll",{value:function(e,t){return this.replace(new RegExp(e.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),t)}});var r={};if(r.arBrowserInfo=s(),r.browserName=r.arBrowserInfo[0],r.browserMajorVersion=r.arBrowserInfo[1],"IE"===r.browserName&&(8===r.browserMajorVersion||9===r.browserMajorVersion))return!1;if(r.isSmartphoneOrTablet=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),r.isSmartphoneOrTablet)return!1;"undefined"==typeof e.debug&&(e.debug=!1),r.debug=e.debug,e.debug&&console.log(r.browserName+" "+r.browserMajorVersion),r.playAriaLabel="undefined"==typeof e.videoTitle||""===e.videoTitle?"Play":"Play video, "+e.videoTitle,r.container=document.getElementById(e.videoId),r.container.className=r.container.className+" stopped",r.movie=r.container.getElementsByTagName("video")[0],r.controls=r.container.getElementsByClassName("px-video-controls")[0],r.movie.removeAttribute("controls"),r.randomNum=Math.floor(1e4*Math.random()),e.debug&&console.log("Inserting custom video controls"),r.controls.innerHTML=e.html.replaceAll("{aria-label}",r.playAriaLabel).replaceAll("{id}",r.randomNum),r.labelMute=document.getElementById("labelMute"+r.randomNum),r.labelMuteOffset=r.movieWidth-390,r.labelMuteOffset<0&&(r.labelMuteOffset=0),r.labelMute.setAttribute("style","margin-left:"+r.labelMuteOffset+"px");for(var c,l="",d=r.movie.childNodes,p=0;p<d.length;p++)"track"===d[p].nodeName.toLowerCase()&&(c=d[p].getAttribute("kind"),"captions"===c&&(l=d[p].getAttribute("src")));if(r.captionExists=!0,""===l?(r.captionExists=!1,e.debug&&console.log("No caption track found.")):e.debug&&console.log("Caption track found; URI: "+l),"undefined"==typeof e.captionsOnDefault&&(e.captionsOnDefault=!0),r.isCaptionDefault=e.captionsOnDefault,"undefined"==typeof e.seekInterval&&(e.seekInterval=10),r.seekInterval=e.seekInterval,r.btnPlay=r.container.getElementsByClassName("px-video-play")[0],r.btnPause=r.container.getElementsByClassName("px-video-pause")[0],r.btnRestart=r.container.getElementsByClassName("px-video-restart")[0],r.btnRewind=r.container.getElementsByClassName("px-video-rewind")[0],r.btnForward=r.container.getElementsByClassName("px-video-forward")[0],r.btnVolume=r.container.getElementsByClassName("px-video-volume")[0],r.btnMute=r.container.getElementsByClassName("px-video-mute")[0],r.progressBar=r.container.getElementsByClassName("px-video-progress")[0],r.progressBarSpan=r.progressBar.getElementsByTagName("span")[0],r.captionsContainer=r.container.getElementsByClassName("px-video-captions")[0],r.captionsBtn=r.container.getElementsByClassName("px-video-btnCaptions")[0],r.captionsBtnContainer=r.container.getElementsByClassName("px-video-captions-btn-container")[0],r.duration=r.container.getElementsByClassName("px-video-duration")[0],r.txtSeconds=r.container.getElementsByClassName("px-seconds"),r.txtSeconds[0].innerHTML=r.seekInterval,r.txtSeconds[1].innerHTML=r.seekInterval,r.isTextTracks=!1,r.movie.textTracks&&(r.isTextTracks=!0),r.btnPlay.addEventListener("click",function(){r.movie.play(),r.container.className=r.container.className.replace("stopped","playing"),r.btnPlay.className="px-video-play hide",r.btnPause.className="px-video-pause px-video-show-inline",r.btnPause.focus()},!1),r.btnPause.addEventListener("click",function(){r.movie.pause(),r.container.className=r.container.className.replace("playing","stopped"),r.btnPlay.className="px-video-play px-video-show-inline",r.btnPause.className="px-video-pause hide",r.btnPlay.focus()},!1),r.btnRestart.addEventListener("click",function(){r.movie.currentTime=0,r.isTextTracks||(r.subcount=0),r.movie.play(),r.btnPlay.className="px-video-play hide",r.btnPause.className="px-video-pause px-video-show-inline"},!1),r.btnRewind.addEventListener("click",function(){var e=r.movie.currentTime-r.seekInterval;r.movie.currentTime=0>e?0:e,r.isTextTracks||a(r)},!1),r.btnForward.addEventListener("click",function(){var e=r.movie.currentTime+r.seekInterval;r.movie.currentTime=e>r.movie.duration?r.movie.duration:e,r.isTextTracks||a(r)},!1),r.btnVolume.addEventListener("change",function(){r.movie.volume=parseFloat(this.value/10)},!1),r.btnMute.addEventListener("click",function(){r.movie.muted=r.movie.muted===!0?!1:!0},!1),r.movie.addEventListener("timeupdate",function(){r.secs=parseInt(r.movie.currentTime%60),r.mins=parseInt(r.movie.currentTime/60%60),r.secs=("0"+r.secs).slice(-2),r.mins=("0"+r.mins).slice(-2),r.duration.innerHTML=r.mins+":"+r.secs},!1),r.movie.addEventListener("timeupdate",function(){r.percent=100/r.movie.duration*r.movie.currentTime,r.percent>0&&(r.progressBar.value=r.percent,r.progressBarSpan.innerHTML=r.percent)},!1),r.progressBar.addEventListener("click",function(e){r.pos=(e.pageX-this.offsetLeft)/this.offsetWidth,r.movie.currentTime=r.pos*r.movie.duration,r.isTextTracks||a(r)}),r.movie.addEventListener("ended",function(){r.captionsContainer.innerHTML=""}),r.captionsBtn.addEventListener("click",function(){r.captionsContainer.className=this.checked?"px-video-captions show":"px-video-captions hide"},!1),r.captionExists){if("IE"===r.browserName&&10===r.browserMajorVersion||"IE"===r.browserName&&11===r.browserMajorVersion||"Firefox"===r.browserName&&r.browserMajorVersion>=31||"Safari"===r.browserName&&r.browserMajorVersion>=7){e.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),r.isTextTracks=!1;for(var u={},m=r.movie.textTracks,v=0;v<m.length;v++)u=r.movie.textTracks[v],u.mode="hidden"}if(r.isTextTracks){e.debug&&console.log("textTracks supported"),i(r);for(var u={},m=r.movie.textTracks,v=0;v<m.length;v++)u=r.movie.textTracks[v],u.mode="hidden","captions"===u.kind&&u.addEventListener("cuechange",function(){this.activeCues[0]&&this.activeCues[0].hasOwnProperty("text")&&(r.captionsContainer.innerHTML=this.activeCues[0].text)},!1)}else if(e.debug&&console.log("textTracks not supported so rendering captions manually"),i(r),r.currentCaption="",r.subcount=0,r.captions=[],r.movie.addEventListener("timeupdate",function(){r.movie.currentTime.toFixed(1)>t(r.captions[r.subcount][0])&&r.movie.currentTime.toFixed(1)<n(r.captions[r.subcount][0])&&(r.currentCaption=r.captions[r.subcount][1]),r.movie.currentTime.toFixed(1)>n(r.captions[r.subcount][0])&&r.subcount<r.captions.length-1&&r.subcount++,r.captionsContainer.innerHTML=r.currentCaption},!1),""!==l){var f;window.XMLHttpRequest?f=new XMLHttpRequest:window.ActiveXObject&&(f=new ActiveXObject("Microsoft.XMLHTTP")),f.onreadystatechange=function(){if(4===f.readyState)if(200===f.status){e.debug&&console.log("xhr = 200"),r.captions=[];var t,n=[],o=f.responseText;n=o.split("\n\n");for(var a=0;a<n.length;a++)t=n[a],r.captions[a]=[],r.captions[a]=t.split("\n");r.captions.shift(),e.debug&&console.log("Successfully loaded the caption file via ajax.")}else e.debug&&console.log("There was a problem loading the caption file via ajax.")},f.open("get",l,!0),f.send()}if("Safari"===r.browserName&&7===r.browserMajorVersion){console.log("Safari 7 detected; removing track from DOM");var m=r.movie.getElementsByTagName("track");r.movie.removeChild(m[0])}}else r.captionsContainer.className="px-video-captions hide"} \ No newline at end of file
diff --git a/dist/js/templates.js b/dist/js/templates.js
index 023af653..64940b75 100644
--- a/dist/js/templates.js
+++ b/dist/js/templates.js
@@ -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: { }}); \ No newline at end of file
+ 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: { }}); \ No newline at end of file
diff --git a/dist/svg/sprite.svg b/dist/svg/sprite.svg
index b6a35931..7d0efdcd 100644
--- a/dist/svg/sprite.svg
+++ b/dist/svg/sprite.svg
@@ -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> \ No newline at end of file
+<?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> \ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index 1afbd70a..445b2ba5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -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>
diff --git a/readme.md b/readme.md
index f6b9b5ea..9b7b8dd1 100644
--- a/readme.md
+++ b/readme.md
@@ -9,4 +9,8 @@
- [http://osmf.org/configurator/fmp/#](http://osmf.org/configurator/fmp/#)
- [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/) \ No newline at end of file
+- [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) \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 13:38:31 +0000