2018 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
JS – 유튜브 영상 (음소거,자동재생 상태로) 다중 삽입하기
iframe
Filename : iframe.js (24 KB)
Caption :
www-embed-player
Filename : www-embed-player.js (84 KB)
Caption :

웹사이트에 유튜브 영상을 여러개 삽입하여 자동 재생시키되 음소거를 시키고 싶을 경우가 있다.

어떻게 보면 간단할 듯 한데 실제로 적용되기 까다롭다.
이유는 음소거 때문이다.

그냥 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)

아무튼 위 코드처럼 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

html의 <head></head> 사이에 위 코드를 넣어 api를 불러온다.

그런 후에 문서안에 영상을 노출할 엘리먼트마다 클래스 명을 지정해주고 data-url 속성에 영상ID를 넣는다.

예제로 클래스명은 youtubeP 라고 넣었다.

그리고 위 처럼 자바스크립트를 작성하여 youtubeP 클래스를 가진 엘리먼트들을 찾아 아이프레임을 만들어 src값을 직접 변경하고 &enablejsapi=1&html5-1 파라미터를 사용하여 IFrame Player API를 사용하도록 만든다.

그런 후에 해당 api의 events를 이용해서 개별적으로 음소거 함수를 실행하도록 했다.

nain

이메일 : nis@naminsik.com

리뉴얼하려고 생각한지가 어느덧 3년이 지났다. ㅠ 망...
.