Google Chrome does not want to play mp4 using mediaelement.js

If you try doing $("video").get(0).currentSrc or equivalent in a console you'll see that the non-mediaelement.js version is playing the Webm video, which Chrome can play just fine, but if you look at the same thing in the mediaelement.js version it's trying to play the MP4.

Then, if you have a look at $("video").get(0).error you'll see you have a MediaError. Inspect that and you see it has "code 4". According to the spec, that is MEDIA_ERR_SRC_NOT_SUPPORTED.

Now, try $("video").get(0).canPlayType("video/mp4") -- it returns "maybe".

This is guesswork now, but perhaps Chrome reports "maybe" because it can play some profiles of MP4 but not others. No matter the reasons, I'd personally prefer Mediaelement.js to treat "maybe" as "no" and go ahead and fire up the Flash fallback if none of the other source types are playable natively. It's easy enough to patch it to do so. I've done exactly that on a fork I just made -- have a look at https://github.com/tremby/mediaelement/tree/maybe-to-no

Hope that helps. Let me know if it works for you -- I'm hoping it'll give up on the MP4 and try the Webm instead in your case. In my own project (debugging which brought me to this question) I have only an MP4 file, and the Flash fallback is happily taking its place.

using the Media Source API...

I realise this doesn't relate to the fallback answered above, but I think that its important to point out that fallback to webm isn't required if the MP4 videos are encoded appropriately.

MP4 video can also be encoded to support the the Media Source API which allows downloading of chunks that make the video available before the entire file has completed downloading.

The MP4 implementation is more widely used and wouldn't require a webm fallback in most browsers.

A chart showing the video format support for the Media Source API here.

FFmpeg will do this, and its opensource.

See here: (Encode h.264 and WebM videos for MediaElement.js using FFmpeg) below:

Chris Coulson writes: June 14th,2012 (Windows)

I recently added a video player to a client’s site. I found John Dyer’s MediaElement.js to be an excellent solution for doing this. As long as you provide both an h.264 and WebM encoded version of the video, it will play natively on almost all browsers. For unsupported browsers it will fall back to Flash.

The client’s videos were all wmv’s, so they would need to be converted to h.264 and WebM. Luckily John also provided some directions for encoding to these formats using FFmpeg:

http://johndyer.name/ffmpeg-settings-for-html5-codecs-h264mp4-theoraogg-vp8webm/

Unfortunately FFmpeg has changed since the commands were published, so some slight modifications were required. I also made some modifications so that the aspect ratio of the video was preserved and to encode the video at a lower bit rate and faster speed. As well, some of the videos being converted were really short, and would be finished before the 10 second mark that the thumbnail is created at. To solve this problem I modified the script to attempt to capture the thumbnail at the 1, 2, 3, 5 and 10 second mark with each successful capture overwriting the last.

Here’s the updated batch file that I used:

REM mp4 (H.264 / AAC)"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -vcodec libx264 -pix_fmt yuv420p -vprofile high -preset fast -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=trunc(oh*a/2)*2:480 -threads 0 -acodec libvo_aacenc -b:a 128k %1.mp4REM webm (VP8 / Vorbis)"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -vcodec libvpx -quality good -cpu-used 5 -b:v 500k -maxrate 500k -bufsize 1000k -vf scale=trunc(oh*a/2)*2:480 -threads 0 -acodec libvorbis -f webm %1.webmREM jpeg (screenshot at 10 seconds, but just in case of a short video - take a screenshot earlier and overwrite)"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 1 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 2 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 3 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 5 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg"c:\program files\ffmpeg\bin\ffmpeg.exe" -y -i %1 -ss 10 -vframes 1 -r 1 -vf scale=trunc(oh*a/2)*2:480 -f image2 %1.jpg

I also created a seperate batch file that will iterate over all wmv’s in a given directory and run the encoder batch against each file:

for /r %1 %%i in (*.wmv) do "c:\program files\ffmpeg\CreateWebVideos.bat" %

Faron Coder says: September 3, 2014 at 6:52 pm (*nix)

Hello –

For those who use unix based ffmpeg – here’s the corresponding to author’s codes (above) in name of unix.

ffmpeg -y -i $fileid -vcodec libx264 -pix_fmt yuv420p -vprofile high -preset fast -b:v 500k -maxrate 500k -bufsize 1000k -vf “scale=trunc(oh*a/2)*2:480″ -threads 0 -acodec libvo_aacenc -b:a 128k “$file.mp4″ < /dev/nullffmpeg -y -i $fileid -vcodec libvpx -quality good -cpu-used 5 -b:v 500k -maxrate 500k -bufsize 1000k -vf "scale=trunc(oh*a/2)*2:480" -threads 0 -acodec libvorbis -f webm "$file.webm" < /dev/nullffmpeg -y -i $fileid -ss 1 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/nullffmpeg -y -i $fileid -ss 2 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/nullffmpeg -y -i $fileid -ss 3 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/nullffmpeg -y -i $fileid -ss 5 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/nullffmpeg -y -i $fileid -ss 10 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null 

Hope that helps.

Here's a simple solution that worked for me. My problem was playing MP4 video files on Chrome 29. 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 baron 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.