javascript 를 이용한 <video>태그를 쓰는 것중에 유명한 것으로 video.js 가 있는데 홈페이지는 여기를 참조.
Video.js - Make your player yours
Make your player yours with the internet's most popular open source video player framework
videojs.com
사용법은 간단하다. html 태그에 직접 쓰는 방법과 javascript 를 통해 옵션을 넣어 하는 방법. 개인적으로는 다양한 옵션을 건드려야 하므로 javascript 에서 처리하는걸 추천한다.
그리고 속도조절, 진행바 표시 등은 기본에 포함되지만 품질조절은 plugin 을 이용해야 한다. video.js 와 같이 쓸 수 있는 Plugin 또는 Skin 을 모아둔 사이트가 있는다 해당 URL을 아래 공유해둔다.
plugins/index - Video.js: The Player Framework
Make your player yours with the internet's most popular open source video player framework
videojs.com
위 플러그인 소개중 내가 쓴 것은@silvermine/videojs-quality-selector 인데 다른거 써보다 안되서 쓰기도 하지만 2가지가 좋았다. 그 이유는
1) CDN 지원
2) 직관적인 옵션 설정
주소는 아래 공유.
https://github.com/silvermine/videojs-quality-selector#readme
silvermine/videojs-quality-selector
Contribute to silvermine/videojs-quality-selector development by creating an account on GitHub.
github.com
그리고 내가 시도했을 때 안되었던 것 목록을 여기 공유.(나만 안되는 것일 수 있음)
- videojs-hls-quality-selector
- videojs-contrib-quality-levels
그럼 옵션 설정 방법을 알아보자.
아래는 CDN으로 하는 방법으로 head 에 다음을 추가했다
...
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
</head>
...
npm 으로 설치 및 require로 등록도 가능한데 다음처럼 하면 된다.
npm install --save @silvermine/videojs-quality-selector
사용법
var videojs = require('videojs');
// The following registers the plugin with `videojs`
require('@silvermine/videojs-quality-selector')(videojs);
설정하는 방법은 2가지가 있는데 html 태그에다 직접 설정하는 방법, 그리고 javascript를 이용해 설정하는 방법이다.
우선 html로 하는 방법을 알아보자.
다음 방법으로 설정하면 된다.
<video id="video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<source src="https://example.com/video_720.mp4" type="video/mp4" label="720P">
<source src="https://example.com/video_480.mp4" type="video/mp4" label="480P" selected="true">
<source src="https://example.com/video_360.mp4" type="video/mp4" label="360P">
</video>
label 로 지정한 것이 화면에서 다음과 같이 표시된다. 그리고 selected="true"는 처음 오픈 시 해당 옵션을 우선 선택한다.
다음 방법으로는 자바스크립트에서 설정하는 방법이다. 우선 html에 다음과 같이 설정한다.
<video id="myVideo" class="video-js vjs-default-skin">
</video>자바스크립트에서 다음 옵션을 준다.
<script>
$(document).ready(function() {
let options = {
sources: [
{src: "/video/play", type: "video/mp4"}
],
playbackRates: [.5, .75, 1, 1.25, 1.5],
poster: "[이미지 주소 등록]",
controls: true,
preload: "auto",
width: 540,
height: 320,
controlBar: {
playToggle: false,
pictureInPictureToggle: false,
remainingTimeDisplay: true,
progressControl: false,
qualitySelector: true,
}
};
var player = videojs('myVideo', options);
player.src([
{
src: '/video/play/720',
type: 'video/mp4',
label: '720P',
},
{
src: '/video/play/480',
type: 'video/mp4',
label: '480P',
selected: true,
},
{
src: '/video/play/360',
type: 'video/mp4',
label: '360P',
},
]);
})
</script>player.src 에 배열을 넣어 설정하는게 좋았다. 그리고 src는 각각 품질에 따라 도메인 연결을 분리하면 된다.
참고로 html에 video-js vjs-default-skin 를 class 안에 넣지 않으면 디자인이 먹지 않아 다음처럼 보여진다.
Quality Selector 를 클릭할때마다 서버에서 각각 호출되는 것을 확인할 수 있었다.
그 밖에 옵션에 추가설명
- playbackRates: 플레이 속도 조절 (배열로 지정, 위에 샘플 있음)
- poster: 썸네일 보일 이미지
- controls: 컨트롤 보일지 여부
- preload: 즉시 비디오 데이터를 다운로드 시작할지 여부 결정
- width, height: 너비, 높이. 따로 지정하지 않으면 1280, 720 크기만큼 분배(품질과 관계없음)
- controlBar: 컨트롤 바에 들어갈 옵션 설정
--- playToggle: 플레이 버튼
--- pictureInPictureToggle: 작은 창으로 새로 띄워(항상 위) 비디오 시청 가능
--- remainingTimeDisplay: 남은시간 표기
--- progressControl: 프로세스 컨트롤러 유무
--- qualitySelector: 품질선택 창
끝.
'공부 > 프로그래밍' 카테고리의 다른 글
| [react, next.js, redux] material-ui 를 이용해 다크테마 적용하기(Layout.js 적용) (0) | 2021.04.01 |
|---|---|
| [react] wrapper.getServerSideProps 의 문제점(store 값 초기화 문제) (0) | 2021.03.30 |
| [aws] s3 폴더 내 파일 public-read 권한 주기(aws cli 이용) (0) | 2021.03.24 |
| [react, redux, next, typescript] 프로젝트 만들때 최소 설정하는 것 정리 (0) | 2021.03.22 |
| [react, material-ui] material-ui style 사용중 SSR 에러 발생(Prop `className` did not match. Server) (0) | 2021.03.19 |
댓글