diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js index e188893b..334076b9 100644 --- a/assets/js/simple-media.js +++ b/assets/js/simple-media.js @@ -24,9 +24,9 @@ var defaults = { debug: false, seekInterval: 10, + volume: 5, selectors: { container: ".player", - videoContainer: ".player-video", controls: ".player-controls", buttons: { play: "[data-player='play']", @@ -45,6 +45,7 @@ seekTime: ".player-seek-time" }, classes: { + videoContainer: "player-video", stopped: "stopped", playing: "playing", muted: "muted", @@ -170,6 +171,38 @@ return string.replace(new RegExp(find.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1"), "g"), replace); } + // Wrap an element + function wrap(elements, wrapper) { + // Convert `elms` to an array, if necessary. + if (!elements.length) { + elements = [elements]; + } + + // Loops backwards to prevent having to clone the wrapper on the + // first element (see `child` below). + for (var i = elements.length - 1; i >= 0; i--) { + var child = (i > 0) ? wrapper.cloneNode(true) : wrapper; + var el = elements[i]; + + // Cache the current parent and sibling. + var parent = el.parentNode; + var sibling = el.nextSibling; + + // Wrap the element (is automatically removed from its current + // parent). + child.appendChild(el); + + // If the element had a sibling, insert the wrapper before + // the sibling to maintain the HTML structure; otherwise, just + // append it to the parent. + if (sibling) { + parent.insertBefore(child, sibling); + } else { + parent.appendChild(child); + } + } + } + // Get click position relative to parent // http://www.kirupa.com/html5/getting_mouse_click_position.htm function getClickPosition(e) { @@ -336,7 +369,6 @@ player.buttons.rewind = getElement(config.selectors.buttons.rewind); player.buttons.forward = getElement(config.selectors.buttons.forward); player.buttons.mute = getElement(config.selectors.buttons.mute); - player.buttons.volume = getElement(config.selectors.buttons.volume); player.buttons.captions = getElement(config.selectors.buttons.captions); player.buttons.fullscreen = getElement(config.selectors.buttons.fullscreen); @@ -345,6 +377,9 @@ player.progress.bar = getElement(config.selectors.progress); player.progress.text = player.progress.bar.getElementsByTagName("span")[0]; + // Volume + player.volume = getElement(config.selectors.buttons.volume); + // Timing player.duration = getElement(config.selectors.duration); player.seekTime = getElements(config.selectors.seekTime); @@ -376,13 +411,30 @@ play(); } + // Set volume + function setVolume() { + player.volume.value = config.volume; + player.media.volume = parseFloat(config.volume / 10); + checkMute(); + } + + // Check mute state + function checkMute() { + if(player.media.volume === 0 || player.media.muted) { + player.container.className += " " + config.classes.muted; + } + else { + player.container.className = player.container.className.replace(config.classes.muted, ""); + } + } + // Setup media function setupMedia() { player.media = player.container.querySelectorAll("audio, video")[0]; // If there's no media, bail if(!player.media) { - console.warn("No audio or video element found!"); + console.error("No audio or video element found!"); return false; } @@ -396,11 +448,24 @@ // Set type player.type = (player.media.tagName.toLowerCase() == "video" ? "video" : "audio"); + + // Inject the player wrapper + if(player.type === "video") { + // Create the wrapper div + var wrapper = document.createElement("div"); + wrapper.setAttribute("class", config.classes.videoContainer); + + // Wrap the video in a container + wrap(player.media, wrapper); + + // Cache the container + player.videoContainer = wrapper; + } } // Setup captions function setupCaptions() { - if(player.type == "video") { + if(player.type === "video") { // Inject the container player.videoContainer.insertAdjacentHTML("afterbegin", "
"); @@ -583,7 +648,6 @@ // Listen for events function listeners() { - // Fullscreen player.buttons.fullscreen.addEventListener("click", function() { if(!fullscreen.isFullScreen()) { @@ -595,17 +659,19 @@ }, false); // Click video - player.videoContainer.addEventListener("click", function() { - if(player.media.paused) { - play(); - } - else if(player.media.ended) { - restart(); - } - else { - pause(); - } - }, false); + if(player.type === "video") { + player.videoContainer.addEventListener("click", function() { + if(player.media.paused) { + play(); + } + else if(player.media.ended) { + restart(); + } + else { + pause(); + } + }, false); + } // Play player.buttons.play.addEventListener("click", function() { @@ -633,7 +699,7 @@ player.media.currentTime = targetTime; } // Special handling for "manual" captions - if (!player.isTextTracks) { + if (!player.isTextTracks && player.type === "video") { adjustManualCaptions(player); } }, false); @@ -649,26 +715,26 @@ player.media.currentTime = targetTime; } // Special handling for "manual" captions - if (!player.isTextTracks) { + if (!player.isTextTracks && player.type === "video") { adjustManualCaptions(player); } }, false); // Get the HTML5 range input element and append audio volume adjustment on change - player.buttons.volume.addEventListener("change", function() { - player.media.volume = parseFloat(this.value / 10); + player.volume.addEventListener("change", function() { + config.volume = this.value; + setVolume(); }, false); // Mute player.buttons.mute.addEventListener("click", function() { if (player.media.muted === true) { player.media.muted = false; - player.container.className = player.container.className.replace(config.classes.muted, ""); } else { player.media.muted = true; - player.container.className += " " + config.classes.muted; } + checkMute(); }, false); // Duration @@ -700,7 +766,7 @@ player.media.currentTime = player.pos * player.media.duration; // Special handling for "manual" captions - if (!player.isTextTracks) { + if (!player.isTextTracks && player.type === "video") { adjustManualCaptions(player); } }); @@ -717,7 +783,9 @@ // Clear captions at end of video player.media.addEventListener("ended", function() { - player.captionsContainer.innerHTML = ""; + if(player.type === "video") { + player.captionsContainer.innerHTML = ""; + } player.container.className = player.container.className.replace(config.classes.playing, config.classes.stopped); }); } @@ -732,8 +800,7 @@ } function setupPlayer(element) { - player.container = element; - player.videoContainer = getElement(config.selectors.videoContainer); + player.container = element; // Setup media setupMedia(); @@ -747,6 +814,9 @@ // Find the elements findElements(); + // Set volume + setVolume(); + // Captions setupCaptions(); @@ -773,22 +843,25 @@ // Debug info if(config.debug) { - console.log(config); - console.log("fullscreen support: " + fullscreen.supportsFullScreen); + console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported"); console.log(player.browserName + " " + player.browserMajorVersion); } // If IE8, stop customization (use fallback) // If IE9, stop customization (use native controls) if (player.browserName === "IE" && (player.browserMajorVersion === 8 || player.browserMajorVersion === 9) ) { - console.warn("Browser not suppported."); + if(config.debug) { + console.error("Browser not suppported."); + } return false; } // If smartphone or tablet, stop customization as video (and captions in latest devices) are handled natively player.isSmartphoneOrTablet = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent); if (player.isSmartphoneOrTablet) { - console.warn("Browser not suppported."); + if(config.debug) { + console.error("Browser not suppported."); + } return false; } @@ -801,25 +874,17 @@ } // Get the container and video container - var elements = document.querySelectorAll(config.selectors.container); - for (var i = elements.length - 1; i >= 0; i--) { - setupPlayer(elements[i]); + var element = document.querySelector(config.selectors.container); + if(element === null) { + if(config.debug) { + console.error("Selector " + config.selectors.container + " not found!"); + } + return false; } + setupPlayer(element); //now we execute callbacks registered to shout executeHandlers("setup"); } -}(this.simpleMedia = this.simpleMedia || {})); - -/*function InitPxVideo(options) { - - "use strict"; - - - // *** - // Captions - // *** - - -}*/ \ No newline at end of file +}(this.simpleMedia = this.simpleMedia || {})); \ No newline at end of file diff --git a/assets/less/simple-media.less b/assets/less/simple-media.less index 338a4706..26091c9e 100644 --- a/assets/less/simple-media.less +++ b/assets/less/simple-media.less @@ -21,14 +21,7 @@ @progress-bg: @gray; @progress-value-bg: @blue; -// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/) -// ------------------------------- -.player, -.player *, -.player *::after, -.player *::before { - box-sizing: border-box; -} + // Utility classes & mixins // ------------------------------- @@ -76,6 +69,14 @@ overflow: hidden; // For the controls background: #000; + // BORDER-BOX ALL THE THINGS! + // http://paulirish.com/2012/box-sizing-border-box-ftw/ + &, + *, + *::after, + *::before { + box-sizing: border-box; + } // For video &-video { @@ -270,7 +271,7 @@ } &:focus { outline: 0; - + &::-webkit-slider-thumb { background: @control-color-active; } @@ -309,7 +310,7 @@ } } -/* fixing display for IE10+ */ +// Fixing display for IE10+ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .video-controls .player-volume { position: relative; diff --git a/dist/css/simple-media.css b/dist/css/simple-media.css index 16c5a64b..94aace89 100644 --- a/dist/css/simple-media.css +++ b/dist/css/simple-media.css @@ -1 +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}.player{position:relative;max-width:100%;overflow:hidden;background:#000}.player-video{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;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;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player.captions .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;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-playback{float:left}.player-controls-sound{float:right}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls input+label,.player-controls input.inverted:checked+label{color:#565d64}.player-controls button,.player-controls input.inverted+label,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:hover,.player-controls label:hover{background:#3498db}.player-controls button:hover svg,.player-controls label:hover svg{fill:#fff}.player-controls button:focus,.player-controls input:focus+label{outline:#000 dotted thin;outline-offset:1px}.player-controls button:focus svg,.player-controls input:focus+label svg{fill:#fff}.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#fff;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-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-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player.muted .player-controls .icon-muted{display:block}.player.muted .player-controls .icon-muted+svg{display:none}.player-volume{-webkit-appearance:none;height:6px;width:100px;margin-right:10px;background:#565d64;border-radius:10px}.player-volume::-moz-range-track{-moz-appearance:none;height:6px;background:#565d64;border:0;border-radius:10px}.player-volume::-webkit-slider-thumb{-webkit-appearance:none!important;height:12px;width:12px;background:#cbd0d3;border-radius:100%;transition:background .3s ease}.player-volume::-moz-range-thumb{height:12px;width:12px;border:0;background:#cbd0d3;border-radius:100%}.player-volume:focus{outline:0}.player-volume:focus::-webkit-slider-thumb{background:#3498db}.player-volume:focus::-moz-range-thumb{background:#3498db}.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 .player-controls{position:absolute;bottom:0;left:0;right:0}.player:-moz-full-screen .player-controls{position:absolute;bottom:0;left:0;right:0}.player:-ms-fullscreen .player-controls{position:absolute;bottom:0;left:0;right:0}.player:fullscreen .player-controls{position:absolute;bottom:0;left:0;right:0}.player:-webkit-full-screen .player-controls .icon-exit-fullscreen{display:block}.player:-moz-full-screen .player-controls .icon-exit-fullscreen{display:block}.player:-ms-fullscreen .player-controls .icon-exit-fullscreen{display:block}.player:fullscreen .player-controls .icon-exit-fullscreen{display:block}.player:-webkit-full-screen .player-controls .icon-exit-fullscreen+svg{display:none}.player:-moz-full-screen .player-controls .icon-exit-fullscreen+svg{display:none}.player:-ms-fullscreen .player-controls .icon-exit-fullscreen+svg{display:none}.player:fullscreen .player-controls .icon-exit-fullscreen+svg{display:none}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.video-controls .player-volume{position:relative;padding:0;height:8px;top:-3px}.player-time{margin-top:4px}.player-captions{padding:8px;min-height:36px}} \ No newline at end of file +.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}.player{position:relative;max-width:100%;overflow:hidden;background:#000}.player,.player *,.player ::after,.player ::before{box-sizing:border-box}.player-video{position:relative}.player video{width:100%;height:auto;vertical-align:middle}.player-captions{display:none;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;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}.player.captions .player-captions{display:block}.player-controls{zoom:1;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;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-playback{float:left}.player-controls-sound{float:right}.player-controls button,.player-controls input+label{display:inline-block;vertical-align:middle;margin:0 2px;padding:5px 10px;transition:background .3s ease;border-radius:3px;cursor:pointer}.player-controls button svg,.player-controls input+label svg{width:18px;height:18px;display:block;fill:currentColor;transition:fill .3s ease}.player-controls input+label,.player-controls input.inverted:checked+label{color:#565d64}.player-controls button,.player-controls input.inverted+label,.player-controls input:checked+label{color:#cbd0d3}.player-controls button{border:0;background:0 0;overflow:hidden}.player-controls button:hover,.player-controls label:hover{background:#3498db}.player-controls button:hover svg,.player-controls label:hover svg{fill:#fff}.player-controls button:focus,.player-controls input:focus+label{outline:#000 dotted thin;outline-offset:1px}.player-controls button:focus svg,.player-controls input:focus+label svg{fill:#fff}.player-controls .icon-exit-fullscreen,.player-controls .icon-muted{display:none}.player-controls .player-time{display:inline-block;vertical-align:middle;margin-left:10px;color:#fff;font-weight:600;font-size:14px;-moz-osx-font-smoothing:grayscale;-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-controls [data-player=pause],.player.playing .player-controls [data-player=play]{display:none}.player.playing .player-controls [data-player=pause]{display:inline-block}.player.muted .player-controls .icon-muted{display:block}.player.muted .player-controls .icon-muted+svg{display:none}.player-volume{-webkit-appearance:none;height:6px;width:100px;margin-right:10px;background:#565d64;border-radius:10px}.player-volume::-moz-range-track{-moz-appearance:none;height:6px;background:#565d64;border:0;border-radius:10px}.player-volume::-webkit-slider-thumb{-webkit-appearance:none!important;height:12px;width:12px;background:#cbd0d3;border-radius:100%;transition:background .3s ease}.player-volume::-moz-range-thumb{height:12px;width:12px;border:0;background:#cbd0d3;border-radius:100%}.player-volume:focus{outline:0}.player-volume:focus::-webkit-slider-thumb{background:#3498db}.player-volume:focus::-moz-range-thumb{background:#3498db}.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 .player-controls{position:absolute;bottom:0;left:0;right:0}.player:-moz-full-screen .player-controls{position:absolute;bottom:0;left:0;right:0}.player:-ms-fullscreen .player-controls{position:absolute;bottom:0;left:0;right:0}.player:fullscreen .player-controls{position:absolute;bottom:0;left:0;right:0}.player:-webkit-full-screen .player-controls .icon-exit-fullscreen{display:block}.player:-moz-full-screen .player-controls .icon-exit-fullscreen{display:block}.player:-ms-fullscreen .player-controls .icon-exit-fullscreen{display:block}.player:fullscreen .player-controls .icon-exit-fullscreen{display:block}.player:-webkit-full-screen .player-controls .icon-exit-fullscreen+svg{display:none}.player:-moz-full-screen .player-controls .icon-exit-fullscreen+svg{display:none}.player:-ms-fullscreen .player-controls .icon-exit-fullscreen+svg{display:none}.player:fullscreen .player-controls .icon-exit-fullscreen+svg{display:none}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.video-controls .player-volume{position:relative;padding:0;height:8px;top:-3px}.player-time{margin-top:4px}.player-captions{padding:8px;min-height:36px}} \ No newline at end of file diff --git a/dist/js/simple-media.js b/dist/js/simple-media.js index ce6d9378..ab215a7e 100644 --- a/dist/js/simple-media.js +++ b/dist/js/simple-media.js @@ -1 +1 @@ -!function(e){"use strict";function t(){var e,t,n,r=navigator.userAgent,s=navigator.appName,a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(s="IE",a="11;"):-1!==(t=r.indexOf("MSIE"))?(s="IE",a=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(s="Chrome",a=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(s="Safari",a=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(a=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(s="Firefox",a=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(s=r.substring(e,t),a=r.substring(t+1),s.toLowerCase()==s.toUpperCase()&&(s=navigator.appName)),-1!==(n=a.indexOf(";"))&&(a=a.substring(0,n)),-1!==(n=a.indexOf(" "))&&(a=a.substring(0,n)),o=parseInt(""+a,10),isNaN(o)&&(a=""+parseFloat(navigator.appVersion),o=parseInt(navigator.appVersion,10)),[s,o]}function n(e){var t=[];return t=e.split(" --> "),s(t[0])}function r(e){var t=[];return t=e.split(" --> "),s(t[1])}function s(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function a(e){for(e.subcount=0;r(e.captions[e.subcount][0])e.captions.length-1){e.subcount=e.captions.length-1;break}}function o(e){L.captions.default&&(e.container.className+=" "+L.classes.captions,e.buttons.captions.setAttribute("checked","checked"))}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function c(e){var t=N.isFullScreen()?{x:0,y:0}:l(e.currentTarget);return{x:e.clientX-t.x,y:e.clientY-t.y}}function l(e){for(var t=0,n=0;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,n+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:n}}function u(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},u(e[n],t[n])):e[n]=t[n];return e}function d(e){var t,n=F[e]||[],r=n.length;for(t=0;r>t;t++)n[t].apply(E.media,[])}function p(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++)if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}return"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"]}),e}function f(){L.debug&&console.log("Injecting custom controls");var e=L.html;e=i(e,"{aria-label}",L.playAriaLabel),e=i(e,"{id}",E.random),E.container.insertAdjacentHTML("beforeend",e)}function m(e){return E.container.querySelectorAll(e)}function b(e){return m(e)[0]}function g(){E.controls=b(L.selectors.controls),E.buttons={},E.buttons.play=b(L.selectors.buttons.play),E.buttons.pause=b(L.selectors.buttons.pause),E.buttons.restart=b(L.selectors.buttons.restart),E.buttons.rewind=b(L.selectors.buttons.rewind),E.buttons.forward=b(L.selectors.buttons.forward),E.buttons.mute=b(L.selectors.buttons.mute),E.buttons.volume=b(L.selectors.buttons.volume),E.buttons.captions=b(L.selectors.buttons.captions),E.buttons.fullscreen=b(L.selectors.buttons.fullscreen),E.progress={},E.progress.bar=b(L.selectors.progress),E.progress.text=E.progress.bar.getElementsByTagName("span")[0],E.duration=b(L.selectors.duration),E.seekTime=m(L.selectors.seekTime)}function v(){E.media.play(),E.container.className=E.container.className.replace(L.classes.stopped,L.classes.playing)}function x(){E.media.pause(),E.container.className=E.container.className.replace(L.classes.playing,L.classes.stopped)}function T(){E.media.currentTime=0,E.isTextTracks||(E.subcount=0),v()}function h(){return E.media=E.container.querySelectorAll("audio, video")[0],E.media?(null===E.media.getAttribute("autoplay")&&(E.container.className+=" "+L.classes.stopped),E.media.removeAttribute("controls"),E.type="video"==E.media.tagName.toLowerCase()?"video":"audio",void 0):(console.warn("No audio or video element found!"),!1)}function k(){if("video"==E.type){E.videoContainer.insertAdjacentHTML("afterbegin","
"),E.captionsContainer=b(L.selectors.captions),E.isTextTracks=!1,E.media.textTracks&&(E.isTextTracks=!0);for(var e,t="",s=E.media.childNodes,a=0;a=31||"Safari"===E.browserName&&E.browserMajorVersion>=7)for(L.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),E.isTextTracks=!1,l={},i=E.media.textTracks,c=0;cn(E.captions[E.subcount][0])&&E.media.currentTime.toFixed(1)r(E.captions[E.subcount][0])&&E.subcounte?0:e,E.isTextTracks||a(E)},!1),E.buttons.forward.addEventListener("click",function(){var e=E.media.currentTime+L.seekInterval;E.media.currentTime=e>E.media.duration?E.media.duration:e,E.isTextTracks||a(E)},!1),E.buttons.volume.addEventListener("change",function(){E.media.volume=parseFloat(this.value/10)},!1),E.buttons.mute.addEventListener("click",function(){E.media.muted===!0?(E.media.muted=!1,E.container.className=E.container.className.replace(L.classes.muted,"")):(E.media.muted=!0,E.container.className+=" "+L.classes.muted)},!1),E.media.addEventListener("timeupdate",function(){E.secs=parseInt(E.media.currentTime%60),E.mins=parseInt(E.media.currentTime/60%60),E.secs=("0"+E.secs).slice(-2),E.mins=("0"+E.mins).slice(-2),E.duration.innerHTML=E.mins+":"+E.secs},!1),E.media.addEventListener("timeupdate",function(){E.percent=100/E.media.duration*E.media.currentTime,E.percent>0&&(E.progress.bar.value=E.percent,E.progress.text.innerHTML=E.percent)},!1),E.progress.bar.addEventListener("click",function(e){E.pos=c(e).x/this.offsetWidth,E.media.currentTime=E.pos*E.media.duration,E.isTextTracks||a(E)}),E.buttons.captions.addEventListener("click",function(){this.checked?E.container.className+=" "+L.classes.captions:E.container.className=E.container.className.replace(L.classes.captions,"")},!1),E.media.addEventListener("ended",function(){E.captionsContainer.innerHTML="",E.container.className=E.container.className.replace(L.classes.playing,L.classes.stopped)})}function S(e){E.container=e,E.videoContainer=b(L.selectors.videoContainer),h(),E.random=Math.floor(1e4*Math.random()),f(),g(),k(),w(),y()}var N,L,F={},E={},M={debug:!1,seekInterval:10,selectors:{container:".player",videoContainer:".player-video",controls:".player-controls",buttons:{play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='restart']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:".player-progress",captions:".player-captions",duration:".player-duration",seekTime:".player-seek-time"},classes:{stopped:"stopped",playing:"playing",muted:"muted",captions:"captions"},captions:{"default":!0}};e.on=function(e,t){F[e]||(F[e]=[]),F[e].push(t)},e.setup=function(e){if(L=u(M,e),N=p(),E.browserInfo=t(),E.browserName=E.browserInfo[0],E.browserMajorVersion=E.browserInfo[1],L.debug&&(console.log(L),console.log("fullscreen support: "+N.supportsFullScreen),console.log(E.browserName+" "+E.browserMajorVersion)),"IE"===E.browserName&&(8===E.browserMajorVersion||9===E.browserMajorVersion))return console.warn("Browser not suppported."),!1;if(E.isSmartphoneOrTablet=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),E.isSmartphoneOrTablet)return console.warn("Browser not suppported."),!1;L.playAriaLabel="undefined"!=typeof L.title&&L.title.length?"Play "+L.title:"Play";for(var n=document.querySelectorAll(L.selectors.container),r=n.length-1;r>=0;r--)S(n[r]);d("setup")}}(this.simpleMedia=this.simpleMedia||{}); \ No newline at end of file +!function(e){"use strict";function t(){var e,t,n,r=navigator.userAgent,s=navigator.appName,o=""+parseFloat(navigator.appVersion),a=parseInt(navigator.appVersion,10);return-1!==navigator.appVersion.indexOf("Windows NT")&&-1!==navigator.appVersion.indexOf("rv:11")?(s="IE",o="11;"):-1!==(t=r.indexOf("MSIE"))?(s="IE",o=r.substring(t+5)):-1!==(t=r.indexOf("Chrome"))?(s="Chrome",o=r.substring(t+7)):-1!==(t=r.indexOf("Safari"))?(s="Safari",o=r.substring(t+7),-1!==(t=r.indexOf("Version"))&&(o=r.substring(t+8))):-1!==(t=r.indexOf("Firefox"))?(s="Firefox",o=r.substring(t+8)):(e=r.lastIndexOf(" ")+1)<(t=r.lastIndexOf("/"))&&(s=r.substring(e,t),o=r.substring(t+1),s.toLowerCase()==s.toUpperCase()&&(s=navigator.appName)),-1!==(n=o.indexOf(";"))&&(o=o.substring(0,n)),-1!==(n=o.indexOf(" "))&&(o=o.substring(0,n)),a=parseInt(""+o,10),isNaN(a)&&(o=""+parseFloat(navigator.appVersion),a=parseInt(navigator.appVersion,10)),[s,a]}function n(e){var t=[];return t=e.split(" --> "),s(t[0])}function r(e){var t=[];return t=e.split(" --> "),s(t[1])}function s(e){if(null===e||void 0===e)return 0;var t,n=[],r=[];return n=e.split(","),r=n[0].split(":"),t=Math.floor(60*r[0]*60)+Math.floor(60*r[1])+Math.floor(r[2])}function o(e){for(e.subcount=0;r(e.captions[e.subcount][0])e.captions.length-1){e.subcount=e.captions.length-1;break}}function a(e){M.captions.default&&(e.container.className+=" "+M.classes.captions,e.buttons.captions.setAttribute("checked","checked"))}function i(e,t,n){return e.replace(new RegExp(t.replace(/([.*+?^=!:${}()|\[\]\/\\])/g,"\\$1"),"g"),n)}function c(e,t){e.length||(e=[e]);for(var n=e.length-1;n>=0;n--){var r=n>0?t.cloneNode(!0):t,s=e[n],o=s.parentNode,a=s.nextSibling;r.appendChild(s),a?o.insertBefore(r,a):o.appendChild(r)}}function l(e){var t=E.isFullScreen()?{x:0,y:0}:u(e.currentTarget);return{x:e.clientX-t.x,y:e.clientY-t.y}}function u(e){for(var t=0,n=0;e;)t+=e.offsetLeft-e.scrollLeft+e.clientLeft,n+=e.offsetTop-e.scrollTop+e.clientTop,e=e.offsetParent;return{x:t,y:n}}function d(e,t){for(var n in t)t[n]&&t[n].constructor&&t[n].constructor===Object?(e[n]=e[n]||{},d(e[n],t[n])):e[n]=t[n];return e}function p(e){var t,n=C[e]||[],r=n.length;for(t=0;r>t;t++)n[t].apply(I.media,[])}function f(){var e={supportsFullScreen:!1,isFullScreen:function(){return!1},requestFullScreen:function(){},cancelFullScreen:function(){},fullScreenEventName:"",element:null,prefix:""},t="webkit moz o ms khtml".split(" ");if("undefined"!=typeof document.cancelFullScreen)e.supportsFullScreen=!0;else for(var n=0,r=t.length;r>n;n++)if(e.prefix=t[n],"undefined"!=typeof document[e.prefix+"CancelFullScreen"]){e.supportsFullScreen=!0;break}return"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"]}),e}function m(){M.debug&&console.log("Injecting custom controls");var e=M.html;e=i(e,"{aria-label}",M.playAriaLabel),e=i(e,"{id}",I.random),I.container.insertAdjacentHTML("beforeend",e)}function b(e){return I.container.querySelectorAll(e)}function v(e){return b(e)[0]}function g(){I.controls=v(M.selectors.controls),I.buttons={},I.buttons.play=v(M.selectors.buttons.play),I.buttons.pause=v(M.selectors.buttons.pause),I.buttons.restart=v(M.selectors.buttons.restart),I.buttons.rewind=v(M.selectors.buttons.rewind),I.buttons.forward=v(M.selectors.buttons.forward),I.buttons.mute=v(M.selectors.buttons.mute),I.buttons.captions=v(M.selectors.buttons.captions),I.buttons.fullscreen=v(M.selectors.buttons.fullscreen),I.progress={},I.progress.bar=v(M.selectors.progress),I.progress.text=I.progress.bar.getElementsByTagName("span")[0],I.volume=v(M.selectors.buttons.volume),I.duration=v(M.selectors.duration),I.seekTime=b(M.selectors.seekTime)}function x(){I.media.play(),I.container.className=I.container.className.replace(M.classes.stopped,M.classes.playing)}function h(){I.media.pause(),I.container.className=I.container.className.replace(M.classes.playing,M.classes.stopped)}function T(){I.media.currentTime=0,I.isTextTracks||(I.subcount=0),x()}function y(){I.volume.value=M.volume,I.media.volume=parseFloat(M.volume/10),k()}function k(){0===I.media.volume||I.media.muted?I.container.className+=" "+M.classes.muted:I.container.className=I.container.className.replace(M.classes.muted,"")}function w(){if(I.media=I.container.querySelectorAll("audio, video")[0],!I.media)return console.error("No audio or video element found!"),!1;if(null===I.media.getAttribute("autoplay")&&(I.container.className+=" "+M.classes.stopped),I.media.removeAttribute("controls"),I.type="video"==I.media.tagName.toLowerCase()?"video":"audio","video"===I.type){var e=document.createElement("div");e.setAttribute("class",M.classes.videoContainer),c(I.media,e),I.videoContainer=e}}function S(){if("video"===I.type){I.videoContainer.insertAdjacentHTML("afterbegin","
"),I.captionsContainer=v(M.selectors.captions),I.isTextTracks=!1,I.media.textTracks&&(I.isTextTracks=!0);for(var e,t="",s=I.media.childNodes,o=0;o=31||"Safari"===I.browserName&&I.browserMajorVersion>=7)for(M.debug&&console.log("Detected IE 10/11 or Firefox 31+ or Safari 7+"),I.isTextTracks=!1,l={},i=I.media.textTracks,c=0;cn(I.captions[I.subcount][0])&&I.media.currentTime.toFixed(1)r(I.captions[I.subcount][0])&&I.subcounte?0:e,I.isTextTracks||"video"!==I.type||o(I)},!1),I.buttons.forward.addEventListener("click",function(){var e=I.media.currentTime+M.seekInterval;I.media.currentTime=e>I.media.duration?I.media.duration:e,I.isTextTracks||"video"!==I.type||o(I)},!1),I.volume.addEventListener("change",function(){M.volume=this.value,y()},!1),I.buttons.mute.addEventListener("click",function(){I.media.muted=I.media.muted===!0?!1:!0,k()},!1),I.media.addEventListener("timeupdate",function(){I.secs=parseInt(I.media.currentTime%60),I.mins=parseInt(I.media.currentTime/60%60),I.secs=("0"+I.secs).slice(-2),I.mins=("0"+I.mins).slice(-2),I.duration.innerHTML=I.mins+":"+I.secs},!1),I.media.addEventListener("timeupdate",function(){I.percent=100/I.media.duration*I.media.currentTime,I.percent>0&&(I.progress.bar.value=I.percent,I.progress.text.innerHTML=I.percent)},!1),I.progress.bar.addEventListener("click",function(e){I.pos=l(e).x/this.offsetWidth,I.media.currentTime=I.pos*I.media.duration,I.isTextTracks||"video"!==I.type||o(I)}),I.buttons.captions.addEventListener("click",function(){this.checked?I.container.className+=" "+M.classes.captions:I.container.className=I.container.className.replace(M.classes.captions,"")},!1),I.media.addEventListener("ended",function(){"video"===I.type&&(I.captionsContainer.innerHTML=""),I.container.className=I.container.className.replace(M.classes.playing,M.classes.stopped)})}function F(e){I.container=e,w(),I.random=Math.floor(1e4*Math.random()),m(),g(),y(),S(),N(),L()}var E,M,C={},I={},O={debug:!1,seekInterval:10,volume:5,selectors:{container:".player",controls:".player-controls",buttons:{play:"[data-player='play']",pause:"[data-player='pause']",restart:"[data-player='restart']",rewind:"[data-player='restart']",forward:"[data-player='fast-forward']",mute:"[data-player='mute']",volume:"[data-player='volume']",captions:"[data-player='captions']",fullscreen:"[data-player='fullscreen']"},progress:".player-progress",captions:".player-captions",duration:".player-duration",seekTime:".player-seek-time"},classes:{videoContainer:"player-video",stopped:"stopped",playing:"playing",muted:"muted",captions:"captions"},captions:{"default":!0}};e.on=function(e,t){C[e]||(C[e]=[]),C[e].push(t)},e.setup=function(e){if(M=d(O,e),E=f(),I.browserInfo=t(),I.browserName=I.browserInfo[0],I.browserMajorVersion=I.browserInfo[1],M.debug&&(console.log(E.supportsFullScreen?"Fullscreen supported":"No fullscreen supported"),console.log(I.browserName+" "+I.browserMajorVersion)),"IE"===I.browserName&&(8===I.browserMajorVersion||9===I.browserMajorVersion))return M.debug&&console.error("Browser not suppported."),!1;if(I.isSmartphoneOrTablet=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),I.isSmartphoneOrTablet)return M.debug&&console.error("Browser not suppported."),!1;M.playAriaLabel="undefined"!=typeof M.title&&M.title.length?"Play "+M.title:"Play";var n=document.querySelector(M.selectors.container);return null===n?(M.debug&&console.error("Selector "+M.selectors.container+" not found!"),!1):(F(n),p("setup"),void 0)}}(this.simpleMedia=this.simpleMedia||{}); \ No newline at end of file diff --git a/docs/index.html b/docs/audio.html similarity index 54% rename from docs/index.html rename to docs/audio.html index f139e58f..fa237633 100644 --- a/docs/index.html +++ b/docs/audio.html @@ -18,23 +18,15 @@
-
- -
+
diff --git a/docs/video.html b/docs/video.html new file mode 100644 index 00000000..8fe4474a --- /dev/null +++ b/docs/video.html @@ -0,0 +1,47 @@ + + + + + Simple Media + + + + + + + + + +
+

Simple Media

+

A simple HTML5 media player

+
+ +
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/media/Covox_-_Switchblade_Squadron.mp3 b/media/Covox_-_Switchblade_Squadron.mp3 new file mode 100755 index 00000000..6123d59b Binary files /dev/null and b/media/Covox_-_Switchblade_Squadron.mp3 differ