你能在iPad上自动播放HTML5video吗?

<video>标签autoplay="autoplay"属性在Safari中正常工作。

在iPad上进行testing时,video必须手动激活。

我认为这是一个加载问题,所以我跑了一个循环检查媒体的状态:

 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 。 在我的桌面Safari浏览器,它通过0和最后4 。 在iPad上,如果我手动点击“播放”箭头,它只会达到4

而且,通过onClick调用$("#periscopevideo").get(0).play()也能起作用。

苹果在自动播放方面是否有任何限制? (我正在运行iOS 5 +)。

iOS 10更新

自动播放的禁止已经从iOS 10中解除 – 但有一些限制(例如,如果没有音轨,则可以自动播放A)。

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

iOS 9和之前

从iOS 6.1开始, 不能再在iPad上自动播放video。

我的假设为什么他们已经禁用了自动播放function?

那么,由于许多设备所有者在设备上都有数据使用/带宽限制,我认为苹果觉得用户自己应该决定何时启动带宽使用。


经过一番研究,我在苹果文档中发现了以下关于在iOS设备上自动播放的提取以确认我的假设:

“苹果已经决定禁用iOS设备上的video自动播放,通过脚本和属性实现。

在Safari中,在iOS(包括iPad在内的所有设备)上,用户可能位于蜂窝networking中并按数据单元收费,则预加载和自动播放function将被禁用。 直到用户启动它才会加载数据。 “ – 苹果文件。

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

警告 :为防止蜂窝networking主动下载,费用由用户承担,embedded式媒体无法在iOS上的Safari中自动播放 – 用户始终会启动播放。 启动播放后,控制器会自动在iPhone或iPod touch上提供,但对于iPad,您必须设置控件属性或使用JavaScript提供控制器。


这意味着(就代码而言), 除非用户操作(例如,单击事件)触发play()load()方法, 否则在用户启动播放之前,Javascript的play()load()方法是不活动的。

基本上,用户启动的播放button的作品,但onLoad="play()"事件不。

例如,这将播放电影:

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

而以下在iOS上什么也不做:

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

我想先说我意识到这个问题已经老了,已经有了一个可以接受的答案, 但是,作为一个不幸的互联网用户,使用这个问题作为一种手段,不久后才被certificate是错误的(但不是之前,我不喜欢我的客户),我想补充一下我的想法和build议。

虽然@ DSG和@Giona是正确的,他们的答案没有错,但是有一个创造性的机制可以用来“绕过”,可以这么说,这个限制。 这并不是说我纵容这个function的规避,恰恰相反,但只是一些机制,使用户仍然“感觉”,好像一个video或audio文件是“自动播放”。

快速的解决方法是在移动页面的某个地方隐藏一个video标签,因为我build立了一个响应式网站,我只对小屏幕做这个。 video标签(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" }); 

隐藏在页面上,当用户“点击”观看电影(仍然是用户交互,没有办法绕过这个要求),而不是导航到辅助观看页面我加载隐藏的video。 这主要是因为媒体标签没有被真正使用,而是被提升为一个Quicktime实例,所以根本不需要具有可见的video元素。 在“点击”(或“手机上的”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(); }); 

还有中提琴 就用户体验而言,用户点击一个video即可播放,而Quicktime则会播放他们select的video。 这仍然在video只能通过用户操作进行播放的限制之内,所以我不会强制任何人决定使用此服务观看video的数据。 当我试图弄清楚Youtube是如何将他们的手机取而代之的时候,我发现了这一点,这本质上是一些非常好的Javascript页面构build和隐藏在video标签中的花哨元素。

tl; dr在iOS设备上尝试创build“自动播放”UXfunction的方法有些“解决方法”,而不会超出Apple的限制,并且仍然让用户决定是否要观看video(或audio,没有经过testing)自己没有一个刚装载没有他们的许可。

另外,对于那些评论是来自sleep.fm的人来说,这仍然不能解决你的问题,这是基于时间的audio播放。

我希望有人发现这个信息有用,它会为我节省一个星期的坏消息传递给一个客户,他坚持认为他们有这个function,我很高兴find一个方法来提供它。

编辑

进一步发现表明上述解决方法仅适用于iPhone / iPod设备。 iPad在Safari浏览器中播放video之前,需要一些机制在播放前调整video的大小,否则最终会出现audio和video。

刚刚设置

webView.mediaPlaybackRequiresUserAction = NO;

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

从iOS 10开始,video现在可以自动播放,但只有它们是静音的,或者没有音轨。 好极了!

简而言之:

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

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

在这个Safari的HTML5参考 ,你可以阅读

为了防止用户花费在移动networking上的未经请求的下载,embedded式媒体无法在iOS上的Safari中自动播放 – 用户始终会启动播放。 启动播放后,控制器会自动在iPhone或iPod touch上提供,但对于iPad,您必须设置控件属性或使用JavaScript提供控制器。

先让video静音,以确保在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>