Show loading image when video buffer next frames - javascript

I' using html5 video. I need to show the loading image when video buffering next frame like a youtube when video is stop and downloading next frames youtube show a loading image which is circle gif image and when video download enough frame to start it loading image disappear.
I'm not asking about first time video start.
I know I can use poster while video is not starting or I can use event loadstart and canplay.
These things work fine when video is starting first time. But problem is that I want loading image when video is stop while playing due to buffering next frame.
So, what I event use or how can I do this.
Thanks.

To achieve this, you may want to listen to the corresponding events from the video element. A list of available events can be found at w3schools.com.
The two events of interest for your goal are stalled and waiting, once they are fired you can display your loading animation.

Related

How to draw a first video's frame in canvas?

I've found several posts like this but none of them work. For example, this post's first answer is a common solution. I made a fiddle based on his fiddle. The problem is it does work if you change the video's position it'll draw the current frame of video. But what I need is the first frame of the video just after I uploaded it. I tried to draw an image when the loadeddata event is fired. According to its description just what I need:
The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
Still won't draw the first frame. Then I tried to draw an image on canplay and canplaythrough events which should work fine. But it didn't.
After some time playing with events, I found a temporal solution if we set a timeout for > 50 ms and try to draw a canvas it'll draw the first frame. But it's not a stable solution.
My thoughts are maybe the problem with buffering but at the same time canplaythrough fires when the user agent can play the media and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. And it still didn't work.
Any thoughts?

Stop Audio in Wordpress

I am using the background video option in Divi (by elegant themes) in Wordpress to show a 4 minute or so long video in the background. The thing is, I don't want the audio. I understand if you scroll down far enough the entire thing stops, but I just don't need or want the audio. Is there any custom code that I can use (or a plugin) to get the audio to stop playing ON THE VIDEO BACKGROUND, or will I have to convert it to a gif? Thanks.

"Hide" a YouTube Video's Loading screen

After looking through the YouTube IFrame API, I haven't been able to find anything that can help me.
My goal is to "hide" the loading screen a YouTube video has; i.e. this black screen with a spinning wheel. While it only appears for a brief second and doesn't bother me, it's bothersome when trying to use a YouTube as the background of an element.
My approach to solving this problem was to have a picture of the first frame of the YouTube video overlap the video and then hide it when video starts playing. I originally thought I'd be able to use onStateChange and watch for the YT.PlayerState.PLAYING value so I can hide the image but this event is triggered when it is about to start playing; in other words, it hides the images when the video is about to start playing which is when the loading screen appears.
Are there any other approaches to this or am I stuck with the brief loading screen or would a self-hosted video be the better approach? I wanted to avoid self-hosting the video because of bandwidth.
set the background of the iframe container to black and set the iframe opacity to 0, once it starts playing set the opacity back to 1
Host the video and use an API where you can; customize the media player, hide / show / customize load screens, cue points, start poster / end poster, etc. Or else your spending your time hacking youtube API capabilities with funky javascript.
JW player: http://www.jwplayer.com/
Flow Player: https://flowplayer.org/docs/cuepoints.html
And many others you could check out.
video.js, popcorn.js, etc etc.
<div id="player" style="background: #FFFFFF; opacity: 0;"></div>
// 2. This code loads the IFrame Player API code asynchronously.
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
// 4. The API will call this function when the video player is ready.
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video(state=1),
// the player should play for six seconds and then stop.
if (event.data === 1) {
console.log('video plays');
document.getElementById("player").style.opacity = "1";
}

Video Networkstate InternetExplorer

I'm trying to create a video with slides next to it using HTML5 and Javascript.
The problem with InternetExplorer is that it's video networkstate stays on 2 for a while. As long as it is downloading the video, it won't be downloading my slides next to the video.
As a fix I tried pausing the video if the preloaded image isn't loaded on the time it has to pick over the slides' spot. But however the video stays downloading (Taking about 300 seconds according to the network state) And once it's done the slides will load directly. (Taking 260 seconds according to the same thing, but as soon as the video is loaded they ARE loaded)
When ever I try to use myVideo.networkState in the console I get state 2(loading) when it's not working, and state 1 when it does. So it has something to do with the video.
So the question:
Is there a way to either give priority to the slides, so they WILL load
Or a way to let IE download both slides and video on the same time.
Or giving the video a limited speed, if this has to do with a speed problem.
Answer: Delete Internet Explorer, Download Google Chrome.

How can I stop the preload of a video (HTML5 - Javascript)

I have a web page with a video player preloading 3 videos (low, med, and high quality of the same video). Then, when the user clicks on one the button corresponding to the desired version, the video opens.
What I would like to do is to then stop the preloading of the two other videos.
Is that possible? In other words, can the "preload" attribute of the HTML5 Video tag be cancelled or stopped on the fly with some Javascript ?
I just came up with a solution to a problem I had that resembles your own. I am preloading a list of movies on my page, in series, but I need to be able to jump to one of them and prioritize it ahead of whatever might have already been preloading, in order to play it as quickly as possible.
I have a div#prebuffer element that holds the preloaded videos, as they are buffered. When I need to forget about preloading, I simply do this:
var $video = $('#prebuffer video:last');
$video.find('source').attr('src', '');
$video[0].load();
// it has now stopped preloading.
// and then, because I don't want this half-loaded broken cruft hanging around:
$video.remove();
It's slightly ugly, but I wasn't able to find a nicer way. And it gets the job done.
With jQuery, you can try:
$('#videoPlayerId').removeAttr('preload');
I don't know that it will stop a video that's already preloading.
From a UI perspective, why are you trying to preload all 3 videos at the same time? This will slow down the loading speed of all three; if you only preload one of them, more of the video will have a chance to buffer before the user starts viewing it.
I would suggest preloading one of the videos of a default quality and only loading a different quality video if the user selects it. This is the behaviour used by YouTube, Netflix, and others.
There is dedicated tag nowadays:
<video preload="none" ....>

Categories