HTML5 视频标签在 Safari、iPhone 和 iPad 中不起作用

我在 iPhone 和 iPad 等苹果设备上遇到了同样的问题，我关闭了低功耗模式并且它工作正常，您还应该在视频标签中包含 playsinline 属性，如下所示：

<video class="video-background" autoplay loop muted playsinline>

它仅在包含 playsinline 时才有效。

---

为您未来的搜索者提供的另一种可能的解决方案：（如果您的问题不是 mimetype 问题。）

出于某种原因，除非我设置了 controls="true" 标志，否则视频将无法在 iPad 上播放。

示例：这在 iPhone 上适用于我，但不适用于 iPad。

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

这现在适用于 iPad 和 iPhone：

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

---

您的 Web 服务器可能不支持 HTTP 字节范围请求。我正在使用的 Web 服务器就是这种情况，结果是加载了视频小部件并出现了播放按钮，但单击该按钮没有任何效果。 — 该视频适用于 FF 和 Chrome，但不适用于 iPhone 或 iPad。

阅读附录 A：Apple iPhone 流媒体中有关字节范围请求的更多here on mobiforge.com：

首先，Safari Web 浏览器请求内容，如果是音频或视频文件，它会打开媒体播放器。然后媒体播放器请求内容的前 2 个字节，以确保 Web 服务器支持字节范围请求。然后，如果它支持它们，iPhone 的媒体播放器会按字节范围请求其余内容并播放。

您可能想在网上搜索“iphone mp4 byte-range”。

---

如果您的视频受到基于会话的登录系统的保护，Safari 将无法加载它们。这是因为 Safari 对视频发出了初始请求，然后将任务交给 QuickTime，QuickTime 又发出另一个请求。由于 Safari 拥有会话信息，它会通过身份验证，但 QuickTime 不会。

如果您查看服务器访问日志，您可以看到这一点……首先是来自 Safari 的请求，然后是来自 QuickTime 的请求。其他浏览器只是从浏览器本身发出一个请求。

如果这是您的问题，您可能必须修改视频访问权限以使用临时令牌或原始请求的限时访问权限。如果我找到更直接的解决方案，我会更新这个答案。

---

对于将来的搜索，我还有一个 mp4 文件，我使用 apt-get 中的 handbrake-gtk 使用 Handbrake 缩小了该文件，例如 sudo apt-get install handbrake-gtk。在 Ubuntu 14.04 中，handbrake 存储库不包括开箱即用的 MP4 支持。我保留了默认设置，去掉了音轨，它生成了一个 *.M4V 文件。对于那些想知道的人，它们是同一个容器，但 M4V 主要在 iOS 上用于在 iTunes 中打开。

这适用于除 Safari 之外的所有浏览器：

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

我在 video/mp4 和 video/m4v 之间更改了 mime 类型，但没有任何效果。我还测试了添加 control 属性，同样没有效果。

这适用于所有经过测试的浏览器，包括 Mavericks 上的 Safari 7 和 Yosemite 上的 Safari 8。我只是将相同的 m4v 文件（实际文件，而不仅仅是 HTML）重命名为 mp4 并重新上传到我们的 CDN：

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

我认为 Safari 完全期待一个实际命名的 MP4。没有其他文件和 mime 类型的组合对我有用。我认为其他浏览器首先选择 WEBM 文件，尤其是 Chrome，尽管我很确定源列表应该选择技术支持的第一个源。

但是，这并没有解决 iOS 设备中的视频问题（iPad 3“新 iPad”和 iPhone 6 测试）。

---

只需添加一个 muted 属性，一切都会正常工作。

此答案的来源在这里：https://webkit.org/blog/6784/new-video-policies-for-ios/

默认情况下，WebKit 将具有以下策略：

---

在同一个问题上工作了几天（并且在检查“playsinline”和“autoplay”和“静音”ok，服务器中的“mime-types”和“range”等之后）。所有浏览器的解决方案是：

<video controls autoplay loop muted playsinline>
    <source src="https://example.com/my_video.mov" type="video/mp4">
</video>

是的：将视频转换为 .MOV 并在同一标签中键入 =“video/mp4”。在职的！

---

通过使用此代码，视频将在 safari 中的所有浏览器以及 ios 设备上播放......每个人都去吧（我已经使用了这个并且工作正常）

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mov" type="video/mov"></source>
</video>

---

我发现虽然 Safari 确实支持 HTML5 视频，但必须安装 Quicktime Player 才能使其正常工作。在我建立的一个使用 HTML5 视频的网站上，用户在使用 Safari 时会收到警报，告诉他们必须安装 Quicktime，否则他们将只能看到视频脚本。希望这可以帮助。

---

我已经看到了一个不可信的“开发”SSL 证书的奇怪问题，移动 Safari 很乐意为您的页面提供服务，但即使您接受了证书，也拒绝将视频提供给“假”SSL 证书。

要进行测试，您可以将视频部署到其他地方 - 或切换到 http（整个页面），它应该可以播放。

