diff --git a/assets/js/docs.js b/assets/js/docs.js index c8a3bd44..f80fe696 100644 --- a/assets/js/docs.js +++ b/assets/js/docs.js @@ -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); \ No newline at end of file diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js index 7179cd6b..09d67ce3 100644 --- a/assets/js/simple-media.js +++ b/assets/js/simple-media.js @@ -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 // ---- diff --git a/assets/less/simple-media.less b/assets/less/simple-media.less index ec83f4e0..edf9b059 100644 --- a/assets/less/simple-media.less +++ b/assets/less/simple-media.less @@ -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); -}*/ \ No newline at end of file +} \ No newline at end of file diff --git a/assets/templates/controls.html b/assets/templates/controls.html index 7434f9c9..3b1c6735 100644 --- a/assets/templates/controls.html +++ b/assets/templates/controls.html @@ -1,4 +1,4 @@ -
+
0% played
@@ -30,7 +30,7 @@
- +