HTML5视频标记在Safari，iPhone和iPad中无法使用

问题描述 投票：67回答：17

我正在尝试创建一个html5网页，其中有一个像13s的小视频，我将此视频的flash版本转换为3格式：.ogv使用fireFogg，.webm使用firefogg也和.mp4使用HandBrake应用程序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视频

iphone ipad safari html5-video mobile-safari
17个回答
42
投票

您未来搜索者的另一种可能的解决方案:(如果您的问题不是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>
1
投票

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

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

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

你可以在qazxsw poi中阅读更多相关信息

1
投票

对于.mp4这适用（Safari移动和桌面）：

this Apple documentation

上面提到的<video height="250" width="250" controls> <source src="video.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> 对我没有任何意义，因为Apple说它只是自己使用控件。

参考：“要使用HTML5音频或视频，首先要创建一个或元素，指定媒体的源URL，并包括controls属性。 controls=”true””

资料来源：<video src="http://example.com/path/mymovie.mp4" controls></video>

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

因此，如果（像我一样）你在safari中遇到.quicktime（或除了.mp4之外的任何问题）的问题，这里有一个由apple提供的解决方法。请注意，我还没有自己测试一下，我一点也不高兴，只是提供更多信息。

参考：“回归到QuickTime插件有一种简单的方法可以回退到适用于几乎所有浏览器的QuickTime插件 - 从HTML视频示例下载Apple提供的预编译JavaScript文件，ac_quicktime.js和通过在HTML头中插入以下代码行将其包含在您的网页中：https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html“

资料来源：<script src="ac_quicktime.js" type="text/javascript"></script>

更新：对于.quicktime在上传到服务器之前重命名为https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6（在base64文件类型“data：video / mov;”中），跳过ac_quicktime.js。 。 。然后将在html视频标签中工作; Hackerdy Hack。

1
投票

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

`

.mov

`

1
投票

对于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>
		<source src="video/video.mov" type="video/mov"></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>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

除了野生动物园，

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

我遇到了同样的问题。因为我的视频帧尺寸太大了。 ie.2248 px apple支持H.264 Baseline Profile Level 3.0视频，最高640 x 480,30 fps。请注意，基准配置文件中不支持B帧。 <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>

0
投票

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

0
投票

在我的案例中有助于放弃音轨。它以前是沉默的，但它必须完全消失。

在ubuntu上：

check this for more info

Safari和桌面开始播放视频

0
投票

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

28
投票

我和iPhone和iPad这样的苹果设备有同样的问题，我关闭了低功耗模式并且它有效，你还应该在视频标签中加入playsinline属性，如下所示：

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

它只适用于包括playsinline。

23
投票

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

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

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

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

14
投票

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

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

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

11
投票

对于将来的搜索，我有一个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测试过）。

5
投票

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

4
投票

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

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

4
投票

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

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

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

<video autoplay>元素现在将遵循autoplay属性，对于满足以下条件的元素：

  • 如果源媒体不包含音轨，则<video>元素将被允许在没有用户手势的情况下自动播放。
  • <video muted>元素也将被允许自动播放而无需用户手势。
  • 如果<video>元素获得音轨或在没有用户手势的情况下变为非静音，则播放将暂停。
  • <video autoplay>元素只有在屏幕上可见时才开始播放，例如当它们滚动到视口中时，通过CSS可见，并插入到DOM中。
  • 如果<video autoplay>元素变得不可见，则会暂停，例如通过滚动视口。

<video>元素现在将遵循play（）方法，对于满足以下条件的元素：

  • 如果源媒体不包含音轨，或者其静音属性设置为true，则允许<video>元素在没有用户手势的情况下播放（）。
  • 如果<video>元素获得音轨或在没有用户手势的情况下变为非静音，则播放将暂停。
  • 当在屏幕上看不到或在视口外时，<video>元素将被允许播放（）。
  • video.play（）将返回一个Promise，如果不满足任何这些条件，它将被拒绝。

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

3
投票

如果您不介意将视频静音，添加'playinline'对Iphone和Ipa有效。

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.