I have native video tag with source which dynamically changes by onEnded event which triggers a method that loads in the next video source in the tag for playback.
The main implementation is to make a playlist and keep inject the video sources until reached the end of the list.
** PROBLEM: As soon as the video source changes, it flickers for a few milliseconds and then plays the next video.
Have tried multiple approaches to solve including fixed width - height but didn't work.
Once approach was to render multiple players and turn them hide/show depending on which source is being play. This approach worked as expected but the drawback was that if I had 100 videos in the playlist, it would add 100 video nodes in the DOM.
I am sure that it is not a page re-render & there are no other props or state changes other than video source.
Have even tried implementing redux to handle it with global state but no luck!
Attached a video link showing the problem:
See Video
I'm impressed that it's as smooth as it's appearing. A lot of context is torn down and set up again when you change the src.
Once approach was to render multiple players and turn them hide/show depending on which source is being play. This approach worked as expected but the drawback was that if I had 100 videos in the playlist, it would add 100 video nodes in the DOM.
You don't need 100... you just need 2. Get your next player ready to transition to, while the first one is finishing. Once you've transitioned, destroy the first player and get the third ready.
Related
If you have an html video, is there any way to set up an observer to watch for something like if the video changes color?
I’ve tried an async loop that watches the first pixel but it doesn’t actually let the video frames render while running
I'm creating a video player with HTML5 and Javascript and I'm wondering if anyone has solved the challenge of creating dynamic thumbnails.
Mimicking youtube video player where you hover over progress bar and a popup shows with a thumbnail. I know that youtube saves out an image and repositions the sprite in the thumbnail viewer frame based on position hovered over.
Is this viable to do with JS and canvas?
What I'm doing now is... hovering over my progress bar creates a copy of the video element. I then set the currentTime on the copied element. I then grab a snapshot using canvas. I'm not sure why, but the images seem to be blank.
Maybe someone has run into this problem?
YouTube have pre rendered thumbs that are stored in a single image in a grid with ten columns and how ever many rows are needed. The thum images I have seen are low quality jpg 800 pixels across giving thumbs 80 pixels by ?? (depending on aspect) When the user hovers the thumb closest to the that time is displayed.
Creating the thumbs at the client side will be problematic because video are not entirely random access. Seeking to a random location involves the video moving to the nearest previous keyframe and then decoding all frames till it gets to the frame you have requested. Depending on the format, encoding options, the spacing of key frames (if any rolling eyes), and if the seek location has been loaded, seeking to some location can be very slow. Getting a set of thumbs for a video can take a long time. The additional problem with the HTML5 video API is that it has only one playback channel, so while you are seeking for thumbs you can not watch the video.
You problem with blanks may be due to not waiting for the seek event.
Try
video.addEventListener("seeked",function(e){
// snap shot code here
});
But this does not always work I have found. So it pays to listen to all the appropriate events, and only seek when the video is ready. Here is a list of media events that will help.
As videos don't change your best bet is to create the thumbs on your server after the video has been uploaded. Low quality jpgs seem to be the go and will be loaded by the client much sooner than even a fraction of the video has been.
However, this can be achieved by using a combination of HTML5 canvas. You will have to do the following.
add an timeupdate event listener to the HTML5 video
at each 1 sec, grab the current time and create an element (span is this case) and bind the value of the current time in a special attribute of the newly created span
Append each created span element to your HTML5 progress element (I suppose you're using 'div' and not 'progress' element.
Add an mouseenter event listener to the created span.
Whenever the user hovers the progress bar, the mouse would eventually touches one of the span. Then, dynamically create a video element and set the src attribute with the main HTML5 video source. Then, set the currentTime to the value of the hovered span and snapshot it to an already canvas element.
There, you show the user the current frameRate.
Scripting is all about manipulations and gradually processes of putting pieces of codes to work.
I am digging into the finer points of Andre Ruffert's rangeslider.js and I am having difficulty into incorporating his code into controlling and reacting to a simple HTML5 audio element.
I see that you can programmatically change the value of the slider with the click of a button, but how would I link the audio to update automatically with the audio as it plays, and modify the audio by clicking and dragging the thumb of the slider?
I've made a working demo here: http://jsfiddle.net/alan0xd7/79ff562k/
This uses the timeupdate event to update the range slider.
However there are some quirks when you try to change the time while it is playing - sometimes it snaps back to where it was. I believe this is some sort of race condition, because as you are sliding the track, the timeupdate event would fire and change it back to the current time. To make it work properly, you probably need to introduce some additional logic like pausing the audio while the slider is being dragged.
Hope this helps!
I am making a website for a friend of mine and he wants a really complicated one. Between the menupoints there are videos and the content is displayed on the last frame. So I thought I could use the videos (about 2 seconds long) as a background and fade the content in after two seconds. How should I go about this?
what I'd do is have the content as a hidden div. When you play the video attach an onended event to it and use that to hide the video element and reveal the content - that way they always stay in sync - for instance see something like this Add a div to replace Video after Video Plays Through
I've made a javascript interface that does some advanced things to allow jumping to specific parts of the video. I've essentially got a timeline interface used for scrubbing and I'd like to have a vertical line on the timeline which represents the current progress of the video.
So, I'd like to register a callback with my video or open video player, if possible, so that it will call me repeatedly telling me what the current progress of the video player is so that I can advance the blue line and make it appear like a progress indicator. They can click on my timeline to push the video to a certain point, but they can also jump to a location using the video's direct controls and when that happens I'd like to get that same callback to tell me to jump my line scrubbing indicator that the location in the video has changed.
Does that make sense? Any help?
Refer yourself to this wonderful page setup by the W3C that demonstrates media events. The timeupdate event will probably be the one the most useful to you.