我使用React设置iframe与youtube视频在页面上正确的大小。所有的工作都很好,但对于手机不工作自动播放选项。
什么是有趣的页面,我有什么作为例子视频它的工作完美.
<iframe type="text/html" allowTransparency="true" height="100%" width="100%" preload="metadata" gesture="media" allow="encrypted-media" className="autoplay-iframe"
src={`https://www.youtube.com/embed/`+this.props.autoplay+`?autoplay=1&version=3&html5=1&hd=1&controls=0&loop=1&playlist=`+this.props.autoplay+`&playsinline=1&rel=0&showinfo=0&modestbranding=1&related=0&enablejsapi=1&origin=`+window.location.hostname} frameborder="0"></iframe>
上面是我的iframe代码。我删除了iframe代码的一部分,但styles属性中只有style。这对自动播放并不重要。其他页面的finally url也可以正常工作。我不知道为什么。有什么提示可以解决这个问题吗?
先谢了。
8条答案
按热度按时间093gszye1#
你将无法实现这一点,因为它是故意禁用所有移动的设备。原因是用户保存Hive数据。它也被引用在this post。
视频自动播放不起作用的原因很简单。在iOS和Android中,该功能都是故意为移动的设备设置的disabled。这样做的原因是为了保存移动用户的钱。这类设备(尤其是手机)通常使用按带宽收费的数据连接。它们有数据限制,超过就会产生费用。
这一说法也得到了以下SO帖子的支持。
wgxvkvu92#
我可以在Youtube上播放视频因为在线加载Youtube视频让谷歌和他们的新核心网络活力感到不安,我们实现了一个缩略图占位符,当点击(jQuery)使用Youtube Iframe API启动加载视频。我一开始也无法让它们自动播放。这个问题通过让API嵌入Iframe来解决--没有事先把iframe放好。它可以在iOS Safari、Chrome和Firefox上自动播放。
文件准备就绪时:
点击事件:
超文本:
at0kjp5o3#
Google官方声明“由于此限制,autoplay、playVideo()、loadVideoById()等函数和参数将无法在所有移动的环境中工作。
参考:https://developers.google.com/youtube/iframe_api_reference
6mzjoqzu4#
通过添加参数
playsinline: 1
,我成功地使autoplay在android和ios上工作。ffvjumwh5#
规则已经改变了,所以现在大多数新手机都可以自动播放,但是大多数视频流媒体网站,比如youtube和vimeo还没有启用这个功能,html5视频能用而iframe不能用的原因是youtube禁用了它。
yhived7q6#
对于任何在react native上处理这个问题的人来说,你可以覆盖用户代理,它就像一个魅力:
zzoitvuj7#
Youtube视频自动播放是工作在这里是代码
k75qkfdt8#
视频自动播放不起作用的原因很简单。在iOS和Android中,移动的设备都故意禁用了该功能。这样做的原因是为了保存移动用户的钱。这类设备(尤其是手机)通常使用按带宽收费的数据连接。