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.
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'm aware this question exists, please don't mark this one as a duplicate as things have changed since it was originally posted.
I am looking to embed what's called a "secret" (aka private) Facebook video onto a sales page to serve as a video sales letter. The video needs to play automatically (for as many devices as possible, anyways) and needs to have all video control options removed.
Basically it's click to play, click to pause, and if they know to use the arrows to FF or rewind, then, so be it. But that'll be less than 1% I'm assuming.
In the old solution the person mentioned Facebook having the option data-controls="false".
When trying to use this parameter now the entire video locks up and suggests the user to reload the browser.
Is there a way I can get around this? I'm thinking building out a custom player and seeing if I can set the FB video as the source, but even then it seems like there will be a page name and share option overlay on the video.
Any ideas?
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.)
I am attempting to create an app that has social media features like Instagram, Twitter, etc where you can post videos and watch them in a list. However, when the list reaches a certain point, all the videos end up loading 'corrupted'. (Only shows a play icon with a slash through it)
The problem only occurs on iOS. I have done a little research and it seems to stem from this issue.
I think that is the cause of my issue because if I use the solution from that thread and reload the page, the videos load fine once again.
However, I want this list to be as long as the user keeps scrolling. So if iOS has a limit on the number of videos that can be loaded at one time then how is one to accomplish making an infinite scroll?
Thanks,
Troy
Instead of loading videos stream them. It would save memory.
When video is out of view, pause the stream to keep bandwidth and save traffic.
Cheers!
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.