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" /> </video>
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 -> http://dev.w3.org/html5/spec/single-page.html#mediaevents .
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="http://link.to/poster.png"> <source ... /> </video>
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.
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.