Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html> 
<title>Video/Canvas Demo 0</title> 
​
<script>
  function init() {
 vid = document.querySelector("#vid");
 play = document.querySelector("#play");
 pause = document.querySelector("#pause");
 rewind = document.querySelector("#rewind");
}
function playVideo() {
 vid.play();
 play.style.color='black';
 pause.style.color='#999';
 rewind.style.color='#999';
}
function pauseVideo() {
 vid.pause();
 play.style.color='#999';
 pause.style.color='black';
 rewind.style.color='#999';
}
function rewindVideo() {
 vid.currentTime = 0;
 play.style.color='#999';
 pause.style.color='#999';
 rewind.style.color='black';
}
</script>
​
​
 
<!-- <video> tag, with the @controls attribute
     giving it the play/pause/seeker controls. Try removing the controls attribute, 
     adding autoplay or loop -->
<video id="vid" controls> 
    <!-- I have three versions of the video encoded with
         different codecs.  The browser will automatically
         choose the first one it knows it can play. --> 
    <source src=http://html5doctor.com/demos/video-canvas-magic/video.webm type=video/webm> 
    <source src=http://html5doctor.com/demos/video-canvas-magic/video.ogg type=video/ogg> 
    <source src=http://html5doctor.com/demos/video-canvas-magic/video.mp4 type=video/mp4> 
</video> <p>
      
      Example of custom controls :<p>
      <button type="button" id=play" onclick="playVideo();" 
              style='cursor: pointer;' >Play</button>
​
<button type="button" id="pause" onclick="pauseVideo();" style='cursor: pointer;' >Pause</button>
​
<button type="button" id="rewind" onclick="rewindVideo();" style='cursor: pointer;' >Back to beginning</button>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers