-
videoJS를 이용한 서버 영상 재생현생살며 토이플젝 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' } });'현생살며 토이플젝' 카테고리의 다른 글
Mask-RCNN, Elasticsearch 의약품 식별 검색 반응형 웹 사이트 (0) 2020.03.25
