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

Question

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

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

但是，iOS 不支持 autoplay 属性，这会导致视频卡在第一帧。我想在不支持 autoplay.

的 iPhone 和浏览器上显示替代图像而不是视频

有办法吗？（有 JavaScript 个可能）

Answer 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

上的一个工作示例

要检查代码是否有效，只需将 if 条件更改为相反的，方法是在以下 (!navigator.userAgent.match(/(iPod|iPhone|iPad)/))

中添加感叹号 !

Answer 2

'autoplay'有一个替代方案。

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

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

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

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

Show Image Instead of Video on iPhone?

html

javascript

html5-video