源未显示在 iPhone 的 safari 浏览器上

Question

我正在使用以下代码在我的网站上显示视频：

<div class="item video-one">
   <video id="f-video" class="slide-video slide-media" autoplay="true" loop="" muted="" preload="metadata">

      <source src="http://myweb.com/name.mp4" type="video/mp4">

   </video>
</div>

该代码在除 iPhone (safari) 以外的所有设备上都能正常工作。我看到这个问题也发生在其他人身上，但我还没有找到解决方案。

您知道是否有修复方法，还是我应该找到其他解决方案来解决我的问题？（也许隐藏视频）

谢谢

Answer 1

您可以在此处找到 iOS 使用的 WebKit 推荐设置，以及关于 iOS 的注释：https://webkit.org/blog/6784/new-video-policies-for-ios/

使用他们的示例，下面将在 iPhone 上播放（在 iPhone 7 运行 iOS 13.3.1

上测试

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Simple iOS Video Test</title>
</head>

<body>
  <h1>Video Test</h1>
  <video autoplay loop muted playsinline>
      <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>
</body>

</html>

修改上面的内容以使用你的 HTML5 并且与上面相同的视图也有效 - 在相同的测试设备上测试：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple iOS Video Test</title>
</head>

<div class="item video-one">
   <video id="f-video" class="slide-video slide-media" autoplay="true" loop="" muted="" preload="metadata">

      <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">

   </video>
</div>

</html>

所以你的 HTML 正在工作。您可能会发现问题出在您的视频格式上 - 这是视频无法从一台设备播放到另一台设备的常见原因。

Answer 2

通过在视频标签内添加 playsinline 解决了这个问题。

<video id="f-video" class="slide-video slide-media" autoplay="true" loop muted playsinline preload="metadata">

源未显示在 iPhone 的 safari 浏览器上

source not showing on iPhones safari browser

html

iphone

safari

video

iframe