Safari 无法播放 .mp4 视频

Question

这在 Chrome 上运行良好，但在 Safari 上则不然。

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

Answer 1

mp4 视频的编解码器是 H.264。 要播放此视频，我必须将此 mp4 转换为 HEVC。瞧，这解决了！

<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

我添加了几行代码，因为这个背景视频无法在移动设备（iPhone chrome 和 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>

现在我遇到了这个视频无法在 Android（Chrome）上播放的问题.. smh

Answer 3

一个不错且简单的技巧是简单地复制文件并在末尾使用

.m4v

扩展名而不是

.mp4

并使用内容类型

video/x-m4v

而不是

video/mp4

。

示例：

<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>

参见：https://en.wikipedia.org/wiki/M4V

Answer 4

您需要添加“playsinline”属性才能在 safari 中自动播放。

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

请参阅：https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide