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

我正在尝试创建一个html5网页，其中有一个类似于13s的小视频，我将该视频的Flash版本转换为3种格式：使用fireFogg的.ogv，还使用firefogg的.webm以及使用HandBrake应用程序的html脚本的.mp4我在我的页面中使用过：

<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）上遇到了同样的问题，我关闭了低功耗模式，并且它起作用了，您还应该playsinline在视频代码中添加如下属性：

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

仅在包含时有效playsinline。

将来的搜索者可以使用的另一种解决方案：（如果您的问题不是模仿类型问题。）

出于某些原因，除非我设置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中使用。

请在mobiforge.com上阅读有关字节范围请求的更多信息，请参阅附录A：Apple iPhone的流：

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

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

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

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

如果这是您的问题，则可能必须对视频访问进行重新处理以使用临时令牌或从原始请求进行的限时访问。如果找到更直接的解决方案，我将更新此答案。

对于未来的搜索，以及，我有一个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）。

只需添加一个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>没有播放内联的元素将继续内联播放。

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

我已经看到了一个不可信任的“开发” SSL证书的怪异问题，其中移动Safari会很乐意为您的页面提供服务，但是即使您已接受该视频，也不会向“伪造”的SSL证书提供视频。

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

如果您不介意视频被静音，则在Iphone和Ipa上为我添加“ playsinline”功能即可。

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

如果您不希望视频被静音，但仍然希望自动播放，则可以尝试使用js删除静音属性： 如何使用静音的道具取消对html5视频的静音

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

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

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

您可以在此Apple文档中阅读更多相关内容。

对于.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”在上述文章中提到不作任何SENCE我作为苹果公司称对自己刚刚使用的控制。

参考： “要使用HTML5音频或视频，请先创建一个或元素，指定媒体的源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以外的任何其他问题），这是Apple提供的解决方法。请注意，我尚未亲自对其进行测试，仅凭提供更多信息，我对它一眼也不满意。

参考： “退回QuickTime插件有一种简单的方法可以回退到适用于几乎所有浏览器的QuickTime插件-从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 video标签中工作；哈克迪哈克。

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

`

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

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

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

这也有助于解决某些视频在某些浏览器上呈现不正确的情况时黑框/边框变黑的问题。

我有一个问题，在Safari中无法播放.mp4，但是在其他浏览器中也可以。我在控制台中看到的错误是：不支持error media 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不再支持webm，但仍为最新的safari版本，它将选择webm，但视频自动播放失败。

因此，要在支持的浏览器上自动播放，我建议您先检查浏览器，然后基于此生成html。

因此，对于野生动物园，请在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>

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

正在运行，但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>

我也遇到过同样的问题。因为我的视频帧太大。ie.2248 px苹果支持H.264 Baseline Profile Level 3.0视频，在30 fps下最大为640 x 480。请注意，基准配置文件不支持B帧。 检查此以获取更多信息

就我而言，帮助删除音频轨道的原因。之前它是沉默的，但必须彻底消失。

在ubuntu上：

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

Safari /台式机开始播放视频

对于我的用例，有两件事：

1. 我没有使用新属性/ webkit的策略 playsinline；
2. 我的视频/ mime类型或whathathell编码不正确，因此我使用此网站将其转换为所需的所有格式：https : //pt.converterpoint.com/

o /

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

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

除了将视频压缩到30mb以下之外，对我没有任何帮助。这样就可以了，但压缩效果很差。

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