I am having problems determining when a clip has fully downloaded in Flowplayer. In the project i am working it is important there are no buffering pauses during the playback so i must be shure that the clip is fully loaded/downloaded.
The onLoad event fires when the player is loaded (not the clip) so not good.
Any idea if there is such event or how my application can know when the clip has fully downloaded?
Thank you
There's only onBufferFull when the clip buffer is filled completely.
You might want to try adding a second clip to your playlist after the main video and then add a onNetStreamEvent or onMetaData to that clip so you will know when the second clip received network data and therefore begins loading.
http://flowplayer.org/documentation/events/clip.html
To make sure there are no buffering pauses you might also consider to use a higher Buffer value, let's say something aroung the entire clip length?! There's a property called bufferLength for that:
http://flowplayer.org/documentation/configuration/clips.html
Related
there < i need your help.
I have made a hero page with video as background. And I have some text animation too.
Due to the video file size and network performance, the text animations are always starting early than the video loaded and play, i.e, the text animations started in a black background.
So is there any event listener i can use to know that video is starting playing , and i can set animation's play state to run.
I tried many listeners, load, play, playing, canplay, ....seeems they don't fire.
And I also find poster attribute doesn't work either, is it because i used autoplay , loop, and preload="none" ?
Thanks
I have a soundfile running automatically and on repeat during on website. Since it's a simple game, sometimes after user takes certain actions I have dialogues or video clips played and the main music in the background interferes with that.
I tried using .pause() function and it indeed pauses the music, but I didnt find an efficient way of turning it back on again after the certain clip is played. Perhaps setTimeout function could work, but that wouldnt be very efficient to determine how long said clip lasts
You can pause the main (loop) audio when the dialogs are triggered and listen for their end to resume playing the main audio file.
Listen to audio/video ending: https://www.w3schools.com/tags/av_event_ended.asp
So i'm trying to stream video in segments without using the MediaSource extension. (Because not all browsers support MSE). Now i'm trying to do this by loading two video elements and play the next one at the right moment. But this has a very tiny delay between switching. I tried to keep checking the currenTime of the video and after a tiny fraction play the next video element. But this doesn't really work that well (audio overlaps, or delay)
Mind you that the video are preloaded and loaded from Blob storage. So the loading shouldn't delay the playback.
How can i make this (Or another solution without flash) play smoothly without using MediaSource extensions?
Your best bet is to use two video elements positioned one on top of the other. The first one should be playing the current part (or chunk) of the video. The second video element should be loaded with the blob that contains the next chunk and be paused. It should also be hidden (you can set display:'none' or z-index:-99999). And then when the first video element ends (the end event is dispatched), call the play() method of the second video element, show it, and hide the first one. Rinse and repeat.
This is what the LifemirrorPlayer does.
If the chunks of the stream are perfectly encoded and cut then this technique works. Often it doesn't. Common problems are:
Synchronizing the audio stream is the probably the hardest. After twenty or thirty chunks are played, the audio usually loses sync with the video. This is very annoying for the viewer and hard to detect and fix (i don't know of any solution actually).
The video element doesn't end. This is usually caused by an encoder that has put too much (or too little) content into a chunk. It can also be caused by improperly cut chunks, by a buggy encoder or decoder.
Flickering when the two video elements are swapped. This depends on the browser. However most browsers deal very well with this and the swap is quick and smooth.
I know the browser can detect image sizes early on, by how it reserves the space early in the download and then fills in the area with the image as it loads.
My question is, is there any way I can get a hold of that? Is there some event that fires when the browser has information on the image such as its size?
I've used an onLoad event attached to the image itself in the past. It often fires before the image has been drawn by the browser, but that may not be early enough for your purposes.
I'm dynamically loading and drawing the first frame little video elements to a bigger canvas. (when you rollover it plays them) It usually works (90% of the time) but randomly sometimes one or other of the videos will draw a black box signifying that the imagedata sampled from the video is empty.
How I'm doing this is to use the canplaythrough event on each of the videos to identify if the video is ready to be sampled but I'm wondering if there is a better event I should be using?
for instance:
myvid.addEventListener("canplaythrough",function()
{
//do the sampling now
});
but the above occasionally and seemingly randomly draws a blank?
Any ideas? I've also tried: onloadeddata and canplay but these were even less reliable
I feel reason of blank frame is,even a one second video also consists of lots of frames. So it may contain a blank frame in between. I feel the event canplaythrough is proper. You may modify your sampling logic.
myvid.addEventListener("canplaythrough",function()
{
//check the intensity of some pixels of sample if they are blank. If blank then raise canplaythrough event
//else do the sampling now
});