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. :)
Related
I have a single page website on which I would like to host up to 14 videos using the html5 video player. The video files are all between 80 and 150mbs and I'm currently hosting them on AWS S3.
I'm running into a problem, however, which is that the players do not load well. Once I click play, they take often 10 seconds to start playing. Because of this, I tried turning on the preload function (i.e. preload="auto"), but this led to other problems. Because there are so many players on the page, some of the players stall -- I think because when a browser tries to download too many at once, some will stall.
In order to mitigate that problem, I setup a queue to preload the videos three at a time. That works, but now I've run into another problem: Chrome, at least, stalls giving a message "waiting for available socket...." I know from this that that is probably due to a limit on the maximum six websockets that can be open at once.
So now I'm truly stumped. I'm not sure how to guarantee that the videos start playing in a reasonable time (1-3 seconds) after the user hits play, and not max out the browser's limits. I'm starting to wonder if this just can't be accomplished given the limits of the html5 video player.
If anyone has any ideas about workaround, or ways in which approach could be altered it would be much appreciated.
So instead of turning preloading on, I would suggest you set preload to none
e.g:
<video id="myVideo" preload="none">
Think of it this way - if you set 14 fairly large videos to all download at once, so they are available immediately for the user wants them, you'll end up with no one video actually fully loaded.
If you set them to not download at all until the user requests one (i.e. clicks the play button) then there may still be a small delay. However they'll end up downloading less overall, they'll only download the videos they actually watch and the page is much less likely to crash. This is much more considerate to the user too (think those on low bandwidth/throttled connections).
However, not all browsers respect the preload="none" option and may preload parts of the video anyway. The safest possible, but more complicated way would be to put placeholder images with fake play buttons on them, which on user click dynamically inserts a video tag to the DOM. That way you can be sure no video tag is ever loaded until it is requested.
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.
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.
I know that there's a very similar topic for this question, however I'm trying to do something a little different.
all of this is a little new for me... sorry...
Basically I'm trying to play multiple YouTube Videos in one page at the same time (mash up style) using YouTube API and JS
the thing is i want to control each of them separately, while they all playing. i found the code that is close to what i want. the thing is that the videos cannot be played together, once you hit play on a video the other one stops.
how can i control them separately, and still have the other videos playing in the background and not being influenced ?
here's the code i found on another topic
Thanks in advanced,
Maayan
The YouTube code playground has an example for this.
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