title: Html5 video Scroll video
body: <p>I've a problem with the scroll control of video. I took this code : <a href="http://codepen.io/ollieRogers/pen/lfeLc/" rel="nofollow noreferrer">http://codepen.io/ollieRogers/pen/lfeLc/</a>. </p>
  
  <pre><code>var frameNumber = 0, // start video at frame 0
  // lower numbers = faster playback
  playbackConst = 500, 
  // get page height from video duration
  setHeight = document.getElementById("set-height"), 
  // select video element         
  vid = document.getElementById('v0'); 
  // var vid = $('#v0')[0]; // jquery option
  
  // dynamically set the page height according to video length
  vid.addEventListener('loadedmetadata', function() {
      setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
  });
  
  
  // Use requestAnimationFrame for smooth playback
  function scrollPlay(){  
      var frameNumber  = window.pageYOffset/playbackConst;
      vid.currentTime  = frameNumber;
      window.requestAnimationFrame(scrollPlay);
  }
  
  window.requestAnimationFrame(scrollPlay);
  </code></pre>
  
  <p>And it work in all browsers with the video of codepen but when I put my test video, it's not smooth, I try a lot of differents codecs or formats (example with my test video : <a href="http://www.dugautiertheo.fr/videoscroll/" rel="nofollow noreferrer">http://www.dugautiertheo.fr/videoscroll/</a>).</p>
  
  <p>I don't know why but it work fine and very smooth on Safari only.</p>
  
  <p>Can you help me ?</p>
  
  <p>Thank you</p>