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

【问题标题】：HTML5 Video tag not working in Safari , iPhone and iPadHTML5 视频标签在 Safari、iPhone 和 iPad 中不起作用
【发布时间】：2013-12-19 06:51:43
【问题描述】：

我正在尝试创建一个 html5 网页，其中有一个像 13s 这样的小视频，我将此视频的 flash 版本转换为 3 种格式：使用 fireFogg 的 .ogv ，也使用 firefogg 的 .webm 和使用 HandBrake 应用程序的 .mp4我在页面中使用的 html 脚本：

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

视频在 Chrome 和 FireFox 中运行良好，但在桌面上的 Safari 和 iPhone 或 iPad 上都无法运行，输出只是一个空白页面，显示视频标签的控件，但没有加载任何内容

请注意，我的 Safari 版本支持 HTML5 视频

【问题讨论】：

显然这是一个 MimeType 问题检查此link 了解更多信息我找到了here 祝你有美好的一天:)
请注意，ios 上的视频永远不会出现autoplay: developer.apple.com/library/safari/documentation/AudioVideo/… ..
你试过视频标签中的playsinline属性了吗？
我的问题是由于父元素中的动画帧，解决方案是在动画之后添加视频标签并在动画之前删除视频标签。

标签： iphone ipad safari html5-video mobile-safari

【解决方案1】：

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

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

仅在包含playsinline 时才有效。

【讨论】：

我们不想显示视频控件，即使它可以在我们的 iphone 上运行，但添加“playsinline”效果很好，并且可以在 iphone 以及所有其他设备上运行而没有显示控制。完美答案！
使用 React 的人请注意：您需要使用 playsInline，在 camelCase 中。
这其实是最好的答案。
这 100% 有效。我注意到问题不仅仅是浏览器本身，而不是一般的 iPhone，因为我的视频也没有在 iPhone 上的其他浏览器中播放
很遗憾，但对我来说，playinline 不起作用。

【解决方案2】：

为您未来的搜索者提供的另一种可能的解决方案：（如果您的问题不是 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>

【讨论】：

这也是我的问题...在将控件属性添加到视频标签之前没有任何效果。
这对我来说非常有效。对于未来的读者，我使用上面@niknak 发布的视频标签嵌入了一个 mp4。谢谢！
对我来说，添加 autoplay 选项有效。我的代码中有controls="false"。
@Hozefa controls="false" 是多余的； controls 本身是一个布尔值，存在时打开控件，不存在时没有控件。见 W3C spec
另外，由于controls 是一个布尔属性，唯一的有效值是无、空字符串或它自己的名称。真假值不正确。

【解决方案3】：

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

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

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

您可能想在网上搜索“iphone mp4 字节范围”。

【讨论】：

这是另一个不错的resource for configuring your server to support byte range requests。
这是我的问题。我将 Flask 与 'send_file' 和 'send_from_directory' 调用一起使用。我必须在这些调用中添加 'conditional=True' 参数。
这个答案适用于我并且在我的 Play Framework 实现中工作 (2.7) 使用 RangeResult.ofPath(finalPath, range, Some(mime)) 并且应该在 2.7 及更高版本中工作。
P.S.：忘记添加如何获取范围。就是这个电话。它以 "Range" ` val range = request.headers.get("Range")` 的形式出现
干杯，这对我来说也失败了（使用 Python 的内置 http 服务器不起作用——Mobile Safari 拒绝播放视频，因为 Web 服务器不支持字节范围请求）。 npmjs.com/package/http-server 可用于此目的——它确实支持字节范围！

【解决方案4】：

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

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

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

【讨论】：

我有同样的问题（我是一名网络开发人员，但在 iphone 中遇到了这个问题），你有什么解决方案吗？如果然后请在此处发布
对不起，我不记得写这篇文章时我在做什么项目。我当前的项目使用包含 tempURL 功能的 CDN（Rackspace 云文件），它避免了基于会话的身份验证问题。

【解决方案5】：

对于将来的搜索，我还有一个 mp4 文件，我使用 Handbrake 使用 handbrake-gtk 从 apt-get 缩小了比例，例如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 测试）。

【讨论】：

【解决方案6】：

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

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

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

<video autoplay> 元素现在将支持自动播放属性，对于满足以下条件的元素：

<video> 元素将被允许在没有用户手势的情况下自动播放，如果它们的源媒体不包含音轨。

<video muted> 元素也将被允许在没有用户手势的情况下自动播放。

如果 <video> 元素获得音轨或在没有用户手势的情况下取消静音，则播放将暂停。

<video autoplay> 元素只有在屏幕上可见时才会开始播放，例如当它们滚动到视口中、通过 CSS 可见并插入 DOM 时。

<video autoplay> 元素会在它们变得不可见时暂停，例如被滚动出视口。

<video> 元素现在将支持 play() 方法，用于满足以下条件的元素：

如果<video> 元素的源媒体不包含音轨，或者如果它们的 muted 属性设置为 true，则将允许在没有用户手势的情况下 play()。

