125

<video>tagsautoplay="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 上的状态保持不变。在我的桌面 safari 上,它通过01最后4. 在 iPad 上,只有4当我手动点击“播放”箭头时才能到达。

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

苹果对自动播放有任何限制吗?(顺便说一下,我正在运行 iOS 5+)。

4

6 回答 6

158

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),用户可能在蜂窝网络上并按数据单位收费,预加载和自动播放被禁用。在用户启动数据之前不会加载数据。" -苹果文档。

以下是Safari HTML5 参考页面上的一个单独警告,说明为什么无法在 iOS 上的 Safari 中播放嵌入式媒体:

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


这意味着(就代码而言)Javascriptplay()load()方法在用户开始播放之前是不活动的,除非orplay()方法load()由用户操作(例如点击事件)触发。

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

例如,这将播放电影:

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

而以下在 iOS 上不会执行任何操作:

<body onload="document.myMovie.play()">
于 2012-09-19T13:50:28.590 回答
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"
});

在页面上隐藏的情况下,当用户“点击”观看电影(仍然是用户交互,无法绕过该要求)而不是导航到辅助观看页面时,我会加载隐藏的视频。这主要是因为媒体标签并未真正使用,而是提升为 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 中播放视频,因此您需要一些机制来在播放前调整视频的点击大小,否则您最终会得到音频而没有视频。

于 2013-11-12T06:01:49.483 回答
12

刚设置

webView.mediaPlaybackRequiresUserAction = NO;

自动播放适用于我在 iOS 上。

于 2013-11-15T03:27:31.530 回答
12

从 iOS 10 开始,视频现在可以自动播放,但前提是它们要么静音,要么没有音轨。耶!

简而言之:

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

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

于 2016-09-29T18:54:59.633 回答
7

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

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

于 2012-09-19T13:51:07.740 回答
3

首先让视频静音以确保在 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>
于 2017-06-29T13:45:34.617 回答