我试图嵌入新的iframe版本的YouTube视频,并让它自动播放。
据我所知,没有办法通过修改URL的标志来做到这一点。有办法通过使用JavaScript和API来做到这一点吗?
我试图嵌入新的iframe版本的YouTube视频,并让它自动播放。
据我所知,没有办法通过修改URL的标志来做到这一点。有办法通过使用JavaScript和API来做到这一点吗?
当前回答
2014 iframe嵌入如何嵌入YouTube视频与自动播放和没有建议的视频在剪辑结束
rel=0&autoplay
下面的例子:。
<iframe width="640" height="360" src="//www.youtube.com/embed/JWgp7Ny3bOo?rel=0&autoplay=1" frameborder="0" 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}
/>
)
}
}
要使用javascript api,
<script type="text/javascript" src="swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/OyHoZhLdgYw?enablejsapi=1&playerapiid=ytplayer&version=3",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
使用id播放youtube:
swfobject.embedSWF
参考:https://developers.google.com/youtube/js_api_referencemagazine
自2018年4月起,谷歌对自动播放政策进行了一些更改。你不仅需要添加autoplay=1作为查询参数,还需要添加allow='autoplay'作为iframe的属性
所以你必须这样做:
<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></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
});
为那些不知道(过去的我和未来的我)的人提供多个查询提示
如果您只是使用url进行单个查询?autoplay=1工作,如mjhm的答案所示
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1"></iframe>
如果你有多个查询还记得第一个以a开头吗?而其他的则以&开头
假设你想关闭相关视频,但启用自动播放…
这是
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0&autoplay=1"></iframe>
这是可行的
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&rel=0"></iframe>
但是这些都没用。
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0?rel=0?autoplay=1"></iframe>
<iframe src="https://www.youtube.com/embed/oHg5SJYRHA0&autoplay=1&rel=0"></iframe>
例子比较
https://jsfiddle.net/Hastig/p4dpo5y4/
更多信息
有关使用多个查询字符串的更多信息,请阅读下面NextLocal的回复