safari won't play a gif converted to mp4 or m4

2019-07-09 04:21发布

问题:

I converted a gif composed of three images to mp4 and also to m4v (for Safari) to play in the html5 video player, however, Safari won't play either the .mp4 nor the .m4v with the following

<video preload="yes" controls="true" >
<source src="./menu.mp4" type="video/mp4" />
<source src="./menu.m4v" type="video/m4v" />
</video>

However, if I use a proper video (i.e. not a converted gif) Safari (9.2) will play it using the above syntax, so I know the html5 video player is working in my browser, just not my converted gif. Question, for a gif that's converted to a "movie of still" photos, do I have to set a different type i.e. type="gif/m4v" or is there another setting I have to activate?

I used ffmpeg to convert the gif to an mp4 but don't recall the exact command that I ran to do it.

Update According to this TechCrunch article, Twitter uses mp4s instead of gifs so I'm assuming it should work on all browsers.

the mp4 file can be viewed here

https://www.dropbox.com/s/mvkzo8xe7is4rle/menu.mp4?dl=0

回答1:

The problem is the video encoding, specifically the H.264 Profile setting, used with video codec.

Your current video is encoded as : High 4:4:4 Predictive @ Level 2.2 which seems unusual for a browser video (and possibly won't decode on some mobile devices).

Solution :

In your encoder, choose an H.264 Profile of either Baseline or Main.

This working video uses Main @ L3.1

Using FFmpeg you can produce a new video under Main profile (which is suitable for your dimensions width 480 X height 640).

ffmpeg -i input.mp4 -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an output.mp4


Useful Notes :

  • You can check here some Apple recommended profiles (see Point.11). It is expected the video is using 4:2:0 sampling, not the problematic 4:4:4 in the not-working video.

  • Wowza.com explains Profiles and Levels for mobile devices.

  • A Baseline Profile would guarantee playback on even older devices (eg: iPhone 3 or older).