您可以在iPad上自动播放HTML5视频吗？

123

该<video>标签autoplay="autoplay"属性的作品在Safari罚款。

在iPad上进行测试时，必须手动激活视频。

我认为这是一个加载问题，因此我循环检查了媒体的状态：

videoPlay: function(){
    var me = this;
    console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
    if ($("#periscopevideo").get(0).readyState != 4){
      setTimeout(function(){me.videoPlay();}, 300);
    }
    else {
      $("#periscopevideo").get(0).play();
    }
}

该状态仍在0iPad上。在我的桌面野生动物园中，它会通过0，1最后4。在iPad上，只有4在我手动点击“播放”箭头时才能到达。

此外，$("#periscopevideo").get(0).play()通过点击呼叫onClick也可以。

苹果在自动播放方面是否有任何限制？（顺便说一下，我正在运行iOS 5+）。

jquery  ios  objective-c  html  cocoa-touch 
— 杰姆
source
— apsillers
也许我们应该看看浏览器检测，你是否应该调用的playVideo（）：stackoverflow.com/questions/26895492/...
— Redtopia
— 贝尔巴托夫
关于此主题的有用博客文章：webkit.org/blog/6784/new-video-policies-for-ios
— Matthias M，
ios中的Opera mini默认情况下支持自动播放，而chrome，firefox和safari不支持，也没有提供打开选项。
— 匿名

Answers:

156

iOS 10更新

自iOS 10起，自动播放的禁令已取消-但存在一些限制（例如，如果没有音轨，则可以自动播放A）。

要查看这些限制的完整列表，请参阅官方文档：https : //webkit.org/blog/6784/new-video-policies-for-ios/

iOS 9及更低版本

从iOS 6.1开始，不再可以在iPad上自动播放视频。

我对他们为什么禁用自动播放功能的假设？

好吧，由于许多设备所有者在其设备上都有数据使用/带宽限制，所以我认为苹果公司认为用户自己应该决定何时启动带宽使用。

经过一番研究，我在Apple文档中找到了以下有关iOS设备上自动播放的摘录，以确认我的假设：

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

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

以下是Safari HTML5参考页上的另一条警告，内容是有关为何无法在iOS上的Safari中播放嵌入式媒体的警告：

警告：为防止用户自费地通过蜂窝网络进行下载，嵌入式媒体不能在iOS的Safari中自动播放-用户始终启动播放。启动播放后，iPhone或iPod touch上会自动提供一个控制器，但对于iPad，您必须设置controls属性或使用JavaScript提供一个控制器。

这意味着（就代码而言）是除非用户操作（例如，单击事件）触发或方法，否则在用户启动播放之前，JavaScript play()和load()方法是不活动的。play()load()

基本上，用户启动的播放按钮有效，但onLoad="play()"事件无效。

例如，这将播放电影： 

<input type="button" value="Play" onclick="document.myMovie.play()">

而以下内容在iOS上什么也不做： 

<body onload="document.myMovie.play()">
— 格里芬
source
1
嗯，花了3个月的时间为iPhone Safari创建在线闹钟！我们（sleep.fm）想出了一种方法，可以在应用打开时保持手机清醒，但现在使用iOS 6.1时，警报音频将无法播放。在iOS 6.0中工作正常。有没有解决的办法？
— chaser7016
1
哦，等等，我们重新启动并运行了iPhone Safari的移动网络闹钟（sleep.fm），因此由于缺乏html5自动播放支持，因此存在一些解决方法。
— chaser7016
1
@ Jonah1289根据您在Sleep.fm上的博客文章，布莱恩·卡瓦里尔（Brian Cavalier）鸣叫了一个github链接，带有以下标题，使用webkitaudiocontext而不是音频标签在ipad或iphone上自动播放音频也许是一个不错的起点。
— 弗朗西斯科，
1
请提供更多详细信息-对于缺少自动播放支持的具体解决方法是什么？
— Umopepisdn 2014年
11
他们应该做的是在wifi上允许自动播放，并且可以手动播放或提示用户视频要在移动网络上自动播放。
— Ric
16

首先，我要说的是，我意识到这个问题已经老了，已经有了可以接受的答案。但是，作为一个不幸的互联网用户，使用此问题作为一种手段，只是在证明之后不久（但不是在我让客户感到有点不适之前）才被证明是错误的，我想补充一下我的想法和建议。

尽管@DSG和@Giona是正确的，并且它们的答案没有错，但是可以使用一种创造性的机制来“绕开”，可以说是这种限制。并不是说我在宽容此功能，相反，它只是一些机制，使用户仍然“感觉”到好像视频或音频文件正在“自动播放”。

快速的解决方法是将视频标签隐藏在移动页面上的某个位置，因为我建立了响应式网站，所以我只在较小的屏幕上这样做。视频标记（HTML和jQuery示例）：

的HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery的

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

在页面上隐藏该内容后，当用户“单击”以观看电影时（仍然是用户交互，无法绕开该要求），而不是导航到辅助观看页面，而是加载隐藏的视频。这主要是因为没有真正使用media标签，而是将其升级为Quicktime实例，因此根本不需要可见的视频元素。在处理程序中进行“点击”（或移动设备上的“ touchend”）。

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

还有中提琴 就UX而言，用户单击视频即可播放，而Quicktime将打开播放他们选择的视频。这仍然处于视频只能通过用户操作播放的限制之内，因此我不会强迫任何不打算使用此服务观看视频的人提供数据。我在尝试弄清YouTube如何通过其移动设备成功实现这一点时发现了这一点，这本质上是一些非常不错的Javascript页面构建和精美元素的隐藏，例如在视频标签的情况下。

tl; dr这是一种“解决方法”，可以尝试在iOS设备上创建“自动播放” UX功能，而不会超出Apple的限制，并且仍然让用户决定是否要观看视频（或最喜欢的音频，尽管我自己进行了测试，而没有未经他们的允许才进行加载。

另外，对于那些评论来自sleep.fm的人，不幸的是，这仍然不能解决您的问题，因为这是基于时间的音频播放。

我希望有人发现此信息有用，这将使我节省了一周的不可靠消息传递给一位坚称他们具有此功能的客户，而我很高兴找到一种最终传递它的方法。

编辑

进一步的发现表明上述解决方法仅适用于iPhone / iPod设备。iPad在全屏显示之前会在Safari中播放视频，因此您需要某种机制来在播放前单击时调整视频大小，否则最终将获得音频而没有视频。

— 布兰登·巴克
source
2
最好使用$dummyVideo.get(0)括号代替，因此，如果您的选择为空，则jQuery可能会失败。
— Micros 2014年
12

刚设定

webView.mediaPlaybackRequiresUserAction = NO;

自动播放功能适用于iOS。

— 二里
source
29
这不适用于网站，仅适用于使用本机应用程序将其包装的网站。
— 布兰登·巴克
5
我的意思是，从网页上（正如问题所问），这是完全无法访问的-是的，浏览器中的Javascript无法做到这一点。仅当您从您可以控制的应用程序在WebView内运行站点时，此方法才有效，因此实际上并不能为问题提供解决方案。
— 布兰登·巴克
6
@izuriel是公平的，他确实用“ objective-c”和“ cocoa-touch”标记了这个问题，所以假设他使用的是
— Webview并不是一件容易的事
3
通常添加@Kloar标记是为了获得更多关注或对其尝试解决的问题的一般性误解。提出这个问题的人可能以为提到Objective-C与说“ iOS”是一样的（可可触摸也是如此）。尽管未列出“ uiwebview”标签，所以我将其排除为可行的选择。该问题提到了在台式机和iPad上使用Safari（与应用无关），并使用Javascript演示代码来调试情况。总而言之，我想说这个问题实际上是在寻找Web而非本机解决方案，这是比较安全的选择。
— Brandon Buck 2014年
— cottonBallPaws
11

从iOS 10开始，视频现在可以自动播放，但是只有其中一个被静音或没有音轨。好极了！

简而言之：

  • <video autoplay> 对于满足以下条件的元素，元素现在将使用自动播放属性：
    • <video> 如果元素的源媒体不包含音轨，则无需用户手势即可自动播放。
    • <video muted> 元素也将被允许在没有用户手势的情况下自动播放。
    • 如果某个<video>元素获得音轨或在没有用户手势的情况下变为静音，则播放将暂停。
    • <video autoplay> 元素仅在屏幕上可见时才开始播放，例如当它们滚动到视口中，通过CSS可见并插入DOM时。
    • <video autoplay> 如果元素变为不可见，则元素将暂停，例如通过滚动到视口之外。

此处提供更多信息：https : //webkit.org/blog/6784/new-video-policies-for-ios/

— 杰克·卡利什
source
4
autoplay属性仅适用于PC，不适用于移动设备。我已经尝试了很多次。
— huykon225
7

在此Safari HTML5参考中，您可以阅读

为了防止用户自费地通过蜂窝网络进行下载，嵌入式媒体不能在iOS的Safari中自动播放-用户始终启动播放。启动播放后，iPhone或iPod touch上会自动提供一个控制器，但对于iPad，您必须设置controls属性或使用JavaScript提供一个控制器。

— 乔纳
source
38
“除了可能是多个MB的GIF文件，甚至没有人意识到就使用带宽”
— Simon_Weaver
@Simon_Weaver是大多数情况下的12倍。
— Burak Tokak'2
2

首先让视频静音，以确保在ios中自动播放，然后根据需要取消静音。

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>
— 穆罕默德·阿里·阿克巴里（Mohammad Ali Akbari）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.