我试图嵌入新的iframe版本的YouTube视频,并让它自动播放。
据我所知,没有办法通过修改URL的标志来做到这一点。有办法通过使用JavaScript和API来做到这一点吗?
我试图嵌入新的iframe版本的YouTube视频,并让它自动播放。
据我所知,没有办法通过修改URL的标志来做到这一点。有办法通过使用JavaScript和API来做到这一点吗?
当前回答
为了让mjhm在2018年5月在Chrome 66上工作,我在iframe中添加了allow=autoplay,并在查询字符串中添加了enable_js=1:
<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>
其他回答
为了让mjhm在2018年5月在Chrome 66上工作,我在iframe中添加了allow=autoplay,并在查询字符串中添加了enable_js=1:
<iframe allow=autoplay width="420px" height="345px" src="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&enable_js=1"></iframe>
在iframe src的末尾,添加&enablejsapi=1以允许在视频上使用js API
然后用jquery:
jQuery(document).ready(function( $ ) {
$('.video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
});
这将在document.ready上自动播放视频
注意,你也可以在点击函数中使用这个来点击另一个元素来启动视频
更重要的是,你不能在移动设备上自动启动视频,所以用户总是要点击视频播放器本身来启动视频
编辑: 从文件上看,我不是百分之百确定。iframe已经准备好了,因为YouTube可能还在加载视频。我实际上是在点击函数中使用这个函数:
$('.video-container').on('click', function(){
$('video-selector iframe')[0].contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
// add other code here to swap a custom image, etc
});
现在我在iframe标签上添加了一个新的属性“allow”,例如:
允许= "加速度计;播放;加密介质;陀螺仪; 画中画”
最终代码是:
<iframe src="https://www.youtube.com/embed/[VIDEO-CODE]?autoplay=1"
frameborder="0" style="width: 100%; height: 100%;"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
我没有找到iframe实现的工作示例。 其他问题只与Chrome有关,这透露了一点。
为了在Chrome上自动播放,你必须静音声音mute=1。FF和IE似乎工作得很好,使用autoplay=1作为参数。
<iframe src="//www.youtube.com/embed/{{YOUTUBE-ID}}?autoplay=1&mute=1" name="youtube embed" allow="autoplay; encrypted-media" allowfullscreen></iframe>
2018年12月,
寻找一个自动播放,循环,静音youtube视频的反应。
其他答案都不奏效。
我用一个库找到了一个解决方案:react-youtube
class Video extends Component {
_onReady(event) {
// add mute
event.target.mute();
// add autoplay
event.target.playVideo();
}
render() {
const opts = {
width: '100%',
height: '700px',
playerVars: {
// remove video controls
controls: 0,
// remove related video
rel: 0
}
};
return (
<YouTube
videoId="oHg5SJYRHA0"
opts={opts}
// add autoplay
onReady={this._onReady}
// add loop
onEnd={this._onReady}
/>
)
}
}