Safari 不播放.mp4 视频

Question

This works fine on Chrome, but not on Safari.

<video id="video" class="video" preload="metadata" autoplay="" loop="" muted="" >
   <source src="images/video.mp4" type="video/mp4">
</video>

Answer 1

The mp4 video's Codecs is H.264. To play this video, I had to convert this mp4 to HEVC. Voila, this solved it!

<video id="video" class="video" preload="metadata" autoplay="" loop="" muted="" >
            <!-- for safari - HEVC -->
            <source src="images/video.mp4" type="video/mp4"> 
            <!-- for chrome - H264 -->
            <source src="images/video.mp4" type="video/mp4">
</video>

Answer 2

I added a couple of more lines of code because this background video wasn't playing on mobile(iphone chrome and safari)

<video id="video" class="video" preload="metadata" autoplay muted loop playsinline>
        <!-- below is for safari - HEVC format -->
        <source src="images/home-video.mp4" type="video/mp4">
        <!-- for google -  H264 format -->
        <source src="images/hero-video.mp4" type="video/mp4">
        <!-- for mobile -->
        <source src="images/hero-video.webm" type="video/webm">
        <source src="images/hero-video.ogg" type="video/ogg">
</video>

Now I'm having an issue with this video not playing on Android(Chrome).. smh

Answer 3

A nice and simple hack is to simply duplicate the file and make use of the .m4v extension at the end instead of .mp4 and use content type video/x-m4v instead of video/mp4 .

example:

<video preload="metadata" autoplay="" loop="" muted="" >
  <!-- for safari or iOS or anything Apple -->
  <source src="images/video.m4v" type="video/x-m4v">
  <!-- for chrome, firefox, android and remainig friends -->
  <source src="images/video.mp4" type="video/mp4">
</video>

See: https://en.wikipedia.org/wiki/M4V