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

时间：2013-12-03 09:30:38

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

我正在尝试创建一个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上都不能正常工作，输出只是一个空白页面，显示视频标签的控件但没有加载

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

27 个答案:

答案 0 :(得分：40)

未来搜索者的另一种可能解决方案： （如果您的问题不是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 :(得分：23)

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

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

  

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

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

答案 2 :(得分：22)

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

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

仅当包含playsinline时有效。

答案 3 :(得分：14)

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

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

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

答案 4 :(得分：11)

对于将来的搜索，我有一个mp4文件，我使用来自handbrake-gtk的{​​{1}}使用Handbrake进行缩减，例如apt-get。在Ubuntu 14.04中，sudo apt-get install handbrake-gtk存储库不包含对开箱即用的MP4的支持。我离开了默认设置，剥离了音轨，并生成了一个* .M4V文件。对于那些想知道，他们是相同的容器，但M4V主要用于iOS在iTunes中打开。

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

handbrake

我在<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之间更改了mime类型，但没有效果。我还测试了添加video/m4v属性，再次没有效果。

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

control

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

然而，这并没有修复iOS设备中的视频问题（iPad 3＆＃34;新iPad＆＃34;以及iPhone 6测试过）。

答案 5 :(得分：5)

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

答案 6 :(得分：4)

解决同样的问题几天（在检查“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”。工作！

答案 7 :(得分：4)

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

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

答案 8 :(得分：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（）方法：

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

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

答案 9 :(得分：3)

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

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

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

答案 10 :(得分：1)

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

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

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

您可以在this Apple documentation

中阅读更多内容

答案 11 :(得分：1)

通过使用此代码，视频将可以在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 :(得分：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>
     </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>

答案 13 :(得分：1)

正在工作，但是MacO最近对用户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>

答案 14 :(得分：1)

对于.mp4这适用（safari mobile＆amp; desktop）：

<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，并包含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视频示例下载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视频标签中工作; Hackerdy Hack。

答案 15 :(得分：0)

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

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

答案 16 :(得分：0)

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

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

答案 17 :(得分：0)

我遇到过同样的问题。因为我的视频帧尺寸太大了。 ie.2248 px 苹果支持 H.264 Baseline Profile Level 3.0视频，最高640 x 480,30 fps。请注意，基准配置文件中不支持B帧。 check this for more info

答案 18 :(得分：0)

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

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

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

答案 19 :(得分：0)

如果您在REACT中使用playsInline，则该功能适用​​于所有IOS设备

答案 20 :(得分：0)

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

答案 21 :(得分：0)

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

答案 22 :(得分：0)

我遇到了完全相同的问题，我的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>

答案 23 :(得分：0)

在我的用例中，有两件事：

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

o /

答案 24 :(得分：0)

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

答案 25 :(得分：0)

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

答案 26 :(得分：-1)

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

关于ubuntu：

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

Safari和桌面开始播放视频

相关问题
最新问题