I guess this is a pretty simple question but I was wondering if I could load the contents of my webpage before a browser attempts to play or stream a certain mp4 file that is on the webpage
The reason why I have to do this is because chrome will stream it and play it fine as it loads but other browsers such as safari will want to load the entire file before playing. This however gives no indication to the user.
So ideally I would like it to load the necessary mp4 file before it starts playing. Obviously I would need some sort of loading screen to appear first and once everything was loaded the website would continue.
If this is possible where should I start?
Use setTimeot() after page is loaded.
function playFunc(){
// The code to play your mp4
}
document.onload = function(){
setTimeout(function(){ playFunc() },3000); //Execute playFunc() after 3000 millisecond
}
Related
I have an HTML5 <audio> element that I change the src to every minute with the following code:
$(Audio)[0].src = newBlobURL;
$(Audio)[0].load();
$(Audio)[0].play();
There is a brief stop between the previous audio and the next audio. Both audio files are in wav format and are stored in Blob URLs.
How can I remove the stop between audio files? This problem can be heard more on i-OS safari but it can be reproduced on most browsers.
The delay is likely from loading the new audio file. Try loading all of your audio at once when the page is loaded. Then you can play them one at a time without loading each one in real time.
Run all of the source and load all at once when the page loads.
$(Audio)[0].src = newBlobURL;
$(Audio)[0].load();
i am using a video on my website. The problem is the video gets downloaded every time it is loaded. For eg. When the video loads for the first time the browser downloads the 5.3 mb of video. Since i am using html 5 video loop and autoplay, it loops and again downloads another 5.3mb of video. This happens every time the video is loaded.
Is there any trick to cache the video for once and used the cached version as long as the video is played.
Answered for anyone else that comes across this question.
Chrome has an option to disable the cache while devtools is open. This is set as default to unchecked, i.e normal behaviour.
If you look at the screenshot in the question, you can see in the size column "(from cache)" that although it looks like Chrome is re-downloading the video each time, it is actually getting it from the cache.
I have created code for playing an .mp3 file using JavaScript. But the file is taking to much time to play on Android. I want to play the sound quickly after click on a text image. How do I increase loading speed on Android?
My JavaScript code:
if(window.audio)
{
audio.pause();
}
window.audio = new Audio (audio_path);
window.audio.play();
Check demo here -
http://97.74.195.122/gizmo-demo/canvasslidertwo.php
In the above link, click on the Japanese word for playing sound.
You are actually facing the bug depicted in this question. Which makes chrome browsers redownload the files from an Audio Element each time you change its src property (no-caching).
One solution would be to use the WebAudioAPIand store your audio files in the buffer. Doing so, you should be able to call them with no latency.
You can check the accepted answer for an example on how to deal with it.
Or you could also try not to call a new Audio() on each click, and rather load every audios from your page and only call their play() method on click.
But I'm not sure it would fix your issue.
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
}
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