Google Chrome doesn't want to play mp4 with mediaelement.js

Question

I use the latest mediaelement.js on my website to play html5 video. There is something strange about Google Chrome. It plays one video, but does not want to play another video in mp4 format and does not fall back to webm. Both videos were converted using ffmpeg with these options:

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 

In addition, the first video is usually played without using the mediaelement.js library in mp4 format, and the second in webm format.

Example 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 (crash)

Answer 1

If you try to execute $("video").get(0).currentSrc or the equivalent in the console, you will see that the non-mediaelement.js version plays video in Webm, which Chrome can play very well, but if you look at that same thing in version mediaelement.js is trying to play MP4.

Then, if you look at $("video").get(0).error , you will see that you have MediaError. Check this out and you will see that it has a "code 4". According to the specification, this is MEDIA_ERR_SRC_NOT_SUPPORTED.

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

Now this is a hunch, but maybe Chrome says “maybe” because it can play some MP4 profiles, but not others. Regardless of the reasons, I personally preferred Mediaelement.js to treat “maybe” as “no,” and continue and run the Flash backup if none of the other types of sources are played back initially. It is simple enough to fix it. I did just that on the fork I just did - check out https://github.com/tremby/mediaelement/tree/maybe-to-no

Hope this helps. Let me know if this works for you - I hope he will give up MP4 and try Webm instead in your case. In my own project (the debugging that led me to this question) I only have the MP4 file, and the Flash backup happily takes its place.

Answer 2

using the Media Source API ...

I understand that this does not apply to the answer above, but I think it is important to note that backing up the website is not required if the MP4 videos are encoded accordingly.

MP4 video can also be encoded to support the Media Source API , which allows you to download pieces that make the video before the entire file completes the download.

The MP4 implementation is more widely used and does not require webm backup in most browsers.

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

FFmpeg will do this and its openource.

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

---

Chris Coulson writes: June 14, 2012 (Windows)

I recently added a video player to a customer site. I found John Dyers MediaElement.js a great solution for this. As long as you provide an encoded version of h.264 and WebM, it will play in almost all browsers. For unsupported browsers, it will revert to Flash.

The clients clients were all wmvs, so they would need to be converted to h.264 and WebM. Fortunately, John also provided some instructions for encoding into these formats using FFmpeg:

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

Unfortunately, FFmpeg has changed since the publication of the commands, so it took some minor changes. I also made some changes, so the aspect ratio of the video was also saved for encoding video with a lower bit rate and higher speed. In addition, some of the converted videos were very short and would have been completed up to the 10 second mark at which the sketch is being created. To solve this problem, I modified the script to try to capture the sketch at 1, 2, 3, 5, and 10 seconds, each successful capture overwrites the last.

Here is 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.mp4 REM 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.webm REM 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 separate batch file that will iterate over all wmvs in the given directory and run the encoder package for each file:

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

---

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

Hi -

For those who use unix-based ffmpeg-heres, corresponding to the author codes (above) in the 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/null ffmpeg -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/null ffmpeg -y -i $fileid -ss 1 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null ffmpeg -y -i $fileid -ss 2 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null ffmpeg -y -i $fileid -ss 3 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null ffmpeg -y -i $fileid -ss 5 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null ffmpeg -y -i $fileid -ss 10 -vframes 1 -r 1 -vf "scale=trunc(oh*a/2)*2:480" -f image2 "$file.jpg" < /dev/null 

---

Hope this helps.

Answer 3

Here is a simple solution that worked for me. My problem was playing MP4 video files in Chrome 29. I found this solution after going through many similar streams around the WWW and tried a bunch of things with extensions, etc. This is what worked:

Type chrome: flags in the Chrome address bar on this page find "hardware"

Enable hardware accelerated decoding. Then restart it

This will allow you to play mp4 on chrome - and drop it on chromecast if you are trying to do it.