web
Video.js
blackbearwow
2024. 9. 1. 01:23
HTML video 태그 플레이어를 꾸미는 프레임워크이다.
1. CDN으로 설치
<head>
<link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
</head>
<body>
<video-js id="myVideo" data-setup='{"fluid": true, "controls":true, "playbackRates":[0.5,1,1.5,2]}'>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video-js>
<script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
</body><head>태그에 link를 삽입하고 <body>태그가 끝나기 전에 script를 삽입한다.
2. 옵션
data-setup='{}'에 다양한 옵션을 전달할 수 있다(반드시 작은 따옴표로 감싸준다). 각 옵션의 key는 반드시 큰따옴표(")로 감싸주어야 한다. 또한 js로 조종할 때, 사용되기도 한다.
| 이름 | 값 | 설명 |
| autoplay | boolean(true, false) | 자동으로 동영상이 재생될지말지 |
| controls | boolean | 유저가 상호작용할 수 있는 컨트롤을 플레이어가 가질지 말지 |
| height | string|number | 비디오 플레이어 높이를 pixel단위로 |
| width | string|number | 비디오 플레이어 가로를 pixel단위로 |
| fluid | boolean | 비디오 플레이어를 유동적인 사이즈로 만든다 |
| loop | boolean | 비디오가 끝났을 때 다시 시작할지 |
| muted | boolean | 오디오가 기본적으로 소리가 없을지 말지 |
| poster | string | 비디오가 플레이되기 전에 화면에 보일 이미지의 URL |
| preload | 'auto'|'metadata'|'none' | video요소가 로드되었을때 브라우저가 비디오 데이터를 다운할지 말지 |
| src | string | 비디오 소스 URL |
| playbackRates | Array([0.5,1,1.5,2]) | 비디오 재생 속도 |
| plugins | Object | 플러그인 커스텀 옵션을 초기화한다. |
옵션 레퍼런스: https://videojs.com/guides/options/
3. 플러그인
플러그인 레퍼런스: https://videojs.com/plugins/
4. API
api 레퍼런스: https://docs.videojs.com/
-