如果 <video> 元素获得音轨或在没有用户手势的情况下取消静音，则播放将暂停。

<video> 元素将被允许在屏幕上不可见或不在视口中时播放（）。

video.play() 将返回一个 Promise，如果不满足其中任何一个条件，它将被拒绝。

在 iPhone 上，<video playsinline> 元素现在可以内联播放，并且在播放开始时不会自动进入全屏模式。 <video> 没有 playinline 属性的元素将继续需要全屏模式才能在 iPhone 上播放。使用捏合手势退出全屏时，<video> 没有 playinline 的元素将继续内联播放。

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

我对这个答案不满意，但我也尝试了所有其他建议，这是让视频在 iOS 上为我工作的唯一方法。我也可以不用controls

【解决方案8】：

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

【讨论】：

这个答案不再是最新的。

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

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

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

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

【讨论】：

【解决方案11】：

通过使用此代码，视频将在 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>

`

【讨论】：

这是唯一对我有用的方法，我试图让背景视频循环播放、自动播放并且没有控件。谢谢阿文达！

【解决方案12】：

我遇到了类似的问题，<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>

这也有助于解决某些浏览器上的某些视频出现的细黑框/边框问题，这些视频在这些浏览器中渲染不正确。

【讨论】：

【解决方案13】：

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

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

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

您可以在this Apple documentation阅读更多相关信息

【讨论】：

这不会试图以任何方式回答问题，并且可能作为评论有用。问题是关于视频根本没有播放，与自动播放功能无关。

【解决方案14】：

对于 .mp4 来说，这可以工作（Safari 移动和桌面）：

<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 音频或视频，首先要创建一个或元素，指定媒体的源 URL，并包括控件属性。 <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 插件 - 从 HTML 视频示例下载 Apple 提供的预构建 JavaScript 文件 ac_quicktime.js 并包含它通过将以下代码行插入到您的 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 视频标签中工作；哈克迪哈克。

【讨论】：

【解决方案15】：

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

【讨论】：

【解决方案16】：

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

【讨论】：

【解决方案17】：

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

【讨论】：

【解决方案18】：

对于 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 不支持 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>

【讨论】：

【解决方案19】：

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

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

【讨论】：

【解决方案20】：

我遇到了完全相同的问题，我的 HTML 视频标签在 Chrome 和 Mozilla 以及 Safari 上运行良好 - 控件出现但视频为空白。我尝试使用上述所有属性，删除/添加静音，playInline 等，但没有任何效果。问题也与此处所述的服务器有关。我有这个 - 没有工作：

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

我刚刚将我的视频移到了外部库，现在我在 Safari 上很好，它运行良好：

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

【讨论】：

【解决方案21】：

除了将视频压缩到 30mb 以下之外，没有什么对我有用。这样就成功了，但压缩效果很差。

【讨论】：

【解决方案22】：

也经历过。视频没有在我的 iphone 上显示...我所做的是将静音和预加载属性添加到视频元素...并且它有效。

 <video width="250" muted preload="metadata">
      <source  src="vid_3.mp4" type="video/mp4" />
 </video>

【讨论】：

【解决方案23】：

添加这4个参数autoplay loop muted playinline，比如：

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

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

【讨论】：

我总是记得“静音”，但我总是忘记“playsinline”。这为我解决了问题。 ?

【解决方案24】：

我也遇到过同样的问题。因为我的视频帧太大了。即2248像素苹果支持 H.264 Baseline Profile Level 3.0 视频，在 30 fps 时高达 640 x 480。请注意，基线配置文件不支持 B 帧。 check this for more info

【讨论】：

【解决方案25】：

对我来说，帮助的是删除音轨。之前是无声的，但它必须完全消失。

在 ubuntu 上：

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

然后 safari/desktop 开始播放视频

【讨论】：

【解决方案26】：

如果有人遇到同样的问题，我通过在我的服务器上启用字节范围支持来解决它。 Safari 似乎需要字节范围请求。在我的情况下，我使用 NGINX，我必须将 proxy_force_ranges on; 添加到我的配置文件中。感谢this answer！

【讨论】：

【解决方案27】：

我知道这是一篇旧帖子，但在不同的服务器环境下问题似乎仍然存在。以上都不是我的解决方案。就我而言，它归结为网络优化和使用 gzip，或者需要为视频禁用它。

我将它添加到我的 htaccess 文件中，它处理了它。 SetEnvIfNoCase Request_URI .(?:ogv|ogg|oga|m4v|mp4|m4a|mov|mp3|wav|webma?|webmv)$ no-gzip dont-vary

我已经在我的标签上使用了这些属性：controls playinline

【讨论】：

【解决方案28】：

在我的 iPhone 10 上，我关闭了低电量模式并在 Chrome 上自动播放。

在video 标签上包含playsinline 属性。

【讨论】：

【解决方案29】：

我的问题是视频编码。我用ffmpeg改了：

ffmpeg \
  -i input.mp4 \
  -vcodec libx264 \
  -acodec aac output.mp4