Videos have a strange behavior when page load

Question

I have a problem on a website.
When I reach this url http://www.diamir.com/en/product/diamir-vipec-12/, on page load, videos are not loading correctly. When I click on the play button, video remain black and only after a while become clear. It's really a strange behavior. I don't know if it is an issue with the codec or something else.

The website is optimized using PageSpeed Service from Google.
Codec: AVC (Baseline@L1.3)

Here is the HTML source:

<video controls class="img-responsive">
   <source src="http://a3.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_x264.mp4" type="video/mp4">
   <source src="http://a1.diamir.com/wp-content/uploads/2013/11/02-FrontalSafetyRelease-SMALL-H.264_VP8.webm" type="video/webm">
</video>

Someone has had the same issue?

Answer 1

There are a couple of things you need to fix/take into account:

• your videos play well in Chrome but IE displays an error message and firefox just won't read them.
• your mp4 has the MOOV box after the MDAT box which means your mp4s are not prepared for web delivery. This issue is described here

Suggestions to fix it:

• use Handbrake, ffmpeg or MP4Box to prepare your MP4 files for web delivery (aka faststart)
• use the preload attritube set to "auto" in your HTML5 video tag for faster playback on click after page load (if you do that do not load too many videos on the same page or your end user will suffer network congestion)
• set width an height for your HTML5 video tag otherwise it will scale to the resolution of the video file. You may want to keep control on that especially for responsive design.

Your videos have no audio track. That should not be a problem for HTML5 video playback but keep that mind if needs be. I have seen cases where you need to add a silent audio track to make it work on all devices (especially for exotic fallback from HTML5 video).

You can read there for more infos on HTML5 video. I suggest you double check the section called "MIME Types Rear Their Ugly Head" as well.