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

Question

我正在尝试创建一个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视频

Answer 1

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

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

Answer 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>

Answer 3

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

有关字节范围请求的详细信息请参阅mobiforge.com,附录A:Apple iPhone流媒体:

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

您可能想在网上搜索"iphone mp4 byte-range".

Answer 4

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

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

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

Answer 5

花了几天时间解决同样的问题（检查“playsinline”和“自动播放”和“静音”正常后，服务器中的“mime-types”和“范围”正常等）。适用于所有浏览器的解决方案是：

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

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

Answer 6

对于未来的搜索,以及,我不得不说我使用与手刹缩小的MP4文件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>

我改变的MIME类型video/mp4和video/m4v使用没有影响.我还测试了添加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测试过).

Answer 7

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

Answer 8

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

Answer 9

只需添加一个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> 如果元素的源媒体不包含音轨，或者它们的静音属性设置为true，则允许它们在没有用户手势的情况下播放（）。
• 如果某个<video>元素获得音轨或在没有用户手势的情况下变为静音，则播放将暂停。
• <video> 当元素在屏幕上不可见或不在视口中时，将允许play（）播放。
• video.play（）将返回一个Promise，如果不满足这些条件中的任何一个，则Promise将被拒绝。

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

Answer 10

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

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

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