gpt4 book ai didi

javascript - 覆盖 playerVars 控件 :attrib dynamically for videos in youtube API

转载 作者:行者123 更新时间:2023-11-29 10:07:51 30 4
gpt4 key购买 nike

我有以下用于 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}] 以下黄色高亮部分应该被删除。 enter image description here

而对于另一个视频,我想要它回来 [即控制: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/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com