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

Can you autoplay HTML5 videos on the iPad?

提问by Jem

The <video>tags autoplay="autoplay"attribute works fine in Safari.

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

When testing on an iPad, the video must be activated manually.

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

I thought it was a loading issue, so I ran a loop checking for the status of the media:

我认为这是一个加载问题，所以我运行了一个循环检查媒体的状态：

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

The state remains at 0on the iPad. On my desktop safari, it goes through 0, 1and finally 4. On the iPad, it only reaches 4if I manually tap the "play" arrow.

状态在0iPad 上保持不变。在我的桌面 safari 中，它通过0，1最后4. 在 iPad 上，只有4当我手动点击“播放”箭头时才会到达。

Moreover, calling $("#periscopevideo").get(0).play()from an click via onClickworks too.

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

Is there any restrictions by Apple in regard to autoplay? (I'm running iOS 5+ by the way).

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

回答by dsgriffin

iOS 10 update

iOS 10 更新

The ban on autoplay has been lifted as of iOS 10 - but with some restrictions (e.g. A can be autoplayed if there is no audio track).

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

To see a full list of these restrictions, see the official docs: https://webkit.org/blog/6784/new-video-policies-for-ios/

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

iOS 9 and before

iOS 9 及之前

As of iOS 6.1, it is no longer possible to auto-play videos on the iPad.

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

My assumption as to why they've disabled the auto-play feature?

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

Well, as many device owners have data usage/bandwidth limits on their devices, I think Apple felt that the user themselves should decide when they initiate bandwidth usage.

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

---

---

After a bit of research I found the following extract in the Apple documentation in regard to auto-play on iOS devices to confirm my assumption:

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

"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it." - Apple documentation.

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

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

Here is a separate warning featured on the Safari HTML5 Reference pageabout why embedded media cannot be played in Safari on iOS:

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

Warning: To prevent unsolicited downloads over cellular networks at the user's expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback. A controller is automatically supplied on iPhone or iPod touch once playback in initiated, but for iPad you must either set the controls attribute or provide a controller using JavaScript.

警告：为了防止用户自行承担费用通过蜂窝网络进行未经请求的下载，无法在 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, unlessthe play()or load()method is triggered by user action (e.g. a click event).

这意味着什么（在代码方面）是JavaScript的play()和load()，方法是无效的，直到用户开始播放，除非该play()或load()方法由用户操作（如单击事件）触发。

Basically, a user-initiated play button works, but an onLoad="play()"event does not.

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

For example, this would play the movie:

例如，这将播放电影：

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

Whereas the following would do nothing on iOS:

而以下在 iOS 上什么都不做：

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

回答by Brandon Buck

I want to start by saying by saying that I realize this question is old and already has an accepted answer; but, as an unfortunate internet user that used this question as a means to end only to be proven wrong shortly after (but not before I upset my client a little) I want to add my thoughts and suggestions.

我想首先说我意识到这个问题很旧并且已经有一个公认的答案；但是，作为一个不幸的互联网用户，他使用这个问题作为结束的手段，但不久之后（但不是在我让我的客户感到不安之前）被证明是错误的，我想添加我的想法和建议。

While @DSG and @Giona are correct, and there is nothing wrong with their answers, there is a creative mechanism you can employ to "get around," so to speak, this limitation. That is not say that I'm condoning circumvention of this feature, quite the contrary, but just some mechanisms so that a user still "feels" as if a video or audio file is "auto playing."

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

The quick work around is hide a video tag somewhere on the mobile page, since I built a responsive site I only do this for smaller screens. The video tag (HTML and jQuery examples):

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

HTML

HTML

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

jQuery

jQuery

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

With that hidden on the page, when a user "clicks" to watch a movie (still user interaction, there is no way to get around that requirement) instead of navigating to a secondary watch page I load the hidden video. This mainly works because the media tag isn't really used but instead promoted to a Quicktime instance so having a visible video element isn't necessary at all. In the handler for "click" (or "touchend" on mobile).

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

And viola. As far as UX goes, a user clicks on a video to play and Quicktime opens playing the video they chose. This remains within the limitation that videos can only be played via user action so I'm not forcing data on anyone who isn't deciding to watch a video with this service. I discovered this when trying to figure out how exactly Youtube pulled this off with their mobile which is essentially some really nice Javascript page building and fancy element hiding like in the case of the video tag.

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

tl;dr Here is a somewhat "workaround" to try and create an "autoplay" UX feature on iOS devices without going above and beyond Apple's limitations and still having users decide if they want to watch a video (or audio most likey, though I've not tested) themselves without having one just loaded without their permission.

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

Also, to the person who commented that is from sleep.fm, this still unfortunately would not have been a solution to your issues which is time based audio play back.

此外，对于从 sleep.fm 发表评论的人来说，不幸的是，这仍然无法解决您的基于时间的音频播放问题。

I hope someone finds this information useful, it would have saved me a week of bad news delivery to a client that was adamant that they have this feature and I was glad to find a way to deliver it in the end.

我希望有人发现这些信息有用，它可以让我节省一周的坏消息传递给坚持认为他们具有此功能的客户，我很高兴最终找到一种方法来传递它。

EDIT

编辑

Further finding indicate the above workaround is for iPhone/iPod devices only. The iPad plays video in Safari before it's been full screened so you'll need some mechanism to resize the video on click before playing or else you'll end up with audio and no video.

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

回答by Er Li

Just set

刚设置

webView.mediaPlaybackRequiresUserAction = NO;

webView.mediaPlaybackRequiresUserAction = NO;

The autoplay works for me on iOS.

自动播放在 iOS 上对我有用。

回答by HymanKalish

As of iOS 10, videos now canautoplay, but only of they are either muted, or have no audio track. Yay!

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

In short:

简而言之：

• <video autoplay>elements will now honor the autoplay attribute, for elements which meet the following conditions:
  • <video>elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
  • <video muted>elements will also be allowed to autoplay without a user gesture.
  • If a <video>element gains an audio track or becomes un-muted without a user gesture, playback will pause.
  • <video autoplay>elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
  • <video autoplay>elements will pause if they become non-visible, such as by being scrolled out of the viewport.

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

More info here: https://webkit.org/blog/6784/new-video-policies-for-ios/

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

回答by Giona

In this Safari HTML5 reference, you can read

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

To prevent unsolicited downloads over cellular networks at the user's expense, embedded media cannot be played automatically in Safari on iOS—the user always initiates playback. A controller is automatically supplied on iPhone or iPod touch once playback in initiated, but for iPad you must either set the controls attribute or provide a controller using JavaScript.

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

回答by Mohammad Ali Akbari

Let video muted first to ensure autoplay in ios, then unmute it if you want.

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