Hide div after specific time and after buffer the flash video - javascript

Hi i embed a video in my html page and i want to hide div after complete the video. and a specific time.my video time is 12 sec.
I am using this function
$('#fvideo').fadeOut(12000);
and html code.
<div id="fvideo" class="video">
flash video
</div>
UPDATE
actually what i want is that
flash video fadeOut time should start after buffering completely.
or
is there any way to fadeout that div( containing flash video) after buffering and running(once) successfully.

To hide a div when a flash video if finished you need to define a flash var to send a value for that so the js can pick it up.
I dont recommend you to use a 12sec settimeout for this as you never know what happens in people's browser. they might have low speed connection and face extra seconds loading the video. then it would hide before they finish watching.
if you are more of a js guy than action script you might want to consider using plugins like soundmanager 2 where they have flash gateway apis which allows you to open flash videos called from jquery...
those apis already have done this kinda work for you. so they would have call back function for loading the video...something like onFinishPaying : function() {... bla}
you can find it here
and here is the basic video setup sample code

Use settimeout functionality.
setTimeout( "document.getElementById('fvideo').style.display:none", 1200 );
Check Here

Related

currentlyLoading-Event for html5 video-Tag

I'm looking for a way to create something like a loading animation on a html5 video similar to the Youtube Video display (reference: https://www.youtube.com/watch?v=5vcCBHVyG50)
I tried it with the canplay-Event but I think I misunderstood the real meaning of this event.
My thought of this event was that enough data has been loaded and buffered so that the video can be played again.
But in my case this event just fires once. At the beginning of the video.
Is there any special Event which will be fired when the video is playable or needs to load more data?
Use fontAwesome framework. It has got your animation.

Html5 video loading improperly

I've got a project I'm working on implementing auto playing html5 video in a pop up window on hover. Everything is working close to fine however, in Chrome, when you hover over a video there is a small black box in the popup for a split second.
Now, I'm sure this has something to do with the time it takes to pull the video and load it. I'm just not sure on how to combat it efficiently. Maybe delay the playing somehow or make sure it's loaded before onMouseover()?
The project can be found here
You can just show a loading animation before the media is loaded. To know how, read this Tell whether video is loaded or not in Javascript
To load all the videos before will be troublesome for the user if there are a lot of videos.
Checking whether video is ready
if ( yourVideoElement.readyState === 4 ) {
// it's loaded
}

Ways to play music/sound on the background

I want to play a small music on my website when users log in. But the prob is if I use HTML5 audio then it will slow down the speed and page load will take more time (I may lose visitors). Any ways to load music without slowing down page load? Music is not pause-able so I need the player to be hidden.
It's simple:
<embed src="background_music.mp3" autostart="true" hidden="true" loop="true">
As JohnnyJS said, it won't slow down your website, because it'll start only after all the elements and images are downloaded.
You really dont need using HTML5.
and that has nothing to do with page load, the function that calling the music will get called only after all elements loaded and images downloaded.
im sure that will help you:
Next time just google it. :)

Any Js which can detect flash video lenght and show play again and next video

I am wondering is there Java Script library or script or any trick which can detect flash video length and show play again and next video after its end.
As YouTube do.
any reference example or tutorial can also help me.
I am here after Google.
What you really want is the flash video player to make an ExternalInterface call to javascript letting it know it has completed. You would need access to the flash file to accomplish this.
You could technically track the video play progress with javascript and load the next video on complet. The problem with this is that it would require you not only to know the length of the video, but also when it plays/stop. The only way to do that is by having flash make ExternalInterface calls. At that point, you might as well just listen for the video's complete event.

Is there a way to detect when a Flash video has finished playing?

I work on a website that embeds videos from many different websites, the number of sources run into the thousands. For YouTube, their JavaScript API allows a way to detect when the video ends and one can execute any function he wants at that time. But this will only work for the youtube videos. What about all the others?
So is there a global all applicable way to detect when the Flash video on a page has stopped playing using either javascript or action script? And by "stopped playing" I mean stopped playing when it reached the end and not just been paused half way.
P.S. There will always be one embedded video inside a <div> with the id video on the page.
Just like YouTube provides an API, those players from those external websites have to provide their own APIs as well. There isn't an easy one-size-fits-all solution that you can implement in JavaScript.

Categories