你能在 iPad 上自动播放 HTML5 视频吗?

新手上路,请多包涵

<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 。在我的桌面野生动物园中,它经过 01 最后 4 。在 iPad 上,如果我手动点击“播放”箭头,它只会到达 4

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

Apple 在自动播放方面是否有任何限制? (顺便说一句,我正在运行 iOS 5+)。

原文由 Jem 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 671
2 个回答

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 提供控制器。


What this means (in terms of code) is that Javascript’s play() and load() methods are inactive until the user initiates playback, unless the play() or load() 方法由用户操作触发(例如点击事件)。

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

例如,这将播放电影:

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

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

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

原文由 dsgriffin 发布,翻译遵循 CC BY-SA 3.0 许可协议

首先,我想说我意识到这个问题已经过时并且已经有了公认的答案;但是,作为一个不幸的互联网用户,使用这个问题作为结束的手段只是在不久之后(但不是在我让我的客户感到不安之前)被证明是错误的,我想补充我的想法和建议。

虽然@DSG 和@Giona 是正确的,并且他们的回答没有任何问题,但您可以使用一种创造性的机制来“绕过”,可以这么说,这个限制。这并不是说我容忍绕过这个功能,恰恰相反,只是一些机制让用户仍然“感觉”好像视频或音频文件在“自动播放”。

快速解决方法是在移动页面的某处隐藏一个视频标签,因为我构建了一个响应式网站,所以我只对较小的屏幕执行此操作。视频标签(HTML 和 jQuery 示例):

HTML

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

查询

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

由于隐藏在页面上,当用户“点击”观看电影时(仍然是用户交互,没有办法绕过该要求)而不是导航到辅助观看页面我加载隐藏的视频。这主要是因为媒体标签并没有真正使用,而是被提升为 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();
});

还有中提琴。就用户体验而言,用户点击要播放的视频,Quicktime 打开播放他们选择的视频。这仍然在视频只能通过用户操作播放的限制内,因此我不会强迫任何不决定使用此服务观看视频的人使用数据。我在试图弄清楚 Youtube 究竟是如何用他们的手机实现这一点时发现了这一点,这本质上是一些非常好的 Javascript 页面构建和奇特的元素隐藏,就像视频标签的情况一样。

tl;dr 这是一个有点“解决方法”,尝试在 iOS 设备上创建一个“自动播放”UX 功能,而不会超出苹果的限制,并且仍然让用户决定他们是否想观看视频(或最喜欢的音频,尽管我没有测试过)他们自己没有未经他们的许可就加载了一个。

另外,对于来自 sleep.fm 的评论者,不幸的是,这仍然无法解决您的基于时间的音频播放问题。

我希望有人觉得这些信息有用,它可以让我节省一周的坏消息传递给坚持认为他们有这个功能的客户,我很高兴最终找到了传递它的方法。

编辑

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

原文由 Brandon Buck 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题