你可以在iPad上自动播放HTML5视频吗？-Java 学习之路

120

<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 . 在我的桌面游戏中，它通过 0 ， 1 ，最后是 4 . 在iPad上，如果我手动点击"play"箭头，它只会达到 4 .

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

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

6 回答

7
iOS 10 update

从iOS 10开始禁止自动播放 - 但有一些限制（例如，如果没有音轨，A可以自动播放） .

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

iOS 9 and before

从iOS 6.1开始， it is no longer possible to auto-play videos on the iPad.

我猜他们为什么禁用了自动播放功能？

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

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

“Apple决定通过脚本和属性实现禁用iOS设备上的视频自动播放 . 在Safari中，在iOS上（适用于所有设备，包括iPad），用户可能在蜂窝网络上，并且每个数据单元收费，预加载和自动播放都被禁用 . 在用户启动之前不会加载任何数据 . “ - Apple文档 .

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

警告：为了防止用户通过蜂窝网络主动下载，嵌入式媒体无法在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()">
```
回复于 2024-05-02T07:30:21+08:00
154
我想首先说，我意识到这个问题已经过时，并且已经有了一个公认的答案;但是，作为一个不幸的互联网用户，使用这个问题作为一种手段，结束后不久就被证明是错误的（但不是在我惹恼我的客户之前），我想补充一下我的想法和建议 .

虽然@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的人来说，遗憾的是，这仍然不能解决您的问题，即基于时间的音频播放 .

我希望有人能找到这些信息有用的，它可以节省我一个星期的坏消息传递给客户，坚持他们有这个功能，我很高兴找到一种方法，最终交付它 .

EDIT

进一步的发现表明上述解决方法仅适用于iPhone / iPod设备 . iPad在完全放映之前在Safari中播放视频，因此您需要一些机制来在播放前点击视频大小，否则您将最终获得音频而不是视频 .
回复于 2024-05-02T07:30:21+08:00
12

刚设置

webView.mediaPlaybackRequiresUserAction = NO;

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

回复于 2024-05-02T07:30:21+08:00
11
从iOS 10开始，视频现在 can 自动播放，但只有它们被静音或没有音轨 . 好极了！

简而言之：
- <video autoplay> 元素现在将遵循autoplay属性，对于满足以下条件的元素：
  如果源媒体不包含音轨，则允许
- <video> 元素在没有用户手势的情况下自动播放 .
- <video muted> 元素也将被允许在没有用户手势的情况下自动播放 .
- 如果 <video> 元素获得音轨或在没有用户手势的情况下变为非静音，则播放将暂停 .
- <video autoplay> 元素仅在屏幕上可见时开始播放，例如当它们滚动到视口中，通过CSS可见并插入DOM时 .
  如果
- <video autoplay> 元素变为不可见，则会暂停，例如滚出视口 .
更多信息：https://webkit.org/blog/6784/new-video-policies-for-ios/
回复于 2024-05-02T07:30:21+08:00
16

在这个Safari HTML5 reference中，你可以阅读

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

回复于 2024-05-02T07:30:21+08:00

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

回复于 2024-05-02T07:30:21+08:00

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

6 回答

相关问题