모바일에서 유튜브 자동재생 여러게 하는 방법 좀 알려주세요 채택완료
모바일에서 유튜브 자동재생을 하려고 여러 소스를 찾다 iframe은 안 되는 걸 확인하고
결국 소스를 찾았습니다. 문제는 두개, 세개를 어떻게 돌리는지 어떻게 써야 하는지 모르겠습니다.
아무리 바꿔봐도 하나만 돌아갑니다.
/아래 비디오아이디는 영상 아이디 입니다.
<div id="player">
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'Jicj4oF4-AU',
width:'100%',
height:'100%',
playerVars: {
'autoplay': 1,
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'showinfo': 0,
'rel': 0,
'controls': 0,
'color':'white',
'loop': 1,
'mute':1,
// 'origin': 'https://meeranblog24x7.blogspot.com/'
},
events: {
'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
player.playVideo();
player.mute();
}var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</div>
답변 3개
<div id="player1" style="width:100%"></div>
<div id="player2" style="width:100%"></div>
<div id="player3" style="width:100%"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
var player2;
var player3;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player1', {
videoId: '18pmjO1Jgpw', //유튭 영상ID
playerVars: {
'autoplay': 1, //자동재생
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'rel': 0,
'controls': 1, //youtube 콘트롤 표시
'color':'white',
'loop': 1, //반복 여부
},
events: {
'onReady': onPlayerReady,
}
});
player2 = new YT.Player('player2', {
videoId: '18pmjO1Jgpw', //유튭 영상ID
playerVars: {
'autoplay': 1, //자동재생
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'rel': 0,
'controls': 1, //youtube 콘트롤 표시
'color':'white',
'loop': 1, //반복 여부
},
events: {
'onReady': onPlayerReady,
}
});
player3 = new YT.Player('player3', {
videoId: '18pmjO1Jgpw', //유튭 영상ID
playerVars: {
'autoplay': 1, //자동재생
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'rel': 0,
'controls': 1, //youtube 콘트롤 표시
'color':'white',
'loop': 1, //반복 여부
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
player.playVideo();
player.mute(); //자동재생하려면 mute해야함
}
</script>이런식으로 클래스?를 새로 생성해서 쓰면 안되나요??
코드가 길어지는게 싫으면 배열화해서 줄일 수도 있을 듯 하네요
답변에 대한 댓글 5개
<div id="player1" style="width:100%"></div>
<div id="player2" style="width:100%"></div>
<div id="player3" style="width:100%"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
var player2;
var player3;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player1', {
videoId: '18pmjO1Jgpw',
playerVars: {
'autoplay': 0,
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'rel': 0,
'controls': 1,
'color':'white',
'loop': 1,
},
events: {
'onReady': onPlayerReady,
}
});
player2 = new YT.Player('player2', {
videoId: 'dDC6Oe_yQIs',
playerVars: {
'autoplay': 1,
'rel': 0,
'showinfo': 0,
'modestbranding': 1,
'playsinline': 1,
'rel': 0,
'controls': 1,
'color':'white',
'loop': 1,
},
events: {
'onReady': onPlayerReady,
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
event.target.mute();
}
</script>
[/code]
댓글을 작성하려면 로그인이 필요합니다.
해당 영상만 영상소유자가 제한 설정을 한게 아닌가 싶네요.
https://support.google.com/youtube/answer/6301625?hl=en
되는것들은 됩니다.
<iframe width="484" height="272" src="https://www.youtube.com/embed/zjaXWL0fepw?rel=0&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="484" height="272" src="https://www.youtube.com/embed/Jicj4oF4-AU?rel=0&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="484" height="272" src="https://www.youtube.com/embed/jhQPasMN5WA?rel=0&autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
아마 같은 페이지에서는 하나만 돌아가는 것으로 알고 있습니다.
중복해서 플레이가 되지 않을 것입니다.
iframe로는 여러개를 할 수 있을 것입니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인