Long buffering in mp4 videos

Question

We've built our video site to stream videos that cater to all browsers - OGV for Firefox/Chrome, Flash for IE and MP4 for Safari. Specifically, our video tag is:

<video id="movie" width="100%" height="100%" autoplay="autoplay" controls="" preload="" tabindex="0">
<source src="video.mp4"></source>
<source type="video/ogg;" src="video.ogv"></source>
<object id="moduleHolder" width="800" height="500" type="application/x-shockwave-flash" data="webplayer.swf" style="visibility: visible;">
<param name="allowfullscreen" value="true">
</object>
</video>

Everything works fine in FF/Chrome/IE, but when it comes to Safari, there is a very long buffer time before the video starts playing.

We've tried using the QTIndexSwapper application to place the MOOV to the beginning of the file, but apparently the metadata was already located at the start:

Error: MOOV is in proper place, processing not needed

The OGV and MP4 files are similar in size, so I assume it's not an internet connection problem as the OGV movies load almost immediately.

The MP4 file is encoded with Adobe Media Encoder CS5, and the specific details are:

• Multiplexer: MP4, Standard stream compatibility

• Video: 800 x 600, 29.97fps, Main Profile, Level 4.2 VBR 2-pass, 1.5Mbps (target), 2Mbps (max)

• Audio: AAC, 160 kbps

• 'Use Maximum Render Quality' checkbox is checked.

We're thinking it's an encoding problem, but then again the files were playing fine a few weeks ago. Any ideas or pointers are greatly appreciated.

Answer 1

issue seems tobe due to internal player buffering before playback could start. step suggested below might help you.

HTML5 <video> element - buffering size, starting video quickly