我有以下用于 youtube API 的 JS 代码 -
<html>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var ScriptTag = document.getElementsByTagName('script')[0];
ScriptTag.parentNode.insertBefore(tag, ScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId : 'YtF6p_w-cSc',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED && !done) {
player.loadVideoById ('4MJRS-cLozU');
}
}
</script>
<body>
<div id="player"></div>
</body>
</html>
这里是 jsfiddle
描述-
在上面的代码中，它们是一个接一个播放的 2 个视频
[IE。最初是 YtF6p_w-cSc，然后是 4MJRS-cLozU]。现在，当第一个视频 loaded/played 我想隐藏控件
[IE。 PlayerVar{control : 0}] 以下黄色高亮部分应该被删除。
而对于另一个视频，我想要它回来 [即控制:1]。
简单来说，我想为第一个视频隐藏控制，并希望为第二个视频恢复它。
如何实现。 请帮助。!!
最佳答案
将 controls=0 添加到 url 的末尾。
要重新启用控件，请使用 controls=1 或 2。
在您的配置中添加与其他属性和事件相同的区域:
playerVars: {
controls: '0'
},
要重新启用控件，请使用:
playerVars: {
controls: '1' //or 2
},
由于严格的沙箱，代码段无法完全发挥作用。尝试 PLUNKER
手动制作您的 iframe 并更改 url。不要尝试更改 playerVars Youtube 允许在 playerVars 中动态更改的唯一选项是字幕。
片段
<iframe src="http://youtube.com/embed/ir2qcPwZFdQ?controls=0&enablejsapi=1&iv_load_policy=3&rel=0" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
<iframe src="http://youtube.com/embed/ir2qcPwZFdQ?color=white&enablejsapi=1&iv_load_policy=3&rel=0" width="560" height="345" frameborder="0" allowfullscreen=""></iframe>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api?controls=0";
var ScriptTag = document.getElementsByTagName('script')[0];
ScriptTag.parentNode.insertBefore(tag, ScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'YtF6p_w-cSc',
playerVars: { //<===============================]HERE]
controls: '0',
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED && !done) {
player.loadVideoById('4MJRS-cLozU');
}
}
</script>
</body>
</html>关于javascript - 覆盖 playerVars 控件 :attrib dynamically for videos in youtube API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39748863/