首页 文章

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

提问于
浏览 次
61

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

16 回答

  • 1

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

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

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

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

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

    回复于
  • 1

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

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

    只有在包含 playsinline 时才有效 .

    回复于
  • 40

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

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

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

    回复于
  • 4

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

    This worked in all browsers except 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 和_2513169之间更改了mime类型，没有任何效果 . 我还测试了添加 control 属性，再次没有效果 .

    This worked in all browsers tested including Safari 7 on Mavericks and Safari 8 on Yosemite. I simply renamed the same m4v file (the actual file, not just the HTML) to mp4 and reuploaded to our 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测试过） .

    回复于
  • -1

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

    回复于
  • 11

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

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

    回复于
  • 15

    只需添加 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>元素将继续以内联方式播放 .

    回复于
  • 0

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

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

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

    回复于
  • 1

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

    "Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

    In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it. “

    您可以在this Apple documentation阅读更多内容

    回复于
  • 5

    对于.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说它只是自己使用控件 .

    Reference : “要使用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

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

    所以 if ( like me ) you are experiencing a .quicktime ( or anything other than .mp4 ) problem in safari ，这是Apple提供的解决方法 . 请注意，我一点也不高兴，只是提供更多信息 .

    Reference : “回归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

    Update: For .quicktime 重命名为 .mov 之前上传到服务器（在base64文件类型"data:video/mov;"中），跳过ac_quicktime.js . . . 然后将在html视频标签中工作; Hackerdy Hack .

    回复于
  • 13

    By using this code video will play in all browser in safari as well with ios devices... Go for it everyone (I have used this and working fine)

    `

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

    `

    回复于
  • 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 deosnt支持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>
    回复于
  • 4

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

    回复于
  • 22

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

    回复于
  • 0

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

    在ubuntu上：

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

    Safari和桌面开始播放视频

    回复于

相关问题