모바일에서 유튜브 자동재생 여러게 하는 방법 좀 알려주세요 채택완료
WoodslabNet
2년 전
조회 2,414
모바일에서 유튜브 자동재생을 하려고 여러 소스를 찾다 iframe은 안 되는 걸 확인하고
결국 소스를 찾았습니다. 문제는 두개, 세개를 어떻게 돌리는지 어떻게 써야 하는지 모르겠습니다.
아무리 바꿔봐도 하나만 돌아갑니다.
/아래 비디오아이디는 영상 아이디 입니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
2년 전
</p>
<p>
<div id="player1" style="width:100%"></div>
<div id="player2" style="width:100%"></div>
<div id="player3" style="width:100%"></div>
<script src="<a href="https://www.youtube.com/iframe_api"></script>" target="_blank" rel="noopener noreferrer">https://www.youtube.com/iframe_api"></script></a>
<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,
}
});
}</p>
<p>function onPlayerReady(event) {
player.playVideo();
player.mute(); //자동재생하려면 mute해야함
}</p>
<p></script></p>
<p>이런식으로 클래스?를 새로 생성해서 쓰면 안되나요??
코드가 길어지는게 싫으면 배열화해서 줄일 수도 있을 듯 하네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 5개
W
WoodslabNet
2년 전
와~~ 멋지십니다. 이렇게 한번 해 보겠습니다. ^^
W
WoodslabNet
2년 전
그런데 이것도 하나만 돌아갑니다. 맨 앞에 하나만요...player1
�
개노미
2년 전
http://bagajie.ivyro.net/test.php
제쪽에서 올렸을 때는 3개 다 보이는데....
제쪽에서 올렸을 때는 3개 다 보이는데....
W
WoodslabNet
2년 전
보이긴 합니다만 3개가 자동플레이가 안되고 맨 앞 하나만 플레이됩니다.
�
개노미
2년 전
[code]
<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]
<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]
댓글을 작성하려면 로그인이 필요합니다.
2년 전
해당 영상만 영상소유자가 제한 설정을 한게 아닌가 싶네요.
https://support.google.com/youtube/answer/6301625?hl=en
되는것들은 됩니다.
</p>
<p><iframe width="484" height="272" src="<a href="https://www.youtube.com/embed/zjaXWL0fepw?rel=0&autoplay=1&mute=1"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/zjaXWL0fepw?rel=0&autoplay=1&mute=1"</a> frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="484" height="272" src="<a href="https://www.youtube.com/embed/Jicj4oF4-AU?rel=0&autoplay=1&mute=1"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/Jicj4oF4-AU?rel=0&autoplay=1&mute=1"</a> frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="484" height="272" src="<a href="https://www.youtube.com/embed/jhQPasMN5WA?rel=0&autoplay=1&mute=1"" target="_blank" rel="noopener noreferrer">https://www.youtube.com/embed/jhQPasMN5WA?rel=0&autoplay=1&mute=1"</a> frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
W
WoodslabNet
2년 전
올려주신 Iframe 영상들도 돌아가지 않습니다. 아쩠든 감사합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인