<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
。此外,通过
$("#periscopevideo").get(0).play()
的点击调用onClick
也可以。苹果在自动播放方面是否有任何限制? (顺便说一下,我正在运行iOS 5+)。
#1 楼
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在内的所有设备),用户可以使用蜂窝电话网络并按数据单位收费,预加载和
自动播放被禁用。在用户启动数据之前,不会加载任何数据。” -Apple文档。
这是Safari HTML5参考页上的一个单独警告,内容说明为什么无法在iOS的Safari中播放嵌入式媒体:
警告:为防止通过蜂窝网络进行未经请求的下载(由用户承担费用),无法在iOS的Safari中自动播放嵌入式媒体,因为用户始终启动播放。在开始播放后,会自动在iPhone或iPod touch上提供一个控制器,但对于iPad,您必须设置控件属性或使用JavaScript提供一个控制器。
这意味着(就代码而言)是Java的
play()
和load()
方法在用户启动播放之前是无效的,除非play()
或load()
方法是由用户操作(例如,点击事件)触发的。 基本上,用户启动的播放按钮有效,但是
onLoad="play()"
事件无效。例如,这将播放电影:<input type="button" value="Play" onclick="document.myMovie.play()">
以下内容在iOS上不起作用:
<body onload="document.myMovie.play()">
评论
嗯,花了3个月的时间为iPhone Safari创建在线闹钟!我们(sleep.fm)想出了一种方法,可以在应用打开时保持手机清醒,但是现在使用iOS 6.1,警报音频将无法播放。在iOS 6.0中运行良好。有没有解决的办法?
–chaser7016
2013年1月31日在3:22
哦,等等,我们重新启动并运行了iPhone Safari的移动网络闹钟(sleep.fm),因此由于缺少html5自动播放支持,因此存在一些解决方法。
–chaser7016
13年2月27日在1:24
@ Jonah1289根据您在Sleep.fm上的博客文章,布莱恩·卡瓦里尔(Brian Cavalier)在github链接上推了一个带有以下标题的github链接:使用webkitaudiocontext代替音频标签在ipad或iphone上自动播放音频也许是一个不错的起点。
–法兰西斯科
13年5月21日在11:55
请提供更多详细信息-对于缺少自动播放支持的具体解决方法是什么?
–Umopepisdn
2014年1月10日20:23
他们应该做的是在wifi上允许自动播放,并且可以手动播放或在移动网络上提示用户视频要自动播放。
– Ric
14年2月18日在10:49
#2 楼
首先,我要说的是,我意识到这个问题已经老了,已经有了一个可以接受的答案。但是,作为一个不幸的互联网用户,使用此问题作为一种手段,只是在证明之后不久(但不是在我让客户感到有点不适之前)才被证明是错误的。我想补充一下我的想法和建议。虽然@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"
});
在页面上隐藏该内容后,当用户“点击”观看电影时(仍然是用户交互,无法解决该要求),而不是导航到辅助观看页面,而是加载隐藏的视频。这主要是因为没有真正使用media标签,而是将其升级为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();
});
中提琴。就UX而言,用户单击视频即可播放,而Quicktime会打开播放他们选择的视频。这仍然处于视频只能通过用户操作播放的限制之内,因此我不会强迫任何不打算使用此服务观看视频的人提供数据。我在试图弄清YouTube如何通过其移动设备成功实现这一点时发现了这一点,这本质上是一些非常不错的Javascript页面构建和精美元素的隐藏,例如在视频标签的情况下。
tl; dr这是一种“解决方法”,可以尝试在iOS设备上创建“自动播放” UX功能,而不会超出Apple的限制,并且仍然让用户决定是否要观看视频(或最喜欢的音频,尽管我尚未在未经其许可的情况下进行加载的情况下对其本身进行了测试。
此外,对于那些评论来自sleep.fm的人,不幸的是,这仍然不能解决您遇到的问题是基于时间的音频播放。
我希望有人觉得这些信息有用,它可以为我节省一个坚决告知客户具有此功能的客户一星期的坏消息,我很高兴找到一种最终解决方案。
编辑
进一步的发现表明上述解决方法仅适用于iPhone / iPod设备。 iPad在全屏播放之前会在Safari中播放视频,因此您需要某种机制来在单击之前调整点击视频的大小,否则最终将获得音频而没有视频。
评论
最好使用$ dummyVideo.get(0)而不是方括号,因此如果您的选择为空,jQuery可能会失败。
– Micros
2014年12月3日14:46
#3 楼
只需设置webView.mediaPlaybackRequiresUserAction = NO;
自动播放功能就可以在iOS上使用。
评论
这不适用于网站,仅适用于使用本机应用程序将其包装的网站。
–布兰登·巴克
13年11月21日在15:46
我的意思是,从网页上(正如问题所问),这是完全无法访问的-是的,浏览器中的Javascript无法做到这一点。仅当您从您可以控制的应用程序在WebView内运行站点时,此方法才有效,因此实际上并不能为问题提供解决方案。
–布兰登·巴克
2013年12月12日16:37
@izuriel说句公道话,他确实用“ objective-c”和“ cocoa-touch”标记了这个问题,所以假设他使用的是Webview并不是一件容易的事。
– Kloar
2014年4月4日在9:37
通常添加@Kloar标记是为了获得更多关注或对其尝试解决的问题的一般性误解。提出这个问题的人可能认为提到Objective-C与说“ iOS”是一样的(可可触摸也是如此)。尽管未列出“ uiwebview”标签,所以我将其排除为可行的选择。该问题提到了在台式机和iPad上使用Safari(与应用无关),并使用Javascript演示代码来调试情况。总而言之,我想这是一个更安全的选择,这个问题实际上是在寻找Web而非本机解决方案。
–布兰登·巴克
2014年4月4日在17:26
在Android上:developer.android.com/reference/android/webkit/…
–cottonBallPaws
2014年7月29日在12:41
#4 楼
从iOS 10开始,视频现在可以自动播放,但只有其中一个被静音或没有音轨。是的!简而言之:对于满足以下条件的元素,
<video autoplay>
元素现在将使用autoplay属性,即如果源媒体不包含音轨,则允许
<video>
元素自动播放而无需用户打手势。<video muted>
元素也将被允许自动播放。如果
<video>
元素在没有用户手势的情况下获得音轨或变为静音,则播放将暂停。<video autoplay>
元素仅在可见时才开始播放屏幕,例如,当它们滚动到视口中时,通过CSS使其可见,然后插入DOM。<video autoplay>
元素如果变为不可见状态(例如,通过滚动到视口之外。此处更多信息:
https://webkit.org/blog/6784/new-video-policies-for- ios /
评论
autoplay属性仅适用于PC,不适用于移动设备。我已经尝试了很多次。
–huykon225
17年6月9日在1:59
#5 楼
在此Safari HTML5参考中,您可以阅读,以防止用户自费下载通过蜂窝网络进行的下载
,嵌入式媒体无法在Safari上自动播放,
iOS-用户始终启动播放。启动播放后,iPhone或iPod touch上会自动提供一个控制器,但对于iPad,必须设置controls属性或使用JavaScript提供一个控制器。
评论
“除了可能是多个MB的GIF文件,而且甚至在没有人意识到的情况下使用带宽”
–Simon_Weaver
15年3月20日在16:54
@Simon_Weaver是大多数情况下的x12倍。
– Burak Tokak
17年2月1日在11:44
#6 楼
首先让视频静音,以确保在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>
评论
相关/重复项:stackoverflow.com/questions/2841966/…、stackoverflow.com/questions/4259928/…也许我们应该看看浏览器检测,以及是否应该调用playVideo():stackoverflow.com/questions/26895492/…
对我有用的这项工作github.com/Stanko/html-canvas-video-player
关于此主题的有用博客文章:webkit.org/blog/6784/new-video-policies-for-ios
ios中的Opera mini默认情况下支持自动播放,而chrome,firefox和safari不支持,也没有提供打开选项。