-
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/
-
'web' 카테고리의 다른 글
localStorage, sessionStorage, indexedDB (0) 2024.07.20 canvas 프레임(fps) 측정하기, 보장하기 (0) 2024.06.04 브라우저 렌더링 (0) 2024.05.13 Chrome DevTools (크롬 개발자도구) (0) 2024.03.28 audio + input range type + 소리 조절 (0) 2022.05.28