카테고리 없음

VideoJS

별빛과하엘 2023. 10. 28. 09:29

 

 

VideoJS 란?

 

저는 개발자로서 유튜브나 트위치 서비스를 운영하면서 어떻게 컨트롤을 제어하며, 미디어 컨트롤을 어떻게 제어하는지 궁금한 경우가 많았습니다. 그런데 마침 미디어 서비스를 개발하는 계기가 생겨서 어떻게 제작을 하면 되는지 검색을 하게 되었습니다.

 

미디어 라이브러리에는 Viblast, VideoJS, JW Player, Radiant Media Player, THEOplayer, Bitmovin, Shaka  등이 됩니다. 이렇게 라이브러리가 많은 것 중 제일 익숙하고 오픈소스로 유명한 VideoJS를 선택하게 되었습니다.

 

 

 

 

VideoJS 는 웹사이트에서 미디어 서비스 기능을 사용하기 위한 Javascript or CSS 로 이루어진 라이브러리입니다. MP4 및 WebM과 같은 파일 형식을 지원하지만, HLS 와 MPEG-DASH ( HTTP 동적 적응 스트리밍 ) 지원하는 HTML5 플레이어입니다. 그리고 VideoJS는 약간의 CSS를 사용하여 커스텀을 할 수 있으며, UI를 쉽고 간편하게 커스텀을 할 수 있습니다.

 

 

 

https://videojs.com/advanced?video=disneys-oceans

 

Advanced example | Video.js

An extended example of Video.js player features.

videojs.com

 

예제 사이트

VideoJS에서는 위에처럼 간단한 예제를 보여주며 위에서 옵션 체크와 옵션 변경을 해 볼 수 있습니다. (이미지 참조)

 

 

 

 

VideoJS 사용법

 

 

VideoJS 사용법에서는 npm 모듈로 설치하는 방법과  CDN 호스팅 방식이 있습니다.

 

- CDN (Content Delivery Network) 호스팅 방법

<link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>

 

위에 방식으로 외부서버에서 바로 VideoJS관련 라이브러리를 불러옵니다.

<head>
  <link href="//vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet">
  <script src="//vjs.zencdn.net/8.3.0/video.min.js"></script>
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg"
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
</body>

CDN방식으로 그냥 기본적으로 HTML 파일에 위에 코드를 넣어서 외부 서버를 걸쳐서 라이브러리 소스를 들고온다고 생각하면 됩니다.

 

 

 

 

- npm 방식

https://www.npmjs.com/package/video.js?activeTab=readme

 

video.js

An HTML5 video player that supports HLS and DASH with a common API and skin.. Latest version: 8.6.1, last published: 15 days ago. Start using video.js in your project by running `npm i video.js`. There are 1202 other projects in the npm registry using vide

www.npmjs.com

$ npm install --save-dev video.js

 

터미널에서 명령어로 설치를 해줍니다. 위에 형태는 node가 설치가 되어있고 npm이 환경변수로 세팅되고나서 사용가능합니다.

 

## 자바스크립트 파일 index.js
import "./styles.css";
import videojs from "video.js";
const options = {};

const player = videojs("my-player", options, function onPlayerReady() {
  videojs.log("Your player is ready!");

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  // How about an event listener?
  this.on("ended", function () {
    videojs.log("Awww...over so soon?!");
  });
});
## HTML 파일
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>
    <!-- html5 -->
    <video
      id="my-player"
      class="video-js video-js-default vjs-default-skin"
      controls
      width="640"
      height="264"
      data-setup='{ "techOrder": ["html5"] }'
      poster="https://vjs.zencdn.net/v/oceans.png"
    >
      <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
      <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm" />
    </video>

    <script src="src/index.js" async></script>
  </body>
</html>

 

위에 소스에서 HTML 파일안에 index파일이 들어간 것을 볼 수 있습니다. 이렇게 해서 npm 방식으로 VideoJS를 적용 시킬 수 있습니다. (소스코드 링크 참조)

 

 

 

추가내용

 

Video.js Default Skin

This is the base skin of Video.js that can be modified to make custom skins. The great thing about Video.js skins is they work in both HTML5 video AND...

codepen.io

 

Module: dom-data

Type anything to view search result

docs.videojs.com

 

Video.js Plugins

List of plugins for Video.js.

videojs.com

 

이처럼 VideoJS를 적용하는 방법과 다른 부가 설명을 해보았는데요?

VidoeJS는 단순히 HLS와 DASH를 뿌리는걸로 사용하는것이 아니라 다양한 옵션과 플러그인이 있기때문에 거기에 맞게 사용하고싶으신 분들은 한번쯤 사용해보시는것을 추천드립니다. 위에 링크를 잘이용하시기 바랍니다.