Question

<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();
    }
}

状态仍然在iPad上0。在我的桌面版Safari中，它会经历0，1，最后是4。在iPad上，如果我手动点击“播放”箭头，它只会到达4。

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

Apple对自动播放有任何限制吗？（顺便说一句，我正在运行iOS 5+。）

Answer 1

iOS 10更新

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

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

iOS 9及之前

从iOS 6.1开始，无法再在iPad上自动播放视频。

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

好吧，由于许多设备所有者的设备都有数据使用/带宽限制，我认为Apple认为用户自己应该决定何时启动带宽使用。

经过一番研究后，我在Apple文档中发现以下关于在iOS设备上自动播放的摘录，以确认我的假设：

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

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

以下是Safari HTML5 Reference page上有关于为什么嵌入式媒体无法在iOS上的Safari中播放的单独警告：

警告：防止通过蜂窝网络进行未经请求的下载用户的费用，嵌入式媒体无法自动播放 iOS上的Safari - 用户始终启动播放。控制器是播放后自动在iPhone或iPod touch上提供已启动，但对于iPad，您必须设置控件属性或使用JavaScript提供控制器。

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

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

例如，这将播放电影：

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

以下内容在iOS上无效：

<body onload="document.myMovie.play()">

Answer 2

首先我要说的是，我知道这个问题已经过时，并且已经有了一个公认的答案;但是，作为一个不幸的互联网用户，使用这个问题作为一种手段，结束后不久就被证明是错误的（但不是在我让我的客户稍微烦恼之前）我想添加我的想法和建议。

虽然@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"
});

隐藏在页面上，当用户“点击”观看电影（仍然是用户互动，无法绕过该要求）而不是导航到辅助观看页面时，我会加载隐藏的视频。这主要起作用，因为媒体标签并未真正使用，而是提升为Quicktime实例，因此根本不需要具有可见视频元素。在“click”（或移动设备中的“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();
});

中提琴。对于用户体验，用户点击要播放的视频，Quicktime打开播放他们选择的视频。这仍然是视频只能通过用户操作播放的限制，因此我不会强制任何未决定使用此服务观看视频的人的数据。我试图弄清楚Youtube是如何用他们的移动设备完全解决这个问题时发现的，这实际上是一些非常好的Javascript页面构建和花哨的元素隐藏，就像视频标签一样。

tl; dr这是一个有点“解决方法”尝试在iOS设备上创建“自动播放”UX功能，但不超出Apple的限制，并且仍然让用户决定是否要观看视频（或音频最喜欢），虽然我没有测试过，但没有一个人在没有得到他们许可的情况下加载。

此外，对于评论来自sleep.fm的人来说，遗憾的是，这仍然不能解决您的问题，即基于时间的音频播放。

我希望有人发现这些信息很有用，这样可以节省我一个星期的坏消息传递给客户，坚持认为他们有这个功能，我很高兴找到一种方法来提供它。

修改

进一步的发现表明上述解决方法仅适用于iPhone / iPod设备。 iPad在完全放映之前在Safari中播放视频，因此您需要一些机制来在播放前点击视频大小，否则您将最终获得音频和视频。

Answer 3

只需设置

webView.mediaPlaybackRequiresUserAction = NO;

自动播放适用于iOS。

Answer 4

从iOS 10开始，现在的视频可以自动播放，但只有它们被静音或没有音轨。耶！

简而言之：

<video autoplay>元素现在将遵循autoplay属性符合以下条件的元素：
- <video>元素的源媒体不包含音轨，则可以在没有用户手势的情况下自动播放。
- <video muted>元素也可以在没有用户手势的情况下自动播放。
- 如果<video>元素获得音轨或在没有用户手势的情况下变为静音，则播放将暂停。
- <video autoplay>元素只有在屏幕上可见时才开始播放，例如当它们滚动到视口中时，通过CSS可见，并插入DOM。
- <video autoplay>元素变得不可见，则会暂停，例如滚出视口。

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

Answer 5

在此Safari HTML5 reference中，您可以阅读

防止用户通过蜂窝网络进行未经请求的下载费用，嵌入式媒体无法在Safari上自动播放 iOS-用户始终启动播放。控制器是自动的一旦在启动时播放，在iPhone或iPod touch上提供，但是 iPad你必须设置控件属性或提供使用JavaScript的控制器。

Answer 6

首先让视频静音以确保在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>

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

6 个答案: