Html5 video delay in mobile safari

I have following problem. I have embedded video on my page:

<video id="video_1" width="520" height="360" controls="controls">
    <source src="http://patho/to/video.mp4" type="video/mp4" />

When i open my page i see black box. After 4-5sec play icon is being displayed. Is it possible to see this play icon immediately ? I tried to do a progress bar or something and checked all media events -> .

But it looks like this problem is not connected with my video but with quick time which need time to be loaded. Am i right ? Or there is a workaround for this ?

One thing i can do is to initialize video earlier and then just show it via js ...


Take a look at this document about preloading? If your file is huge sized, then nothing could be done. PS: IOS has own way of playing html5 video, is hardware accelerated and displayed above browser by system hack. That's why I think there is nothing that could be done.

what you can do is use the poster setting of the video tag:

<video poster="">
    <source ... />

this should lead to the image being displayed immediately after download of it, then download the play button once the player and the vid are loaded.

have fun,


It sounds like the index is at the end of the file: How to get your HTML5 MP4 video file to play before being fully downloaded.

Need Your Help

get multiple checked value in javascript/jquery

javascript jquery each

I have status id defined in my div tag which is present in a phtml file .Now, I need to fetch its value into the seprate javascript file.

Maven dependency not in pom.xml

java spring maven maven-2 maven-dependency-plugin

I have a project which uses spring. It uses version 3.1.1 but, for some reason I really don't know, some spring artifacts are duplicated with two different versions. I look for the those dependenci...