diff --git a/assets/js/docs.js b/assets/js/docs.js index fcb05868..010fe06f 100644 --- a/assets/js/docs.js +++ b/assets/js/docs.js @@ -6,12 +6,12 @@ // Register a callback simpleMedia.on("setup", function() { - console.log(this); + //console.log(this); }); //execute shout simpleMedia.setup({ - debug: true, - title: "PayPal demo", + //debug: true, + title: "Video demo", html: templates.controls.render({}) }); \ No newline at end of file diff --git a/assets/js/simple-media.js b/assets/js/simple-media.js index 3d9b1073..feb59887 100644 --- a/assets/js/simple-media.js +++ b/assets/js/simple-media.js @@ -65,8 +65,8 @@ } }; + // Credits: http://paypal.github.io/accessible-html5-video-player/ // Unfortunately, due to scattered support, browser sniffing is required - // http://paypal.github.io/accessible-html5-video-player/ function browserSniff() { var nAgt = navigator.userAgent, browserName = navigator.appName, @@ -128,9 +128,7 @@ // Return data return [browserName, majorVersion]; } - // Utilities for caption time codes - // http://paypal.github.io/accessible-html5-video-player/ function video_timecode_min(tc) { var tcpair = []; tcpair = tc.split(" --> "); @@ -224,9 +222,7 @@ 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; @@ -642,7 +638,9 @@ // If Safari 7, removing track from DOM [see "turn off native caption rendering" above] if (player.browserName === "Safari" && player.browserMajorVersion === 7) { - console.log("Safari 7 detected; removing track from DOM"); + if (config.debug) { + console.log("Safari 7 detected; removing track from DOM"); + } tracks = player.media.getElementsByTagName("track"); player.media.removeChild(tracks[0]); } @@ -659,11 +657,23 @@ // Setup fullscreen function setupFullscreen() { - console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported"); + if(player.type === "video" && config.fullscreen.enabled) { + + if(config.debug) { + console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported"); + } + if(fullscreen.supportsFullScreen) { + if(config.debug) { + console.log("Fullscreen enabled"); + } - if(config.fullscreen.enabled && fullscreen.supportsFullScreen) { - player.container.className += " " + config.classes.fullscreen.enabled; + player.container.className += " " + config.classes.fullscreen.enabled; + } + else if(config.debug) { + console.warn("Fullscreen not supported"); + } } + } // Listen for events @@ -904,7 +914,7 @@ } setupPlayer(element); - //now we execute callbacks registered to shout + // Trigger the setup event executeHandlers("setup"); } diff --git a/assets/less/docs.less b/assets/less/docs.less index 57b4ad9e..23814f8b 100644 --- a/assets/less/docs.less +++ b/assets/less/docs.less @@ -8,21 +8,21 @@ @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-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; + 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! @@ -38,9 +38,7 @@ body { .font-size(18); color: #6D797F; line-height: 1.5; - background: #ECF0F1; - max-width: 960px; - margin: 40px auto; + background: #fff; text-align: center; } h1 { @@ -56,5 +54,20 @@ p { margin: 0 0 20px; } header { - margin-bottom: 40px; + margin: 40px 0; +} + +.example-audio .player, +.example-video .player { + margin: 0 auto; + + &:fullscreen { + max-width: none; + } +} +.example-audio .player { + max-width: 480px; +} +.example-video .player { + max-width: 1200px; } \ No newline at end of file diff --git a/assets/less/simple-media.less b/assets/less/simple-media.less index 9219b331..fbb0d224 100644 --- a/assets/less/simple-media.less +++ b/assets/less/simple-media.less @@ -89,6 +89,7 @@ .player { position: relative; max-width: 100%; + min-width: 290px; overflow: hidden; // For the controls background: #000; @@ -141,11 +142,18 @@ line-height: 1; // Layout - &-playback { - float: left; - } &-sound { - float: right; + display: inline-block; + margin-top: @control-spacing; + } + @media (min-width: 560px) { + &-playback { + float: left; + } + &-sound { + float: right; + margin-top: 0; + } } input + label, @@ -327,15 +335,25 @@ // Full screen mode &:fullscreen { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; height: 100%; width: 100%; .player-video { - position: absolute; - top: 50%; - left: 0; - right: 0; - transform: translateY(-50%); + height: 100%; + width: 100%; + + video { + height: 100%; + } + .player-captions { + top: auto; + bottom: 80px; + } } .player-controls { position: absolute; diff --git a/assets/templates/controls.html b/assets/templates/controls.html index 3109d795..e6582f47 100644 --- a/assets/templates/controls.html +++ b/assets/templates/controls.html @@ -2,8 +2,7 @@ - -
A simple HTML5 media player
diff --git a/docs/video.html b/docs/video.html index 8fe4474a..9625f0e9 100644 --- a/docs/video.html +++ b/docs/video.html @@ -1,6 +1,6 @@ - - + +A simple HTML5 media player