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

Posted 2023-02-23

【中文标题】Html5 视频标签：iOS 不支持 mp4 视频

【英文标题】：Html5 video tag: mp4 video not supported on iOS

【发布时间】：2017-03-08 12:30:11

【问题描述】：

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

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

首先，我将视频向上移动了一个更大的 z-index。问题一直存在。然后，我与我的托管服务提供商核实，将 php 版本更改为更新的版本，然后是我的 xampp php 版本。然后我问我介绍视频的制作人是否想最小化视频，但这并没有解决任何问题。

我没有任何可能，我很害怕。请问有人有其他可能的答案吗？

【问题讨论】：

您是否检查过视频的编码（编解码器、音频等）是否正常？

我要求视频制作者确保使用以下设置保存视频：“如果是 H.264 视频，则应满足：最高 1080p，每秒 30 帧，High Profile level 4.1 与AAC-LC 音频高达 160 Kbps、48kHz、.m4v、.mp4 和 .mov 文件格式的立体声音频；"。该视频没有音轨，因此在这种情况下这并不重要。这些设置是编码设置，还是其他？

【参考方案1】：

我认为这是一个 HTTP 与 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">

【讨论】：

奇怪的是介绍视频不是 YouTube 视频。当您导航到“Beestige referenties”时，您会看到 6 个 Youtube 视频。当您单击 Safari iOS 中的播放按钮时，这些视频可以正确播放。所以其实我应该把网站改成staging.optiekcardoen.beinsteds of staging.optiekcardoen.be?

是的，你是对的。您可以在 Safari 开发者工具中打开同源检查，但您的视频仍然无法播放。它确实可以在 Chrome 中播放。一个可能的问题是您在视频结尾处使用了错误的 mime 类型 - 您使用的是 webm 而不是 mp4。可能 Safari 对此比 chrome 更敏感。您可以更改此设置并重试吗？

谢谢米克！我要求我的主机将 http 环境更改为 https。我很好奇;)

大脸！事实上，mp4 行中的 mime 类型是从 webm 视频中懒惰地复制的。所以更新 2 成功了，米克！非常感谢您的帮助！！！ （PS：我现在也把域名改成https了，这样更好；））

【参考方案2】：

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

你试过吗？

【讨论】：

嗨，Kaki，我更改了视频属性。还是没有起色。奇怪！