Created
June 20, 2014 22:01
-
-
Save arbalest/41e074f8aeae54013bb7 to your computer and use it in GitHub Desktop.
Demonstrates Video player ui with a text input inside a button and video shaking animation when an invalid item is entered
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Video Player UI Demo | 2014-06-20</title> | |
| <!-- | |
| <link href="//vjs.zencdn.net/4.6/video-js.css" rel="stylesheet"/> | |
| <script src="//vjs.zencdn.net/4.6/video.js"></script> | |
| --> | |
| <link href="lib/video-js/video-js.css" rel="stylesheet"/> | |
| <script src="lib/video-js/video.dev.js"></script> | |
| <script> | |
| videojs.options.flash.swf = "lib/video-js/video-js.swf"; | |
| </script> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial; | |
| background-color: #ffffff; | |
| color: #333333; | |
| } | |
| .container { | |
| margin-top: 10px; | |
| margin-left: 10%; | |
| margin-right: 10%; | |
| } | |
| button, .button { | |
| border-radius: 3px; | |
| border: 1px solid #007aff; | |
| color: #007aff; | |
| font-weight: bold; | |
| padding: 5px 3px; | |
| background-color: transparent; | |
| display: inline-block; | |
| vertical-align: bottom; | |
| font-size: 13px; | |
| margin: 5px 5px; | |
| } | |
| .transition-width { | |
| transition: width 300ms; | |
| position: relative; /* For inline inputs */ | |
| } | |
| @-webkit-keyframes wiggle { | |
| 0% { -webkit-transform: translate(2px, 0px); } | |
| 20% { -webkit-transform: translate(-2px, 0px); } | |
| 40% { -webkit-transform: translate(2px, 0px); } | |
| 60% { -webkit-transform: translate(-2px, 0px); } | |
| 80% { -webkit-transform: translate(2px, 0px); } | |
| 100% { -webkit-transform: translate(0px, 0px); } | |
| } | |
| .wiggle-anim { | |
| -webkit-animation-name: wiggle; | |
| -webkit-animation-duration: 500ms; | |
| -webkit-transform-origin: 50% 50%; | |
| } | |
| button:hover, .button:hover { | |
| background-color: #007aff; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <button id="loadVideoBtn" type="button">Load Video</button> | |
| <div id="video_container" style="display: none"> | |
| <video id="example" class="video-js vjs-default-skin" width="640" height="360"> | |
| <source src="resources/video.mp4" type="video/mp4" /> | |
| </video> | |
| </div> | |
| <div id="video_controls" style="display: none"> | |
| <button id="playVideoBtn" type="button" style="width: 120px;">Play Video</button> | |
| <button id="pauseVideoBtn" type="button" style="width: 120px;">Pause Video</button> | |
| <div class="button transition-width" id="skipToPctBtn" style="width: 80px; overflow: hidden;">Skip to %</div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| window.app = { | |
| videoPlayer: false, | |
| pctInput: false, | |
| pctPlayed: 0 | |
| }; | |
| document.getElementById('skipToPctBtn').onclick = function(){ | |
| if (this.getAttribute('hasInput')) { | |
| if (window.app.pctInput.value == '') { | |
| return; | |
| } | |
| if (window.app.pctInput.value <= window.app.pctPlayed) { | |
| window.app.videoPlayer.currentTime(window.app.videoPlayer.duration()*(window.app.pctInput.value/100)); | |
| return; | |
| } else { | |
| var video = document.getElementById('video_container'); | |
| var classes = video.classList; | |
| if (document.getElementById('video_container').classList.contains('wiggle-anim')) { | |
| document.getElementById('video_container').classList.remove('wiggle-anim'); | |
| } | |
| setTimeout(function(){ document.getElementById('video_container').classList.add('wiggle-anim') }, 10); | |
| return; | |
| } | |
| } | |
| window.app.pctInput = document.createElement('input'); | |
| window.app.pctInput.style.display = "inline-block"; | |
| window.app.pctInput.style.marginLeft = "10px"; | |
| window.app.pctInput.style.width = "30px"; | |
| window.app.pctInput.style.position = "absolute"; | |
| window.app.pctInput.style.top = "0px"; | |
| this.appendChild(window.app.pctInput); | |
| this.setAttribute('hasInput', 'true'); | |
| this.style.width = "105px"; | |
| window.app.pctInput.focus(); | |
| }; | |
| document.getElementById('playVideoBtn').onclick = function(){ | |
| if (window.app.videoPlayer) { | |
| window.app.videoPlayer.volume(0); | |
| window.app.videoPlayer.play(); | |
| document.getElementById('pauseVideoBtn').style.display = "inline-block"; | |
| document.getElementById('playVideoBtn').style.display = "none"; | |
| } | |
| }; | |
| document.getElementById('pauseVideoBtn').onclick = function(){ | |
| if (window.app.videoPlayer) { | |
| window.app.videoPlayer.pause(); | |
| document.getElementById('playVideoBtn').style.display = "inline-block"; | |
| document.getElementById('pauseVideoBtn').style.display = "none"; | |
| } | |
| }; | |
| document.getElementById('loadVideoBtn').onclick = function(){ | |
| console.log("Load button clicked"); | |
| document.getElementById('video_container').style.display = "block"; // unhide the video's containing element | |
| document.getElementById('video_controls').style.display = "block"; | |
| document.getElementById('playVideoBtn').style.display = "inline-block"; | |
| document.getElementById('pauseVideoBtn').style.display = "none"; | |
| window.app.videoPlayer = videojs("example", {}, function(){ | |
| console.log("Player ready"); | |
| }); | |
| window.app.videoPlayer.on('timeupdate', function(){ | |
| var curTime = window.app.videoPlayer.currentTime(); | |
| var duration = window.app.videoPlayer.duration(); | |
| var pct = Math.round((curTime / duration)*100); | |
| if (pct > window.app.pctPlayed) { | |
| window.app.pctPlayed = pct; | |
| } | |
| console.log(pct+"% played"); | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment