Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="//vjs.zencdn.net/4.3.0/video.js"></script>
  <link href="//vjs.zencdn.net/4.3.0/video-js.css" rel="stylesheet">
  <title>JS Bin</title>
</head>
<body>
  <video id="video_1" controls preload="none" class="video-js vjs-default-skin" >
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
  </video>
    <video id="video_2" controls preload="none" class="video-js vjs-default-skin" >
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
  </video>
    <video id="video_3" controls preload="none" class="video-js vjs-default-skin" >
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
  </video>
  <script>
    $(".video-js").each(function() {
      var id = this.id;
      videojs(id, {"techOrder":["flash", "html5"]}).ready(function() {
        this.on('play', function() {
          $(".video-js").not("#" + id).each(function() {
            videojs(this.id).pause(true);
          });
        });
      });
    });   
  </script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers