CODEWITHSUNDEEP
htmlgoogle-chromevideosafarimp4
mechee55
mechee55

Reputation: 81

Safari doesn't play .mp4 videos

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>

Upvotes: 3

Views: 6119

Answers (4)

Khalil Gharbaoui
Khalil Gharbaoui

Reputation: 7042

A nice and simple hack is to 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

Upvotes: 1

somuch
somuch

Reputation: 1

You need to add "playsinline" attribute for autoplay in safari.

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

See: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

Upvotes: 0

mechee55
mechee55

Reputation: 81

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

Upvotes: 1

mechee55
mechee55

Reputation: 81

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>

Upvotes: 3

Related Questions