More styling
This commit is contained in:
Sam Potts
@ -11,9 +11,7 @@ var video = new InitPxVideo({
|
||||
"seekInterval": 20,
|
||||
"videoTitle": "PayPal Austin promo",
|
||||
"debug": true,
|
||||
"html": templates.controls.render({
|
||||
|
||||
})
|
||||
"html": templates.controls.render({})
|
||||
});
|
||||
|
||||
console.log(video);
|
||||
@ -267,11 +267,10 @@ function InitPxVideo(options) {
|
||||
obj.playAriaLabel = "Play video, " + options.videoTitle;
|
||||
}
|
||||
|
||||
// Get the container, video element, and controls container
|
||||
// Get the container and video element
|
||||
obj.container = document.getElementById(options.videoId);
|
||||
obj.container.className = obj.container.className + " stopped";
|
||||
obj.movie = obj.container.getElementsByTagName("video")[0];
|
||||
obj.controls = obj.container.getElementsByClassName("px-video-controls")[0];
|
||||
|
||||
// Remove native video controls
|
||||
obj.movie.removeAttribute("controls");
|
||||
@ -281,11 +280,14 @@ function InitPxVideo(options) {
|
||||
|
||||
// Insert custom video controls
|
||||
if (options.debug) {
|
||||
console.log("Inserting custom video controls");
|
||||
console.log("Inserting custom controls...");
|
||||
}
|
||||
obj.controls.innerHTML = options.html
|
||||
obj.container.insertAdjacentHTML("beforeend", options.html
|
||||
.replaceAll("{aria-label}", obj.playAriaLabel)
|
||||
.replaceAll("{id}", obj.randomNum);
|
||||
.replaceAll("{id}", obj.randomNum));
|
||||
|
||||
// Store reference
|
||||
obj.controls = obj.container.querySelector(".player-controls");
|
||||
|
||||
// Responsive ffs
|
||||
// ----
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
// Controls
|
||||
@control-color: @gray-lightest;
|
||||
@control-color-active: @blue;
|
||||
@control-color-inactive: @gray;
|
||||
@control-spacing: 10px;
|
||||
|
||||
|
||||
@ -58,7 +59,19 @@
|
||||
&:after { content: ""; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
// Font smoothing
|
||||
// ---------------------------------------
|
||||
.font-smoothing(@mode: on) when (@mode = on) {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.font-smoothing(@mode: on) when (@mode = off) {
|
||||
-moz-osx-font-smoothing: auto;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
// Styles
|
||||
// -------------------------------
|
||||
// Base
|
||||
.player {
|
||||
position: relative;
|
||||
@ -75,14 +88,14 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
.player-video {
|
||||
&-video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.controls {
|
||||
&-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@ -113,57 +126,62 @@
|
||||
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;
|
||||
.font-smoothing();
|
||||
}
|
||||
.controls {
|
||||
|
||||
&-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 {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
label,
|
||||
|
||||
input + label,
|
||||
button {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 2px;
|
||||
padding: (@control-spacing / 2) @control-spacing;
|
||||
color: @control-color;
|
||||
|
||||
transition: background .3s ease;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
transition: fill .3s ease;
|
||||
}
|
||||
}
|
||||
input + label,
|
||||
input.inverted:checked + label {
|
||||
color: @control-color-inactive;
|
||||
}
|
||||
button,
|
||||
input.inverted + label,
|
||||
input:checked + label {
|
||||
color: @control-color;
|
||||
}
|
||||
button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: @control-color-active;
|
||||
}
|
||||
&:hover svg,
|
||||
&:focus svg {
|
||||
}
|
||||
button:hover,
|
||||
button:focus,
|
||||
label:hover,
|
||||
input:focus + label {
|
||||
background: @control-color-active;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
@ -177,7 +195,7 @@
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
.font-smoothing();
|
||||
}
|
||||
}
|
||||
progress {
|
||||
@ -191,7 +209,6 @@
|
||||
vertical-align: top;
|
||||
|
||||
&[value] {
|
||||
/* Reset the default appearance */
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
background: @gray;
|
||||
@ -216,19 +233,16 @@
|
||||
.sound-controls {
|
||||
float: right;
|
||||
}
|
||||
/*&.playing .controls {
|
||||
transform: translateY(100%);
|
||||
}*/
|
||||
|
||||
.controls .px-video-pause,
|
||||
&.playing .controls .px-video-play {
|
||||
&-controls .px-video-pause,
|
||||
&.playing .player-controls .px-video-play {
|
||||
display: none;
|
||||
}
|
||||
&.playing .controls .px-video-pause {
|
||||
&.playing .player-controls .px-video-pause {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* volume range input */
|
||||
// Volume control
|
||||
input[type='range'] {
|
||||
-webkit-appearance: none;
|
||||
height: 6px;
|
||||
@ -237,16 +251,12 @@
|
||||
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: 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&::-webkit-slider-thumb {
|
||||
@ -260,100 +270,19 @@
|
||||
&::-moz-range-thumb {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border: 0;
|
||||
background: @control-color;
|
||||
border-radius: 100%;
|
||||
}
|
||||
&:focus::-webkit-slider-thumb {
|
||||
background: @control-color-active;
|
||||
}
|
||||
&:focus::-moz-range-thumb {
|
||||
background: @control-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* containers */
|
||||
|
||||
/* progress indicator */
|
||||
.px-video-progress {
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* time */
|
||||
/*.px-video-time {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
font-size: 14px;
|
||||
}*/
|
||||
|
||||
/* caption area */
|
||||
|
||||
|
||||
/* buttons */
|
||||
.px-video-controls button {
|
||||
|
||||
//background: no-repeat url('../images/px-video-sprite.png');
|
||||
}
|
||||
.px-video-controls button:focus {
|
||||
//border: 1px #999 dotted;
|
||||
//outline: none;
|
||||
}
|
||||
.px-video-controls button {
|
||||
//cursor: pointer;
|
||||
}
|
||||
|
||||
/* captions button */
|
||||
.px-video-captions-btn-container label {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
margin-left: 25px;
|
||||
background: no-repeat url('../images/px-video-sprite.png');
|
||||
background-position: -6px -835px;
|
||||
}
|
||||
.px-video-captions-btn-container input[type="checkbox"]:focus+label {
|
||||
outline: 1px #999 dotted;
|
||||
background-position: -6px -799px;
|
||||
}
|
||||
.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: 1px #999 dotted;
|
||||
background-position: -6px -799px;
|
||||
}
|
||||
.px-video-captions-btn-container input[type="checkbox"]:checked+label {
|
||||
background-position: -6px -871px;
|
||||
}
|
||||
|
||||
/* mute button */
|
||||
.px-video-mute-btn-container label {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
margin-left: 240px;
|
||||
margin-top: 2px;
|
||||
background: no-repeat url('../images/px-video-sprite.png');
|
||||
background-position: -6px -476px;
|
||||
}
|
||||
.px-video-mute-btn-container input[type="checkbox"]:focus+label {
|
||||
outline: 1px #999 dotted;
|
||||
background-position: -6px -440px;
|
||||
}
|
||||
.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: 1px #999 dotted;
|
||||
background-position: -6px -440px;
|
||||
}
|
||||
/* checked state of mute button */
|
||||
.px-video-mute-btn-container input[type="checkbox"]:checked+label {
|
||||
background-position: -6px -692px;
|
||||
}
|
||||
.px-video-mute-btn-container input[type="checkbox"]:checked:hover+label,
|
||||
.px-video-mute-btn-container input[type="checkbox"]:checked:focus+label {
|
||||
background-position: -6px -656px;
|
||||
}
|
||||
|
||||
/* fixing display for IE10+ */
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.px-video-controls input[type='range'] {
|
||||
@ -369,251 +298,4 @@
|
||||
padding: 8px;
|
||||
min-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
/*.media {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-media-controls {
|
||||
display:none !important;
|
||||
}
|
||||
}
|
||||
&.stopped,
|
||||
&.paused {
|
||||
.overlay-play {
|
||||
display: block;
|
||||
}
|
||||
.media-controls {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.media-controls {
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
|
||||
.translate3d(0, 100%, 0);
|
||||
.transition-transform(.5s);
|
||||
|
||||
background-color: @base-color;
|
||||
color: #fff;
|
||||
.font-size(15);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-weight: 600;
|
||||
.user-select(none);
|
||||
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: 8px 15px;
|
||||
margin: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
.font-size(24);
|
||||
|
||||
.transition();
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-shadow: 0 0 15px @green;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
.border-radius(10px);
|
||||
height: 10px;
|
||||
background: lighten(@base-color, 10%);
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
.border-radius(10px);
|
||||
height: 10px;
|
||||
min-width: 10px; // So it doesn't look strange at 0%
|
||||
|
||||
&.progress-played,
|
||||
&.progress-volume {
|
||||
background: @green;
|
||||
z-index: 2;
|
||||
}
|
||||
&.progress-buffered {
|
||||
background: lighten(@base-color, 20%);
|
||||
}
|
||||
}
|
||||
&.vertical-progress {
|
||||
margin: 0 auto;
|
||||
width: 10px;
|
||||
height: auto;
|
||||
min-height: 100px;
|
||||
|
||||
div {
|
||||
bottom: 0;
|
||||
width: 10px;
|
||||
height: auto;
|
||||
min-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 100%;
|
||||
margin-bottom: 10px;
|
||||
|
||||
background: @base-color;
|
||||
.border-radius(4px);
|
||||
|
||||
-webkit-animation: pop-upwards 160ms forwards linear;
|
||||
-moz-animation: pop-upwards 160ms forwards linear;
|
||||
-ms-animation: pop-upwards 160ms forwards linear;
|
||||
-o-animation: pop-upwards 160ms forwards linear;
|
||||
animation: pop-upwards 160ms forwards linear;
|
||||
|
||||
.transition();
|
||||
|
||||
// Psuedo bits
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-right: 7px solid transparent;
|
||||
border-top: 7px solid @base-color;
|
||||
border-left: 7px solid transparent;
|
||||
content: '';
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.has-popover:focus,
|
||||
.has-popover:hover {
|
||||
.popover {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-volume {
|
||||
width: 54px;
|
||||
padding: 15px 5px 8px;
|
||||
margin-left: -27px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
.progress {
|
||||
height: 120px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Layout
|
||||
.play,
|
||||
.progress-play,
|
||||
.volume,
|
||||
.time,
|
||||
.fullscreen {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.play {
|
||||
left: 10px;
|
||||
}
|
||||
.progress-play {
|
||||
left: 70px;
|
||||
right: 240px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.time {
|
||||
right: 120px;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
padding-top: 17px;
|
||||
}
|
||||
.volume {
|
||||
right: 60px;
|
||||
}
|
||||
.fullscreen {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@media only screen
|
||||
and (max-width: 480px) {
|
||||
.time-seperator,
|
||||
.time-total {
|
||||
display: none;
|
||||
}
|
||||
.time {
|
||||
width: 50px;
|
||||
right: 70px;
|
||||
}
|
||||
.fullscreen {
|
||||
display: none;
|
||||
}
|
||||
.volume {
|
||||
right: 10px;
|
||||
}
|
||||
.progress-play {
|
||||
right: 140px;
|
||||
}
|
||||
}
|
||||
@media only screen
|
||||
and (max-width: 320px) {
|
||||
.time {
|
||||
display: none;
|
||||
}
|
||||
.progress-play {
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.media-pause .mejs-overlay-play {
|
||||
background: rgba(0,0,0, .1);
|
||||
}
|
||||
.overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0, .1);
|
||||
}
|
||||
.overlay-play > span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 1.5;
|
||||
margin: -34px 0 0 -34px !important;
|
||||
text-align: center;
|
||||
background: rgba(red(@base-color), green(@base-color), blue(@base-color), .8);
|
||||
border: 4px solid #fff;
|
||||
color: #fff;
|
||||
.border-radius(50%);
|
||||
@shadow: 0 1px 5px rgba(0,0,0, .25), inset 0 1px 1px rgba(0,0,0,.25);
|
||||
.box-shadow(@shadow);
|
||||
.font-size(34);
|
||||
}*/
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="controls">
|
||||
<div class="player-controls">
|
||||
<progress class="px-video-progress" max="100" value="0"><span>0</span>% played</progress>
|
||||
|
||||
<div class="play-controls">
|
||||
@ -30,7 +30,7 @@
|
||||
|
||||
<div class="sound-controls">
|
||||
<!--<div class="px-video-mute-btn-container">-->
|
||||
<input class="px-video-mute sr-only" id="btnMute{id}" type="checkbox">
|
||||
<input class="px-video-mute inverted sr-only" id="btnMute{id}" type="checkbox">
|
||||
<label id="labelMute{id}" for="btnMute{id}">
|
||||
<svg><use xlink:href="#icon-sound"></use></svg>
|
||||
<span class="sr-only">Mute</span>
|
||||
|
||||
2
dist/css/simple-media.css
vendored
2
dist/css/simple-media.css
vendored
File diff suppressed because one or more lines are too long
2
dist/js/docs.js
vendored
2
dist/js/docs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/simple-media.js
vendored
2
dist/js/simple-media.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/templates.js
vendored
2
dist/js/templates.js
vendored
@ -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\" 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: { }});
|
||||
templates['controls'] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<div class=\"player-controls\">");t.b("\n" + i);t.b(" <progress class=\"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 inverted 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: { }});
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
<div class="player" id="myvid">
|
||||
<div class="player-video">
|
||||
<div class="px-video-captions hide"></div>
|
||||
<div class="px-video-captions"></div>
|
||||
<video width="640" height="360" poster="../media/poster_PayPal_Austin2.jpg" controls>
|
||||
<!-- video files -->
|
||||
<source src="https://www.paypalobjects.com/webstatic/mktg/videos/PayPal_AustinSMB_baseline.mp4" type="video/mp4" />
|
||||
@ -36,8 +36,6 @@
|
||||
</div>
|
||||
</video>
|
||||
</div>
|
||||
<!-- Inject these... -->
|
||||
<div class="px-video-controls"></div>
|
||||
</div>
|
||||
|
||||
<!-- Load SVG defs -->
|
||||
|
||||
Reference in New Issue
Block a user