모바일에서 유튜브 자동재생 여러게 하는 방법 좀 알려주세요
본문
모바일에서 유튜브 자동재생을 하려고 여러 소스를 찾다 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>
이런식으로 클래스?를 새로 생성해서 쓰면 안되나요??
코드가 길어지는게 싫으면 배열화해서 줄일 수도 있을 듯 하네요
와~~ 멋지십니다. 이렇게 한번 해 보겠습니다. ^^
그런데 이것도 하나만 돌아갑니다. 맨 앞에 하나만요...player1
http://bagajie.ivyro.net/test.php
제쪽에서 올렸을 때는 3개 다 보이는데....
보이긴 합니다만 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',
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>
아마 같은 페이지에서는 하나만 돌아가는 것으로 알고 있습니다.
중복해서 플레이가 되지 않을 것입니다.
iframe로는 여러개를 할 수 있을 것입니다.
iframe은 autoplay=1&mute=1 테스트를 해 봤는데 안 돌아가더군요
해당 영상만 영상소유자가 제한 설정을 한게 아닌가 싶네요.
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>
올려주신 Iframe 영상들도 돌아가지 않습니다. 아쩠든 감사합니다.
