Question

我在这个网站上有一个介绍视频：http://staging.optiekcardoen.be/。顶部的视频在大多数浏览器上自动播放，这是我想要的行为。在Safari iOS上，此视频的海报图片上方只有一个播放按钮。当我点击它时，没有任何反应...... :(

当我将来自w3schools（https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video）的bigbugbunny视频与绝对路径集成时，它运行得很好！当我下载相同的兔子视频时，将其上传到我的服务器并在我的视频标签中建立相对链接，它也不起作用。

首先，我用更好的z-index移动了视频。问题依然存在。然后，我检查了我的托管服务提供商将php版本更改为更新的版本然后我的xampp php版本。然后我问我的介绍视频的制作人是否想要最小化视频，但这并没有修复任何内容。

我有可能害怕的可能性。请问有其他可能的答案吗？

Answer 1

我认为这是HTTP vs HTTPS同源安全问题。

如果您在Safari中访问该站点并查看控制台，您将看到：

阻止原始“https://www.youtube.com”的框架访问原点为“http://staging.optiekcardoen.be”的框架。请求访问的帧具有“https”协议，被访问的帧具有“http”协议。协议必须匹配。

在此处查看更多信息：https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy

<强>更新：

正如Sam在评论中提到的那样，虽然上述问题应该得到解决，但即使绕过了这个问题，主视频也不会播放，而不是来自YouTube。主页面视频也有错误的mime类型 - 见下文：

<source src="/files/intro-320x176-laag.mp4" type="video/webm">

更新2

我做了一个快速测试，并且至少在Safari上验证了如果将Mime类型设置为webm，则无法播放mp4视频。

如果您将mime类型设置为mp4我怀疑您的视频将正常播放 - 即将上面一行的结尾更改为：

<source src="/files/intro-320x176-laag.mp4" type="video/mp4">

Answer 2

<video autoplay="" muted="" loop="" poster="/files/intro.jpg">        
    <p>Uw browser video tag.</p>
</video>

你试过这个吗？

Html5视频标签：iOS不支持mp4视频

2 个答案: