ReadyState element - HAVE_NOTHING

Question

I am trying to download a video and then play this video based on the scroll window. That I am currently working in Safari and Firefox, but not in Chrome. The error I keep getting in Chrome is: Uncaught InvalidStateError: Failed to set currentTime property to 'HTMLMediaElement': readyState element is HAVE_NOTHING.

Does anyone know what I'm doing wrong?

function updateVideo(video) { var video = $('#trees').get(0); var videoLength = video.duration; var scrollPosition = $(document).scrollTop(); video.currentTime = (scrollPosition / ($(document).height() - $(window).height())) * videoLength;//(scrollPosition / SCROLL_SCRUB_SPEED) % videoLength; } $(window).scroll(function(e) { updateVideo(); }); <video id="trees"><source src="/theme/pmc/files/video/trees_all.mov" type="video/quicktime"><source src="/theme/pmc/files/video/trees_all.webm" type="video/webm"></video> 

Answer 1

This error occurs when trying to set currentTime before the browser recognizes the duration video. Duration - part of the "metadata", which is usually located in the header of the video file and includes the height and width.

Usually, if you have a video element without the preload attribute, the browser will try to at least load the metadata shortly after the page loads. But, depending on the specifics of the browser, the rest of the content on the page and the speed of the network connection may not happen while you scroll at least once.

The solution looks something like this.

 /* memoize video, window and document so you don't have to create and garbage-collect new objects every time you scroll */ var video = $('#trees').get(0), $window = $(window), $document = $(document); function updateVideo() { var duration = video.duration, scrollPosition = window.scrollY; if (duration) { video.currentTime = (scrollPosition / ($document.height() - $window.height())) * duration; } } // update video every time you scroll $window.scroll(updateVideo); // update video when metadata has loaded $(video).on('loadedmetadata', updateVideo); 

This should make the error go away. If you try this and the loadedmetadata event never fires, try adding it to the end to force it:

 video.load(); 

Edit: Defined and set scrollPosition . Here is a working example: http://jsbin.com/vurap/1/edit

Answer 2

Just found code that is slightly faster and almost the same with less code: http://codepen.io/ollieRogers/pen/lfeLc/

 // select video element var vid = document.getElementById('v0'); //var vid = $('#v0')[0]; // jquery option // pause video on load vid.pause(); // pause video on document scroll (stops autoplay once scroll started) window.onscroll = function(){ vid.pause(); }; // refresh video frames on interval for smoother playback setInterval(function(){ vid.currentTime = window.pageYOffset/400; }, 40);