웹사이트에 유튜브 영상을 여러개 삽입하여 자동 재생시키되 음소거를 시키고 싶을 경우가 있다.
어떻게 보면 간단할 듯 한데 실제로 적용되기 까다롭다.
이유는 음소거 때문이다.
그냥 html 문서에 iframe으로 <iframe src="http://www.youtube.com/embed/영상ID"> 이런식으로 여러개 놓고 자동재생을 시키고 싶을 때는 영상ID 뒤에 ?autoplay=1 파라미터를 추가하고 반복이면 다시 뒤에&loop=1&playlist=영상ID를 추가해주면 여러 개의 영상이 자동 재생되어 반복 재생된다.
이러한 방식을 <iframe> 태그를 사용하여 IFrame 삽입 이라고 개발 문서에는 써있다.
(참고 https://developers.google.com/youtube/player_parameters?hl=ko#Manual_IFrame_Embeds)
<iframe src="http://www.youtube.com/embed/영상ID1?autoplay=1&loop=1&playlist=영상ID1"></iframe> <iframe src="http://www.youtube.com/embed/영상ID2?autoplay=1&loop=1&playlist=영상ID2"></iframe> <iframe src="http://www.youtube.com/embed/영상ID3?autoplay=1&loop=1&playlist=영상ID3"></iframe>
아무튼 위 코드처럼 html안에 작성하면 영상이 몇 개든 아무 이상없이 재생이 된다.
문제는 음소거...
아쉽게도 위 방법처럼 삽입시 제공되는 파라미터에 음소거가 없다.
즉, 저렇게 영상을 삽입하면 엄청나게 영상 소리가 동시 다발적으로 들리게 된다.
또 다른 유튜브 삽입 방법인 IFrame Player API를 사용하여 IFrame 삽입 (https://developers.google.com/youtube/player_parameters?hl=ko#IFrame_Player_API) 으로도 가능한가 시도하였지만 역시나 이벤트 핸들에 있어 여러가지 어려운 점이 생겨서 사용할 수가 없었다.
그래서 결국 두 코드를 섞어서 해당 기능을 구현해 보았다.
우선 https://www.youtube.com/player_api 를 접속해서 다른이름으로 저장하여 player_api.js로 저장한다.
(위 api 문서에서는 외부에서 다운받아 호출하도록 하는 과정을 스크립트로 있지만 이렇게 하면 나중에 api가 호출되어야만 진행되는 함수가 작동되지 않는 불상사가 생기기 때문에 아예 직접 서버에 올려놓고 호출하는 것이다.)
위 방법으로 진행되지 않음을 발견하고 필요한 코드를 2개 첨부한다. 안전하게 유투브에서 직접 호출하면 되겠지만 또 나중에 코드를 어떻게 바꿀지 모르니 일단 다운 받아 놓았다. iframe www-embed-player
<script src="iframe.js"></script> <script src="www-embed-player.js"></script>
html의 <head></head> 사이에 위 코드를 넣어 api를 불러온다.
그런 후에 문서안에 영상을 노출할 엘리먼트마다 클래스 명을 지정해주고 data-url 속성에 영상ID를 넣는다.
<div class="youtubeP" data-url="lslG2Kf9a3A"></div> <div class="youtubeP" data-url="BmH7B3nFmKk"></div>
예제로 클래스명은 youtubeP 라고 넣었다.
var videos = document.getElementsByClassName("youtubeP");
for(var i=0; i < videos.length; i++){
var player;
var youtube = videos[i];
var iframe = document.createElement("iframe");
var geturl = youtube.getAttribute("data-url")
iframe.setAttribute("src",
"https://www.youtube.com/embed/" + geturl
+ "?&enablejsapi=1&html5-1");
iframe.setAttribute('frameborder', 0);
youtube.appendChild(iframe);
youtube.onPlayerReady = function(event){
event.target.mute();
}
player = new YT.Player(youtube, {
playerVars: {
'width' : '100%',
'height' : '100%',
'autoplay' : 1,
'controls' : 0,
'autohide' : 1,
'wmode': 'opaque',
'showinfo' : 0,
'loop' : 1,
'mute' : 1,
'rel' : 0,
'playlist' : geturl
},
videoId: geturl,
events: {
'onReady': youtube.onPlayerReady
}
});
//player
}
그리고 위 처럼 자바스크립트를 작성하여 youtubeP 클래스를 가진 엘리먼트들을 찾아 아이프레임을 만들어 src값을 직접 변경하고 &enablejsapi=1&html5-1 파라미터를 사용하여 IFrame Player API를 사용하도록 만든다.
그런 후에 해당 api의 events를 이용해서 개별적으로 음소거 함수를 실행하도록 했다.