Chrome won't play .mp4 file

Question

I'm trying to get HTML5 video to work. I am working off a local server.

<video id="headervideo" controls>
   <source src="<?php echo base_url(); ?>assets/home.mp4" type="video/mp4">
   Your browser does not support the video tag.
</video>

However, the file refuses to play. When I access it with an absolute path it simply shows the player with the play button greyed out. What could be the issue here?

Answer 1

Browsers like Internet Explorer and Safari support .H264 codec which plays mp4 files. Firefox support Theora codec which plays .ogv files. Chrome supports both .H264 and Theora. But to make your video works across all browser you need to encode your mp4 video into different formats using application like HandBrake. Then amke your code :

<video id="headervideo" controls>
    <source src="<?php echo base_url(); ?>assets/home.mp4" type="video/mp4">
    <source src="<?php echo base_url(); ?>assets/home.webm" type="video/webm">
    <source src="<?php echo base_url(); ?>assets/home.ogv" type="video/ogg">
    Your browser does not support the video tag.
</video>

and also change your .htacess file to support videos

AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a 
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm  

Answer 2

Here's a simple solution that worked for me. My problem was playing MP4 video files on Chrome (I think 29 - brand new install late summer 2013). I found this solution after wading through a bunch of similar threads around the WWW and trying a bunch of stuff with extensions, etc. This is what worked:

Type chrome:flags into the chrome address bar on that page search for "hardware"

Enable "hardware-accelerated video decode." Then restart it

This will allow you to play the mp4 on chrome - and cast to chromecast if you're trying to do that.