Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function () {
 
  var v = document.getElementById("myVideo");
  var p = document.getElementById("pbr");
  var c = document.getElementById("currentPbr");
 
  p.addEventListener('input',function(){
    c.innerHTML = p.value;
    v.playbackRate = p.value;
  },false);
 
};
</script>
 
<style>
.holder {
   width:640px;
   height:360;
   margin: 0 auto;
   margin-bottom:14em;
}
 
#pbr {
   width:100%;
}
</style>
 
</head>
<body>
 
<div class="holder">
  <video id="myVideo" controls>
    <source src="http://hyperaud.io/video/obama-responds.mp4" 
          type='video/mp4' />
    <source src="http://hyperaud.io/video/obama-responds.webm" 
          type='video/webm' />
  </video>
 
  <form>
    <input id="pbr" type="range" value="1" 
                    min="0.5" max="4" step="0.1" >
 
    <p>Playback Rate <span id="currentPbr">1</span></p>
  </form>
</div>
 
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers