在 iPhone 上显示图像而不是视频？答案

【问题标题】：Show Image Instead of Video on iPhone?在 iPhone 上显示图像而不是视频？
【发布时间】：2021-04-19 13:38:55
【问题描述】：

我正在使用视频效果（如this）而不是图像来制作这个网站。我添加了这样的代码：

<video muted autoplay playsinline src="path_to_video.mp4"></video>

但是，iOS 不支持 autoplay 属性，这会使视频停留在第一帧。我想在不支持autoplay 的 iPhone 和浏览器上显示替代图像而不是视频。

有没有办法做到这一点？（可以使用 JavaScript）

【问题讨论】：

标签： javascript html html5-video

【解决方案1】：

如果您检查的是系统而不是屏幕比例，那么您可以使用 navigator 属性。

并调整你的代码是这样的

<video id="video-img" muted autoplay playsinline src="path-to-video"></video>

在你的 js 脚本中

$(document).ready(function() {
  if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('#video-img').replaceWith('<img src="path-to-img" >');
  }
});

这是codepen 上的一个工作示例

要检查代码是否正常工作，只需通过在以下(!navigator.userAgent.match(/(iPod|iPhone|iPad)/))

中添加感叹号 ! 将 if 条件更改为相反的条件

【讨论】：

【解决方案2】：

“自动播放”有另一种选择。

$("document").ready(() => {
  $("#vid").play()
})

&lt;video muted autoplay playsinline src="path_to_video.mp4" id="vid"&gt;&lt;/video&gt;

这应该会在文档加载时自动运行视频。这应该适用于所有高于 9.0 的浏览器和 IE 版本。

【讨论】：

在 Safari 浏览器上，play() 函数只能通过用户手势（通过onclick 或使用事件监听器）起作用。给定的示例将不起作用。另外，我的意思是在滚动到元素时播放视频，这正是 autoplay 所做的。