HTML5 Video | Video Unsupported / Invalid File Type | IE

Question

Good Evening StackOverflowers! I seem to have a problem with getting the HTML5 video tag to work in IE, or Safari (Firefox seems to load, but it wants to download the entire file before playing). It works in Chrome without issue.

In IE, I get the error: "Error: Unsupported video type or invalid file path".

I have done research, and it seems many find a solution by adding MIME types to their .htaccess file. I have done this to no avail. The next problem was that I needed to put the .mp4 first in the video listing, done - but no solution.

My .htaccess file looks like this: (WordPress Install)

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wpress/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wpress/index.php [L]
</IfModule>

# END WordPress

#Audio HTML5 Mime Types
AddType audio/aac .aac
AddType audio/mp4 .mp4 .m4a
AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg
AddType audio/ogg .oga .ogg
AddType audio/wav .wav
AddType audio/webm .webm

#Video HTML5 Mime Types
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm 

Additionally, this is what my video code looks like: (Yes, I know it's wordy...)

<video width="100%" height="100%" controls="controls">
  <source src="http://www.frozentears.org/wpress/wp-vlog/vlogVid/Rus/[RUS]Rossiyskaya.Imperia/[RUS]Rossiyskaya.Imperia.E01.Petr.I.PI.mp4" type='video/mp4' />
  <source src="http://www.frozentears.org/wpress/wp-vlog/vlogVid/Rus/[RUS]Rossiyskaya.Imperia/[RUS]Rossiyskaya.Imperia.E01.Petr.I.PI.webm" type='video/webm' />
  Video tag not supported. Download the video <a href="http://www.frozentears.org/wpress/wp-vlog/vlogVid/Rus/[RUS]Rossiyskaya.Imperia/[RUS]Rossiyskaya.Imperia.E01.Petr.I.PI.mp4">here</a>.
</video>

The whole page that is giving me issues can be seen here: http://bit.ly/1g2quqe I have checked the stack and found these threads here, here and here, followed their advice, but for some reason it still has yet to work for me.

Furthermore, some suggested that I put the file path in the address bar, if the file plays then the error is in the code. When I put the .mp4 file in the address bar, I was just prompted to download the file, the browser didn't play the file.

Any advice would be greatly appreciated. Best regards, Laura

Answer 1

I could not get to play your files on any browser correctly. Chrome only played the audio after 30 sec download but no video. In Firefox when I tried to put the URL of the mp4 in the browser I got an error saying the file is corrupted. I think it could be a file format issue. If it the case it is probably some bad data or metadata in the file:

• You can download the file at http://vjs.zencdn.net/v/oceans.mp4 and host it on your server. If it works fine then your MIME/TYPES config is fine otherwise you need to tune them right (look at adding them to the /etc/mime.types file).
• You can try to use handbrake or MP4Box to repack your file. You need to activate the "web optimized" option (aka fast start) with handbrake.

You can read here for the underlying story.

Let us know if it works