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

Question

I'm using the latest mediaelement.js on my website to play html5 video. There is something strange in Google Chrome. He plays one video, but doesn't want to play the other video in mp4 format and doesn't fallback to webm. Both videos were converted with ffmpeg with this params:

ffmpeg -i input.mov -acodec libfaac -ab 96k -vcodec libx264 -vpre slower -vpre main -level 21 -refs 2 -b 345k -bt 345k -threads 0 -s 640x360 output.mp4

Besides, the first video plays normally without using mediaelement.js library in mp4 format and the second one turns into webm format.

Sample pages from http://random.net.ua/video_test/:

• http://random.net.ua/video_test/video1.html (ok)
• http://random.net.ua/video_test/video2.html (ok)
• http://random.net.ua/video_test/video1-mediaelement.html (ok)
• http://random.net.ua/video_test/video2-mediaelement.html (fail)

Answer 1

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.