以编程方式启动的视频在 iPhone 上以空白打开（safari 和 chrome）答案

【问题标题】：Programmatically started video opens in blank on iPhone (safari and chrome)以编程方式启动的视频在 iPhone 上以空白打开（safari 和 chrome）
【发布时间】：2020-09-27 08:12:35
【问题描述】：

我的页面中有一个视频。代码示例：

<video autoplay="" muted="" loop="" class="video-home" poster="/poster-video.png">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

<script type="text/javascript">
  $('video').on('click', function() { $(this)[0].play(); });
</script>

如您所见，当用户点击视频时，视频应该以编程方式开始播放（上下文中间有一个播放按钮），并且当视频以空白打开时，它实际上适用于除 iPhone 之外的所有浏览器和设备.这是为什么？我怎样才能避免这种奇怪的行为？

提前感谢您的帮助。

【问题讨论】：

标签： javascript html iphone

【解决方案1】：

添加playsinline 属性。

<video autoplay="" muted="" loop="" class="video-home" poster="/poster-video.png" playsinline>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

【讨论】：