[javascript] Universal Viewer를 사용한 웹 기반의 유튜브 플레이어 기능

30 Nov 2023

javascript

이번 포스트에서는 Universal Viewer를 사용하여 웹 기반의 유튜브 플레이어 기능을 구현하는 방법에 대해 알아보겠습니다. Universal Viewer는 웹 위에 다양한 미디어 리소스를 표시하고 상호 작용할 수 있는 플러그인입니다. 이를 사용하여 유튜브 플레이어를 웹 페이지에 쉽게 추가할 수 있습니다.

1. Universal Viewer 설정

먼저 Universal Viewer를 사용할 수 있도록 웹 페이지에 필요한 라이브러리를 추가해야 합니다. 이를 위해 아래와 같이 <script> 태그를 이용하여 필요한 스크립트를 로드합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/universalviewer@3.0.0/dist/universalviewer.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/universalviewer@3.0.0/dist/universalviewer.min.css">

2. 유튜브 플레이어 추가

유튜브 플레이어를 추가하기 위해 아래와 같이 HTML 요소를 생성합니다. 유튜브 동영상의 URL을 data-uri 속성으로 지정합니다.

<div id="uv" class="uv" data-uri="https://www.youtube.com/watch?v=VIDEO_ID"></div>

3. JavaScript 코드 추가

만들어진 HTML 요소에 대한 Universal Viewer를 초기화하는 JavaScript 코드를 추가합니다. 아래의 코드 예시에서는 #uv 요소에 대한 Universal Viewer를 설정하고, 플레이어가 준비되었을 때 실행될 함수를 등록하고 있습니다.

$(document).ready(function() {
   var uv = new UV.Viewer(document.getElementById('uv'));
   uv.setup().then(function() {
      // 플레이어가 준비되었을 때 실행될 코드
   });
});

위 코드에서 VIDEO_ID는 유튜브 동영상의 고유 식별자를 의미합니다. 해당 동영상의 URL에서 뒷부분의 고유 식별자를 복사하여 사용하세요.

4. 결과 확인하기

위의 설정 및 코드를 적용한 뒤 웹 페이지를 열어보면 Universal Viewer를 이용한 유튜브 플레이어를 확인할 수 있습니다. 유튜브 동영상이 정상적으로 로드되고 재생될 것입니다.

참고 문서

Universal Viewer 공식 문서

이번 포스트에서는 Universal Viewer를 사용하여 웹 기반의 유튜브 플레이어를 구현하는 방법에 대해 알아보았습니다. Universal Viewer의 다양한 설정을 통해 사용자 경험을 개선하고 웹 페이지에 풍부한 미디어 콘텐츠를 제공할 수 있습니다.