---

如果您不介意将视频静音，则在 Iphone 和 Ipa 上添加“playsinline”对我有用。

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

如果您不希望您的视频被静音，但仍想自动播放，可以尝试使用 js 删除静音属性：How to unmute html5 video with a muted prop

---

我遇到了类似的问题，即 <video> 标记内的视频只能在 Chrome 和 Firefox 上播放，而不能在 Safari 上播放。这是我为修复它所做的...

我发现一个奇怪的技巧是对您的视频有两个不同的引用，一个在 Chrome 和 Firefox 的 <video> 标记中，另一个在 Safari 的 <img> 标记中。有趣的是，视频确实在 Safari 上的 <img> 标签中播放。在此之后，编写一个简单的脚本以在使用某个浏览器时隐藏其中一个或另一个。例如：

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

这也有助于解决某些浏览器上某些视频呈现错误的细黑框/边框问题。

---

从 iOS 6.1 开始，不再可以在 iPad 上自动播放视频。根据 Apple 文档，自动播放功能不适用于包括 iPad 在内的所有 ios 设备的 Safari：

“Apple 已决定通过脚本和属性实现禁用 iOS 设备上的视频自动播放。

在 Safari 中，在 iOS 上（适用于所有设备，包括 iPad），用户可能在蜂窝网络上并按数据单位收费，预加载和自动播放被禁用。在用户启动数据之前，不会加载任何数据。”

您可以在 this Apple documentation 中阅读有关它的更多信息

---

对于 .mp4 这有效（野生动物园移动和桌面）：

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

上述帖子中提到的 controls=”true” 对我来说毫无意义，因为 Apple 说只使用自己的控件。

参考：“要使用 HTML5 音频或视频，首先要创建一个  or  元素，指定媒体的源 URL，并包含 controls 属性。 <video src="http://example.com/path/mymovie.mp4" controls></video>”

来源：https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

在我的交易中（一个小题外话）：我发现从 iPhone 上传视频会以 .quicktime 的形式发送到服务器。具有讽刺意味的是，这是在 safari 上尝试从服务器播放视频时出现的问题。 （移动和桌面）。

因此，如果（像我一样）您在 safari 中遇到 .quicktime（或 .mp4 以外的任何内容）问题，这是苹果提供的解决方法。请注意，我还没有自己测试它，我对它一目了然并不满意，只是提供更多信息。

参考： “回退到 QuickTime 插件 有一种简单的方法可以回退到适用于几乎所有浏览器的 QuickTime 插件 - 下载 Apple 提供的预构建 JavaScript 文件，  ac_quicktime.js，来自 HTML 视频示例 并通过将以下代码行插入到您的 HTML 头部将其包含在您的网页中：<script src="ac_quicktime.js" type="text/javascript"></script>”

来源：https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

更新：对于 .quicktime 重命名为 .mov 之前上传到服务器（在 base64 文件类型“data:video/mov;”中），跳过 ac_quicktime.js 。 . .然后将在 html 视频标签中工作；哈克迪哈克。

---

我有同样的问题 - 确保视频资产的 url 来自安全域。我们的开发环境是 http，而生产环境是安全的。由于视频是通过相对路径引用的，因此无法进行开发。似乎是苹果要求视频安全的问题......

---

如果您在 REACT 中使用 playsInline 这适用于所有 IOS 设备

---

添加这 4 个参数自动播放循环静音播放内联，例如：

<video autoplay loop muted playsinline
    style="width:100%;height:auto;max-width:100%;">

在视频标签中使其在 iOS 设备中自动播放。

---

我有这个问题，在 Safari 中播放 .mp4 不起作用，但在其他浏览器中它很好。我在控制台中看到的错误是：不支持错误媒体 src。在我的情况下，这原来是一个 MIME 类型问题，但不是因为它没有在 IIS 中声明为 MIME 类型，而是它被声明了两次（一次在 IIS 中，也在 web.config 文件中）。我通过尝试在服务器上本地下载 .mp4 文件发现了这一点。我从我试图播放的内容的位置删除了配置文件，它解决了这个问题。我本可以从 web.config 文件中删除 MIME 类型，但在这种情况下不需要 web.config 文件。

---

对于 IOS，请仅使用 mp4 源文件。我在最新的 safari 浏览器中观察到一个问题，即 safari 浏览器无法正确检测源文件，因此，视频自动播放不起作用。

让我们检查下面的例子 -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

因为我在源文件中使用过 mp4、webm。 Safari deosnt 支持 webm，但仍然是最新的 safari 版本，它会选择 webm 并且视频自动播放失败。

因此，要跨受支持的浏览器进行自动播放，我建议先检查浏览器，并在此基础上生成您的 html。

所以对于 safari，使用下面的 html。

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

除了野生动物园，

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

---

正在工作，但 MacOs 最近为用户：https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ 设置了自动播放策略，我使用按钮启用声音解决了同样的问题：

ejm:

启用声音