2021. 1. 11. 02:48ㆍSTUDY/PlugIn
유튜브 iframe 을 이용하다가,
모바일에서는 자동재생이 안된다거나, 재생바가 보인다거나 하는 문제가 있었습니다.
그래서 방법을 찾던 도중, 결국 찾아낸 것이 YTPlayer !
YTPlayer
유튜브 영상 삽입 Jquery 플러그인 으로,
유튜브 영상을 배경으로 넣거나,
유튜브 iframe 에서 제어가 안되는 - 모바일 자동재생 / 재생바 숨기기 등 여러 기능을 지원하는 플러그인 입니다.
( * 해당 플러그인은 웹서버에서만 작동됩니다. 서버에 연결하여 확인해주세요! )
>> 원문 사이트 : https://github.com/pupunzi/jquery.mb.YTPlayer
1. Mark Up
* header 삽입 *
<link href="css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="inc/jquery.mb.YTPlayer.js"></script>( ↑ css 파일과 js 파일은 github에서 다운로드 후, 파일경로에 맞게 입력주세요! )
-- 경로 : https://github.com/pupunzi/jquery.mb.YTPlayer
* js 호출 *
$(function(){
$("#player").YTPlayer();
});* html 태그 삽입 *
<div id="player" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">
My video
</div>이렇게가 기본 포맷인데요,
사실 동영상을 어떤 선택자에 넣을 것인지에 따라 html 마크업 하는 방법은 3가지가 있답니다.
↓↓↓
1. body 영역에 동영상 삽입
<div id="bgndVideo" class="player"
data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}"></div>
2. 해당 요소(태그)에 동영상 삽입
<div id="player" class="player"
data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'self',startAt:0,mute:true,autoPlay:true,loop:false,opacity:1}">
</div>
3. 다른 요소(태그)에 동영상 삽입
<div id="player" class="player"
data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'#playVideo',startAt:0,mute:false,autoPlay:false,loop:false,opacity:1}">
</div>
<div id="playVideo" class="playVideo"></div>
* 2번, 3번의 경우 클릭시 영상 컨트롤이 됩니다.
때문에 클릭이 되지 않기를 원하신다면, css 에 [ z-index: -1; ] 값을 넣어, 클릭이 되지 않도록 해주세요!
* 2번은 해당 요소에 width / height 값을 지정해도, 비율따라서 height값이 다시 지정이 되는 반면,
3번은 지정한 요소 뒤로 해당영상이 자체의 크기를 가지고 잡히게 됩니다. ( 마치 background-image 를 넣고, background-position을
center로 둔것 처럼 ) 때문에 해당 요소 안의 iframe에 css 를 다시 잡아줘야 합니다.
비디오 재생목록이 있을 경우 js
// play list 선언
var videos = [
{videoURL:"VuaJAgx0x_4",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true},
{videoURL: "3ovA7zeviRo",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:false},
{videoURL: "u9k1FaMIYTs",containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, ratio:"4/3", addRaster:true}
];
// play list 불러오기
$("#player").YTPlaylist(videos);
2. 속성
html 태그에 보시면, data-property="{ }"안에 입력된 값들이 보이시나요?
바로, 비디오의 여러 기능들을 설정하는 속성값인데요, 아래 표를 통해 함께 확인해봅시다.
| 속성 | 값 | 설명 |
| videoURL | 비디오 링크 | * 페이지 URL : 'https://www.youtube.com/watch?v=V2rifmjZuKQ' * 유튜브 공유 패널 짧은 URL : 'http://youtu.be/V2rifmjZuKQ' * 동영상 ID : 'V2rifmjZuKQ' |
| containment |
선택자 / body / self | tag name / class name / id name 등을 입력하시면 됩니다. |
| coverImage |
경로 | 자동재생이 아닌경우, 영상에 표시될 이미지 - 지정하지 않으면 영상 첫번째 프레임 표시 |
| mute | true / false | 음소거 여부 |
| autoPlay | true / false | * 정책상 음소거가 true 인 경우에만 자동 재생이 됩니다. |
| loop | true / false / 숫자 | 반복 횟수 / 몇번 반복이 되어야하는지 숫자로 지정할 수 있습니다. |
| showControls | true / false | 영상 컨트롤(재생바 등) 표시여부 |
| showYTLogo |
true / false | YT 로고와 동영상 URL 링크 표시 여부 |
| useOnMobile | true / false | 모바일 장치에서의 렌더링 여부 = 영상 사용 여부 |
| mobileFallbackImage | 경로 | 위의 useOnMobile 값을 false 했을 경우 = 모바일에서 해당 영상을 사용하지 않을 경우, 모바일에서 표시될 배경이미지 |
| ratio | 4/3 | 16 / 9 | auto | 동영상 화면 비율 |
| opacity | 0 ~ 1 사이의 숫자 | 비디오 불투명도 |
| optimizeDisplay | true / false | 최적화하는 창 크기에 비디오 크기를 맞춤* |
| vol | 1 ~ 100 사이의 숫자 | 영상 볼륨 조절 |
| startAt | 숫자 | 동영상이 시작되어야 하는 초 |
| stopAt | 숫자 | 동영상이 종료되어야 하는 초 |
| remember_last_time | true / false | / true 설정시 해당 시점부터 영상 재생 |
| addRaster | true / false | 비디오 위에 래스터 이미지 표시 여부* |
| mask | 경로 / false | {0 : '경로', 20 : '경로',…} - 지정된 시간에 마스크를 추가 ver 3.0↑ |
| realfullscreen | true / false | HTML5 동영상 전체화면 동작을 활성화* |
| stopMovieOnBlur | true / false | 해당 창에대한 포커스를 잃었을 때, 일시 중지 / false 시, 다른 창을 볼때도 동영상을 계속 재생 |
| playOnlyIfVisible | true / false | 해당 화면 밖에 있을때, 일시 중지 |
| gaTrack | true / false | 해당 영상에 대한 Google Analytics 이벤트 추적기 활성화 |
| anchor | 'center, center' 등 방향 - top / left/ bottom/ right/ center |
ver 3.0.3↑ |
| showAnnotations | true / false | 주석 표시 여부 |
| cc_load_policy | true / false | 자막 표시 여부 |
| abundance | 0.2 등 숫자 | 크기의 백분율 지정 / 기본값 : 0.2 * |
| onReady | 함수 | 영상이 준비되면 실행될 함수 |
| onError | 함수 | 영상로드 중 오류가 나면 실행될 함수 |
3. 스크립트 제어
동영상을 제어 할 수 있는 스크립트 동작입니다.
버튼 클릭시 재생 / 중시 / 음소거 등등의 제어를 할 수 있도록 합니다.
이를 응용하여, 사용자가 영상을 조작할 수 있게끔 할 수 있겠죠??
| jquery | 설명 | 예시 |
| $('#player').YTPlay() | 비디오 재생 | <button onclick="$('#player').YTPPlay()">play</button> |
| $('#player').YTPPause() | 비디오 일시 중지 | <button onclick="$('#player').YTPPause()">pause</button> |
| $('#player').YTPStop() | 비디오 중지 | <button onclick="$('#player').YTPStop()">stop</button> |
| $('#player').YTPSeekTo(20) | 특정 시간까지 비디오 탐색 | <button onclick="$('#player').YTPSeekTo(20)">20초 동안 영상을 찾습니다.</button> |
| $('#player').YTPGetPlaybackRate() | 실제 비디오의 재생속도로 재생 | <button onclick="$('#player').YTPGetPlaybackRate()">영상의 재생속도로 재생</button> |
| $('#player').YTPSetPlaybackRate() | 값 : 0.25 / 0.5 / 1 / 1.5 /2 |
<button onclick="$('#player').YTPSetPlaybackRate(0.5)">영상의 재생속도 0.5로 재생</button> |
| $('#player').YTPFullscreen() | 비디오를 배경에서 앞으로 전환 | <button onclick="$('#player').YTPFullscreen()">영상을 앞으로 전환</button> |
| $('#player').YTPSetVolume(20) | 비디오 볼륨 설정 | <button onclick="$('#player').YTPSetVolume(20)">음량 20</button> |
| $('#player').YTPMute() | 비디오 음소거 | <button onclick="$('#player').YTPMute()">음소거</button> |
| $('#player').YTPUnmute() | 비디오 음소거 해제 | <button onclick="$('#player').YTPUnmute()">음소거 해제</button> |
| $('#player').YTPToggleVolume() | 비디오 음소거 토글 | <button onclick="$('#player').YTPToggleVolume()">음소거 / 음소거 해제</button> |
| $('#player').YTPPlayNext() | * 비디오 재생목록이 있는경우만 |
<button onclick="$('#player').YTPPlayNext()">다음 영상</button> |
| $('#player').YTPPlayPrev() | * 비디오 재생목록이 있는경우만 |
<button onclick="$('#player').YTPPlayPrev()">이전 영상</button> |
| $('#player').YTPGetTime() | 실제 비디오 시간 반환 | - |
| $('#player').YTPGetTotalTime() | 총 비디오 시간 반환 | - |
| $('#player').YTPGetAnchor() | 비디오 앵커 포인트 반환 | - |
자, 이제 위의 내용들을 활용해서 간단하게 플레이어를 만들어 볼까요?
See the Pen ExgLRvy by GYURI (@gyuri-v) on CodePen.
영상은 샘플 YTplayer 의 샘플영상을 가져올까 하다가
혹시 문제될까 싶어 그냥 예전에 유튜브 올렸던 제 영상들 가져왔어요 ㅋㅋㅋ
* 음소거 버튼도 만들어 주석처리했습니다! 혹시 필요하신분들은 사용하세용 ㅎㅎ
여기까지가 YTPlayer 에 대한 설명이었습니다!
혹시 도움이 되신분이 있을랑가 모르겠어요 😊
적어놓으니 별거 없는거 같은데, 처음에는 왜그리 어려웠나 모르겠네유 ㅠㅠ ㅋㅋㅋ
앞으로 계속 공부하면서 혹시 추가로 알게되는 부분이 있으면 계속 업데이트 하겠습니다
추가적인 설명 필요하시면 댓글로 알려주세용!
혹시 문제가 되는 부분도 있으면 댓글로 남겨주세요 😂
오늘도 글 함께 해주셔서 감사합니다!