admin管理员组文章数量:1332352
I have below JS code for youtube API -
<html>
<script>
var tag = document.createElement('script');
tag.src = "";
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>
Here is jsfiddle
Description -
In the above code their are 2 videos that are played one after the other
[i.e. initially YtF6p_w-cSc and then 4MJRS-cLozU]. Now, when the first video is loaded/played i want to hide the control
[i.e. PlayerVar{control : 0}] below highlighted part in yellow should be eliminated.
while for the other video i want it back [i.e control:1].
In simple words i want to hide control for 1st video and want it back for the 2nd video.
How to achieve this. Please help.!!
I have below JS code for youtube API -
<html>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube./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>
Here is jsfiddle
Description -
In the above code their are 2 videos that are played one after the other
[i.e. initially YtF6p_w-cSc and then 4MJRS-cLozU]. Now, when the first video is loaded/played i want to hide the control
[i.e. PlayerVar{control : 0}] below highlighted part in yellow should be eliminated.
while for the other video i want it back [i.e control:1].
In simple words i want to hide control for 1st video and want it back for the 2nd video.
How to achieve this. Please help.!!
Share Improve this question edited Sep 28, 2016 at 13:29 asked Sep 28, 2016 at 13:24 user5426326user54263262 Answers
Reset to default 4Add controls=0 to the end of the url.
To re-enable controls use controls=1or 2.
In your configuration add in the same area as your other attributes and events:
playerVars: {
controls: '0'
},
To re-enable controls use:
playerVars: {
controls: '1' //or 2
},
Snippet isn't fully functional due to strict sandbox. Try PLUNKER
Make your iframe manually and change the url. Do not try changing playerVars the only option Youtube allows to be changed dynamically in playerVars is captions.
SNIPPET
<iframe src="http://youtube./embed/ir2qcPwZFdQ?controls=0&enablejsapi=1&iv_load_policy=3&rel=0" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
<iframe src="http://youtube./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./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>Below code worked for me -
<!doctype html>
<html>
<body>
<iframe id="ytplayer" type="text/html" width="640" height="390" src="https://www.youtube./embed/YtF6p_w-cSc?autoplay=1&controls=0&enablejsapi=1" frameborder="0"></iframe>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube./iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
events: {
'onStateChange': onPlayerStateChange
}
});
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED && !done) {
document.getElementById('ytplayer').src ="https://www.youtube./embed/4MJRS-cLozU?autoplay=1&controls=1&enablejsapi=1"
}
}
}
</script>
</body>
</html>
本文标签： javascriptOverride playerVars controlsattrib dynamically for videos in youtube APIStack Overflow
版权声明：本文标题：javascript - Override playerVars controls:attrib dynamically for videos in youtube API - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742321440a2452867.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论