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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742321440a4421891.html
评论列表（0条）