javascript - The element's readyState is HAVE_NOTHING -


I am trying to load a video and then run that video on the basis of window scrolling. I have currently worked in Safari and Firefox, but not Chrome. The error I get in Chrome is as follows: Unrecognized Invalid StateError: Failed to set the 'Current Time' property on 'HTMLMediaElement': The prefix of the element is HAVE_NOTHING

Does anyone know what I do wrong Am I

  Function Update Video (Video) {var video = $ ('# trees'). Get (0); Var video length = video.duration; Var scrollPosition = $ (document) .scrollTop (); Video.currentTime = (scrollposition / ($ (document) .ite () - $ (window) .hite ())) * Video length; // (scrollposition / scroll_scrub_spied)% video lamp; } $ (Window) .scroll (function (e) {updateVideo ();}); & Lt; Video id = "tree" & gt; Source src = "/ topic / pmc / files / video / trees_all.mov" type = "video / quicktime" & gt; & Lt; Source src = "/ topic / pmc / files /video/trees_all.webm" type = "video / webm" & gt; & Lt; / Video & gt;    

This error can be sent at any time to you currentTime before the video < Code> duration knows the browser This period is part of "Metadata", which is usually in the header of the video file and it contains height and width. Typically, if you have

code> attribute will try to load the metadata soon after the browser loads the page, but the browser's nuances, pages Based on the rest of the content and the speed of the network connection, this can not happen until you can scroll at least once.

A solution looks like something in this way.

  / * Remember the video, window and document so that you do not have to make new objects and collect garbage every time to scroll. * / Var video = $ ('# tree') .get (0), $ window = $ (window), $ document = $ (document); Function Update Video () {var duration = video.duration, scrollPosition = window.scrollY; If (period) {video.currentTime = (scrollpost / ($ document.height () - $ window.height ())) * Duration; }} // Update every time you scroll $ window.scroll (updateVideo); // Updated video when metadata $ (video) has been loaded .on ('loadedmetadata', updateVideo);  

This error should be removed. If you try this and the loadedmetadata event seems to fire, then try adding it to the end:

  video.load ( );  

Edit: set and set scrollPosition . Here's an example:


Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -