javascript - html5 video: very slow loading - Stack Overflow

admin管理员组

文章数量:1312301

First: there are topics with the similar title. I browsed them but dint find a satisfactory answer.

I am testing autoloading of html5 video in android and ipad.(Auto load only works in few browsers: Firefox, Opera and Safari).

The video loads instantaneously if it is on the device that is playing. But if the video is on a server it takes very long time to load(It took nearly 5 mins for the video to start).

I dont think the problem is with bandwidth. For testing purpose I have hosted the files on google drive. (accessing Google drive should be pretty fast and the size of the video files are less than 2MB).

Can you suggest how to speed up video loading?

Here is my video element:

<video  id="video1" width="430" height="430" controls  preload="auto" >
<source src=";id=0B0eCCOckMJskRDl2enU4N1JLSGs" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<source src=";id=0B0eCCOckMJskbURTTjJVaG42V0U" type='video/webm;codecs="vp8, vorbis"'/>
</video>

Thanks.

First: there are topics with the similar title. I browsed them but dint find a satisfactory answer.

I am testing autoloading of html5 video in android and ipad.(Auto load only works in few browsers: Firefox, Opera and Safari).

The video loads instantaneously if it is on the device that is playing. But if the video is on a server it takes very long time to load(It took nearly 5 mins for the video to start).

I dont think the problem is with bandwidth. For testing purpose I have hosted the files on google drive. (accessing Google drive should be pretty fast and the size of the video files are less than 2MB).

Can you suggest how to speed up video loading?

Here is my video element:

<video  id="video1" width="430" height="430" controls  preload="auto" >
<source src="https://drive.google./uc?export=download&id=0B0eCCOckMJskRDl2enU4N1JLSGs" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="https://drive.google./uc?export=download&id=0B0eCCOckMJskbURTTjJVaG42V0U" type='video/webm;codecs="vp8, vorbis"'/>
</video>

Thanks.

• javascript
• android
• html
• html5-video

Share Improve this question Follow asked Sep 5, 2014 at 15:03 Raghavendra NRaghavendra N 6,71411 gold badge2424 silver badges3939 bronze badges 2

• Have you tried removing 'preload' attribute? (Afraid I can't be much help otherwise!) – ne1410s Commented Sep 5, 2014 at 15:05
• yes I tried that too. – Raghavendra N Commented Sep 5, 2014 at 16:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The reason it does this is because sometimes the video encoder (whatever programme was used) places the video index at the end of the video file rather than at the beginning. This interferes with progressive download as the browser doesn’t know anything about the file until it has downloaded it and read that index.

Run this program below on it, which will simply re-encode the file, placing the index at the beginning.

http://renaun./blog/code/qtindexswapper/

Let me know if this helps.

Install qt-faststart, then run the mand:

qt-faststart inputfile.mp4 outputfile.mp4

本文标签： javascripthtml5 video very slow loadingStack Overflow