我在这个网站上有一个介绍视频:http://staging.optiekcardoen.be/ .顶部的视频在大多数浏览器上自动播放,这就是我想要的行为。在 Safari iOS 上,该视频的海报图片上方只有一个播放按钮。当我点击它时,什么也没有发生...... :(
当我将 w3schools (https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video) 的 bigbugbunny 视频与绝对路径集成时,它工作得很好!当我下载相同的兔子视频时,将其上传到我的服务器并在我的视频标签中创建一个相对链接,它也不起作用。
首先,我将视频向上移动了一个更大的 z-index。问题一直存在。然后,我与我的托管服务提供商核实,将 php 版本更改为更新的版本,然后是我的 xampp php 版本。然后我问我介绍视频的制作人是否想最小化视频,但这并没有解决任何问题。
我没有可能,我很害怕。请问有人有其他可能的答案吗?
最佳答案
我认为这是一个 HTTP 与 HTTPS 的同源安全问题。
如果您在 Safari 中访问该站点并查看控制台,您将看到:
Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "http://staging.optiekcardoen.be". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
在此处查看更多信息: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">
关于ios - html5视频标签: mp4 video not supported on iOS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42671445/