현생살며 토이플젝

videoJS를 이용한 서버 영상 재생

sichan-dev 2021. 7. 11. 22:42

AWS S3 영상을 재생하는 기능의 요구사항이 생겼다.

JSP의<video> 태그에 videoJS를 써서 버킷에 있는 파일을 불러올 수 있다. 또 다양한 옵션을 제공한다.

공식 레퍼런스 : https://docs.videojs.com/module-videojs-videojs.html

 

Namespace: videojs | Video.js Documentation

A safe getComputedStyle. This is needed because in Firefox, if the player is loaded in an iframe with display:none, then getComputedStyle returns null, so, we do a null-check to make sure that the player doesn't break in these cases.

docs.videojs.com

 

< 구현 >

1. 필요한 라이브러리들을 jsp에 가져온다.

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video-js.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-thumbnails/0.1.1/videojs.thumbnails.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.8.1/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-thumbnails/0.1.1/videojs.thumbnails.min.js"></script> <%--재생바 썸네일 적용--%>
<script src="https://github.com/videojs/http-streaming/releases/download/v2.9.1/videojs-http-streaming.js"></script>

<%-- 영상을 띄울 <video> 태그 설정 --%>
<body>
<div class="col-md-12">
        <video id="demoVideo" class="video-js vjs-big-play-button vjs-big-play-centered" width="640" height="360" webkit-playsinline></video>
</div>
</body>

 

2. <video> 태그에 적용될 영상에 대한 설정을 해준다. 설정값 변수는 json 형태로 넣어준다.

function setVideoOptions(videoURL, videoFileType, resolution, thumbnailURL){
    var videoOptions =
        {
        sources : [
                    {
                    src : videoURL
                    , type : videoFileType 
                    , label : resolution // 해상도 720p, 480p, 360p
                    }
                ] //동영상의 경로. 영상 타입 설정
            , poster : thumbnailURL //썸네일의 경로
            , controls : true //동영상 제어를 위한 컨트롤 바 제공 여부
            , playsinline : true // 웹 브라우저 환경의 재생 형태
            , muted : false //최초 재생시 무음인지
            , preload : "auto" //비디오 데이터를 즉시 다운로드 시작할 지 여부
            , playbackRates: [.5, .75, 1, 1.25, 1.5] //재생 속도
            , controlBar :
                {
                    playToggle : true //재생, 일지정지 토글
                    , pictureInPictureToggle : true //pip모드
                    , remainingTimeDisplay : true //남은 시간 표시
                    , progressControl : true //재생 진행바
                    , qualitySelector : true //품질 선택 창
                }
            , notSupportedMessage : "ERROR"
        };
    return videoOptions;
}

 

3. 적용

<script>
    // 영상 재생 파라미터
    var videoUrl = "영상 URL";
    var videoFileType = "영상 파일 타입";
    var resolution = "720p";
    var thumbnailUrl = "썸네일 파일 URL";
         
    var options = setVideoOptions(videoUrl, videoFileType, resolution, thumbnailUrl);  
    var player = videojs("demoVideo", options); // videojs( video태그, options ) 이 부분 설정 완료 시 영상이 페이지에 렌더링됨.
</script>

 

4. 영상의 파일 타입이 m3u8인 경우는 이렇게!!

var videoFileType = "application/x-mpegURL";

 

유튜브처럼 영상 재생바에 커서를 올릴 때, 썸네일을 보여주고 싶다면?

https://cdnjs.com/libraries/videojs-thumbnails

video.thumbnails({
  0: { // 영상의 구간 (초/sec)
    src: 'http://example.com/thumbnail1.png', // 0초 때 썸네일 파일 url
    width: '120px' 
  },
  5: {
    src: 'http://example.com/thumbnail2.png'
  }
});