你能在 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。在我的桌面游历中，它经过 0、 1，最后是 4。 在 iPad 上，只有当我手动点击“播放”箭头时，它才能达到 4。

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

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

213865 次浏览
小开
最佳答案

IOS10更新

自动播放的禁令自 iOS10开始解除，但有一些限制(例如:。如果没有音轨，A 可以自动播放)。

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

iOS 9 and before

As of iOS 6.1, 在 iPad 上再也不可能自动播放视频了。

我猜他们为什么关闭了自动播放功能？

嗯，因为许多设备所有者在他们的设备上有数据使用/带宽限制，我认为苹果认为用户应该自己决定什么时候开始使用带宽。

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

“苹果已决定禁用视频自动播放 on iOS devices, through both script and attribute implementations.

在 Safari 中，在 iOS 上(适用于所有设备，包括 iPad) ，用户可能在蜂窝网络上，按照数据单元收费，预装和 自动播放是禁用的。“-< strong >”-< strong > < a href = “ http://developer.Apple.com/library/safari/# document/AudioVideo/eption/using _ HTML5 _ Audio _ Video/Device-规范考虑/Device-规范考虑. html”rel = “ noReferrer”> Apple document。

下面是 < strong > Safari HTML5参考页 上关于为什么嵌入式媒体不能在 iOS 上的 Safari 中播放的另一个警告:

警告 : 为了防止蜂窝网络上的非请求下载，请访问 由于用户的开销，嵌入式媒体不能自动播放在 IOS 上的 Safari ーー用户总是启动回放 自动提供的 iPhone 或 iPod 触摸一次播放 但是对于 iPad，你必须设置控制属性或者 使用 JavaScript 提供控制器。

这意味着(在代码方面) Javascript 的 play()和 load()方法是非活动的，直到用户启动播放，除非的 play()或 load()方法是由用户的行为(例如点击事件)触发。

基本上，一个用户发起的播放按钮工作，但 an onLoad="play()" event does not.

For example, this would play the movie: 

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

而下面这些在 iOS 上什么也做不了:

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

In this Safari HTML5引用, you can read

防止在用户的蜂窝网络上不请自来的下载 费用，嵌入式媒体不能在 Safari 上自动播放 IOS-用户总是启动回放。控制器是自动的 一旦开始播放，就可以在 iPhone 或 iPod touch 上提供，但是 iPad you must either set the controls attribute or provide a 使用 JavaScript 的控制器。

小开

首先我想说的是，我意识到这个问题已经很老了，而且已经有了一个可以接受的答案; 但是，作为一个不幸的互联网用户，用这个问题作为结束的手段，结果很快就被证明是错误的(但不是在我让我的客户有点不高兴之前) ，我想补充我的想法和建议。

虽然@DSG 和@Giona 是正确的，他们的回答没有任何错误，但是可以采用一种创造性的机制来“绕开”，可以这么说，这种限制。这并不是说我宽恕这个功能的规避，恰恰相反，只是一些机制，使用户仍然“感觉”好像视频或音频文件是“自动播放”

最快的解决方法是在手机页面的某个地方隐藏一个视频标签，因为我建立了一个响应站点，我只在小屏幕上做这个。Video 标记(HTML 和 jQuery 示例) :

超文本标示语言

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

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).

$(".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 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.

另外，对于那个来自 sleep. fm 的评论者来说，很不幸，这仍然不能解决你的问题，因为这是基于时间的音频播放。

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

剪辑

进一步的发现表明上述解决方案仅适用于 iPhone/iPod 设备。IPad 在 Safari 中播放视频时还没有全屏，所以在播放之前你需要一些机制来调整视频的大小，否则你最终会得到音频而没有视频。

小开

准备好

webView.mediaPlaybackRequiresUserAction = NO;

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

小开

从 iOS10开始，视频现在是 可以自动播放，但只有在静音或没有音轨的情况下才能播放。耶！

简而言之:

  • <video autoplay>元素现在将支持 autoplay 属性 符合下列条件的要素:
    • 如果 <video>元素的源媒体不包含音轨，则允许在没有用户手势的情况下自动播放。
    • <video muted>元素也将被允许在没有用户手势的情况下自动播放。
    • 如果一个 <video>元素获得一个音频轨道或变得非静音没有用户手势，播放将暂停。
    • <video autoplay>元素只有在屏幕上可见时才会开始播放，例如当它们被滚动到视窗中时 通过 CSS 可见，并插入到 DOM。
    • <video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

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

小开

让视频静音首先确保自动播放在 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>
小开

MacOS 和 iOS 中的 Safari 只能使用 Playsinline属性。

因此，如果您试图播放一个视频内的元素与 id 视频持有人，将必须做如下代码。

var vid = document.querySelector('#videoHolder');//dom with id of video container
var video = vid.querySelector('video');//the video element


video.setAttribute("playsinline",""); //add attribute playsinline
video.mute(); //mute the video
video.play(); //play the video

或者，如果您正在使用 html5视频标记，请使用标记中的属性，例如，参考下面的 html

<video autoplay="autoplay" loop="loop" muted="muted" playsinline="">
<source src="https://yourdomain.com/your_video.mp4" type="video/mp4">
</video>

提交答案