Last active
August 28, 2015 01:31
-
-
Save tristen/962fd625b89284225b26 to your computer and use it in GitHub Desktop.
movie loopin
This file contains hidden or 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></title> | |
| <style> | |
| .video-wrapper { | |
| position:relative; | |
| width:640px; | |
| height:360px; | |
| } | |
| .video { | |
| position:absolute; | |
| width:100%; | |
| height:100%; | |
| top:0;left:0; | |
| visibility:hidden; | |
| filter:grayscale(100%); | |
| } | |
| .video-two { | |
| -webkit-filter:grayscale(100%); | |
| -moz-filter:grayscale(100%); | |
| -ms-filter:grayscale(100%); | |
| filter:grayscale(100%); | |
| } | |
| .video.active { visibility:visible; } | |
| .controls { | |
| margin:10px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='video-wrapper'> | |
| <video | |
| class='video video-one active' | |
| id='video-one'> | |
| <source src='http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4' type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /> | |
| </video> | |
| <video | |
| class='video video-two' | |
| id='video-two'> | |
| <source src='http://www.html5rocks.com/en/tutorials/video/basics/devstories.mp4' type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' /> | |
| </video> | |
| </div> | |
| <div class='controls'> | |
| <button onClick=play()>Play</button> | |
| <button onClick=pause()>Pause</button> | |
| <button data-camera='video-one'>Camera #1</button> | |
| <button data-camera='video-two'>Camera #2</button> | |
| </div> | |
| <script> | |
| var cameras = document.querySelectorAll('button[data-camera]'); | |
| var videos = document.querySelectorAll('.video'); | |
| Array.prototype.forEach.call(cameras, function(button, i){ | |
| button.addEventListener('click', function(e) { | |
| var camera = e.target.getAttribute('data-camera'); | |
| // Remove previous active classes applied to videos | |
| Array.prototype.forEach.call(videos, function(video, i) { | |
| video.classList.remove('active'); | |
| }); | |
| // Apply an active class to the current one. | |
| document.getElementById(camera).classList.add('active'); | |
| }); | |
| }); | |
| var play = function() { | |
| Array.prototype.forEach.call(videos, function(video, i) { | |
| video.play(); | |
| }); | |
| } | |
| var pause = function() { | |
| Array.prototype.forEach.call(videos, function(video, i) { | |
| video.pause(); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment