I'm writing a video player using HTML5 video tags on Google Chrome: I need to show some videos (1), then remove them from the DOM document to show other videos and later create again some video tags pointing to the same files than (1).
I noticed that sometimes the videos are not showing the second time I load them, instead a 'stalled' event is fired...What am I supposed to do to handle this event and be able to show the videos? If I keep a reference to the first video tag then reuse it later it works, but keeping a reference to each video tag could be very memory-consuming!
If you have more than two or three videos that the browser is trying to load at one time, some of them are going to stall. Although HTML5 video provides a way to tell it to start loading videos, there's no way to tell it to stop. Once you start playing it the first time, as long as it's in memory, it's going to keep trying to load more data in case you decide to start playing it again. And it will only load so many videos at a time, so if you're still loading the first three videos, the fourth one will wait for a very, very long time.
Removing the old videos and loading them again later is the right approach, but you need to be very thorough about it to make the browser stop trying to load them. Here's what you need to do.
// 1) Pause the video
oldVideo.pause();
// 2) Clear the video source URL
oldVideo.src = "";
// 3) Tell the video to start loading "nothing"
oldVideo.load();
That last step is crucial. Even once you set src to an empty string, the video will ignore it until you call load. If you want, you can remove it from the DOM and any of your data structures as well so it can be fully garbage collected. But even if you do that, it won't be garbage collected unless you clear the src and call load.
The next time you load the video, either by creating a new element or setting the src on the same one, it should work just fine.
Related
I am writing a browser extension that would allow me to manipulate what video will be played next on Youtube. However, I'm having a hard time finding out what data I need to modify to update the next video.
I've tried to look at the "add to queue" buttons, since they modify what video plays next. However, due to lack of experience with chrome dev tools I can't track down what events they trigger that will change the up-next state.
I'm at a bit of a loss on what to do next other than bruteforce translating YouTube's minified javascript code into a readable format until I find the necessary functions.
Why don't you grab the video URL and put it inside your local storage when youtube go for reloading the next video you can block that request and load your URL as the next video.
**or**
Use Chrome Network Inspector to see the request made by youtube when the user hit the Add to queue button.
I want seamless playback multiple video contents. (HLS/using queueData)
preloading is works! but when the video changes, "loading" screen is displayed.
How i can playback without "loading" screen in CAF custom player?
Even though a PRELOAD request starts buffering the next item of your queue to reduce the loading time for the next clip, playback is never 'seamless'.
Every time the actual LOAD request comes in, the player will (by default) switch to the BUFFERING state and display the associated UI until it's back to PLAYING
Google's UX guidelines for autoplay are quite clear how the UI should behave on the playback of queues - and you might want to consider adhering to that if you want to publish your app. That being said:
Take a look at your HTML - are you using the <cast-media-player></cast-media-player> custom tags? You can use CSS to set the appearance of all states of the application - check the documentation for details.
--buffering-image and --spinner-image are the customizable elements that you can change here. Again: Those will always pop up when the player enters buffering state, so you will have to come up with something less disturbing than the spinner and default image: A black screen, maybe?
Also, you can not simply use CSS to get rid of those: When the playback is initialized and the queue is built, you most likely still want to show them - so totally disabling them is not an option.
The tricky part is finding appropriate events to dis- and re-enable them:
Consider the MediaFinishedEvent to disable them, and maybe the PLAYER_LOAD_COMPLETE event to restore them to their default value.
(The BUFFERING event might also work but was very unreliable when I tried to use it.)
On my website, I'd like to be able to stop the video loading. Can I do it with jquery? What're my options?
The need is that my website has many videos, when a user with a limited internet connection wanna see a one-hour video then decides that he wants quit the video page (ajax only is performed), the video continues its loading anyway, so if does this with two or three videos his browser will freeze to death. So unless he refreshes the page, the video loading goes on til it's done.
Given that my web's based on apache2, symfony2/php5, projekktor/jquery
Check this answer - HTML5 Video: Force abort of buffering
Apparently removing the value of the src attribute will cause the video to stop loading/buffering
The OP also suggested stopping the video first to prevent any errors in the Browser console
One way would be to split the page into multiple single video pages. It still doesn't solve the problem completely but at least user's resources are used in to a smaller extent.
Another idea that I've had is to set the source of the video to an empty string when the user stops the video. As far as I've read online it frees up the space and leaves the video blank. There should also be a button to set the source to the original path should the user want to play the video once again.
The second idea provokes minor issues such as being unable to continue the video from the moment the user stopped it but I recon it's still better than taking up user's connection to load it.
Why don't you use the API to play&pause the video: API
player.setPlayPause():Boolean
Sets the player to pause if its playing or vis versa.
Ore one of these:
player.setPlay():Boolean
Sets the player to play. If its already playing no changes apply.
player.setPause():Boolean
Sets the player to pause . If its already paused no changes apply.
player.setStop():Boolean
Sets the player to stop . Will cause the playback component to stop immediately and displays the current item´s poster image. Furthermore the start-button shows up.
I'm developing an HTML5 application (a game), that automatically preloads 5 video files. I'm able to do so correctly on Safari for PC, so there are no overlooked problems with file formats, codecs or such. The load fails on an iPad. As an official guide for video on iOS puts it:
This means the JavaScript play() and load() methods are also inactive
until the user initiates playback, unless the play() or load() method
is triggered by user action. In other words, a user-initiated Play
button works, but an onLoad="play()" event does not.
Does this mean, that I have no means to initiate the loading of video after a user initiated action, if that action hasn't been tied to a video element (user clicked on a regular div — I request loading and displaying of a video, compared to the user actually clicking on a video element to load and play that particular element)?
It means that if a user has not pressed play, you can't use the methods.
After further inspection, it turns out, that video.load() and video.play() methods can be called from any onClick handler for any <div> element (that probably stays true throughout every html element, that can receive click events.
The problem with preloading 5 video files on iPad is that it can only preload 1 and will flush any video data, if new video.load() request for a different video is issued, thus you cannot preload 5 videos, but you can make them into single one and then preload that single video.
I am looking to have a video start when a page loads, but once the video has completed, to hide the video (remove the layer possibly). I saw it on a yoga site a few years ago where a video message from the owner appeared over top the content when the page loaded but then dissapeared after the video was done. Not even sure where to begin looking for something like this.
This is something that needs to be handled at the player level. Many flash players or frameworks allow you to register for an event. One event might be on video complete. First get this working. You may not be able to do this from javascript. For example, adobe's strobe player requires you to write a swf plugin which would be loaded in the flash player. Not trivial.
After you have registered it, you can easily close the window by executing some javascript function.
Let me know if you have more questions.