javascript - HTML5 video not working in any browser

Question

I found other posts here for the same issue, like this or this but I wasn't able to solve my issue. At first, I run below javascript:

<script type="text/javascript">
    var options = JSON.stringify({'maxSize': 320, 'videoQuality': 6, 'noaudio': true});
    ogg.encode(options);
</script>

Then I have below html:

<video id="video1" width="500" controls="controls" >
    <source src="Rio2Trailer.mp4" type="video/mp4"/>
    <source src="Rio2Trailer.ogv" type="video/ogg"/>
    <source src="Rio2Trailer.webm" type="video/webm" />
    The browser does not support HTML5 video.
</video>

I tried adding

AddType video/webm .webm
AddType video/mp4 .mp4

to the .htaccess file(which was empty) but no success.

On Firefox, i get the message:

No video with supported format and MIME type found.

On Chrome, I can just see the controls but they look like they are disabled and I don't see the play button in the middle of the screen as well.

Answer 1

Playing HTML5 video can be tricky. There are 3 things to check for:

• check your MP4 files is properly encoded for web delivery. You can try to use handbrake or MP4Box or ffmpeg to repack your file. You need to activate the "web optimized" option (aka fast start) with handbrake.
• check your server config: for mime types have a look here section "MIME Types Rear Their Ugly Head". Try to restart your Apache server after the changes in config. If it does not work in .htaccess try your site-wide httpd.conf. Other things to check includes CORS and 206 Partial Content/Range Requests
• check your script/HTML5: try a barebone HTML5 video tag in a blank page with your mp4. If it works then scripts in your page may be affecting video playback. You can also check CPU load when playing back full HD videos.

I normally use videojs mp4 sample as a reference for a known working mp4/server config. This applies to mp4 but for webm/ogg as well (you can use make web video for transcoding to WebM or Ogg).

Let us know how it goes.