Video.js 는 오픈소스 HTML5 비디오 플레이어입니다.
Video.js - Make your player yours
Make your player yours with the internet's most popular open source video player framework
videojs.com
오늘은 Video.js 를 사용해서 동영상을 재생하고 오디오/비디오 토글기능 및 재생속도 변경기능을 구현해보겠습니다.
다음은 전체 시연 영상입니다.
먼저 <head> 태그 안에 아래의 코드를 작성합니다.
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>
그리고 <body> 태그 안에 아래 코드를 작성합니다.
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="854"
height="480"
poster="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
data-setup="{}"
>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video><video> 요소는 재생될 영상을 담을 컨테이너 역할을 한다고 보면 될 것 같습니다.
id 는 "my-video"로 설정했습니다.
seekbar, 재생/일시정지 버튼 등등의 컨트롤러를 표시할지, 가로길이, 세로길이 설정, loop을 할지 말지 등등의 옵션들을 작성하는 방법은 여러가지가 있습니다. 위의 코드에서는 <video> 의 속성의 형태로 작성해줬는데요,
https://videojs.com/guides/setup/
Video.js Guides
Make your player yours with the internet's most popular open source video player framework
videojs.com
Video.js 의 가이드를 보면
<video controls autoplay preload="auto" ...>이런식으로 작성할 수도 있고
<video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>이런식으로도 작성할 수 있다고 합니다. 더 자세한 내용은 가이드 참고하시면 좋을 것 같습니다.
그리고 동영상 샘플은 https://jinha3211.tistory.com/28 이곳에서 참고했습니다.
여기까지 하시면 동영상이 재생될 것입니다.
이번에는 비디오가 재생, 일시정지, 정지되었을 때 로그를 찍어보겠습니다.
<script>
const video = document.getElementById('my-video');
video.addEventListener('play', (event) => {
console.log('play');
});
video.addEventListener('pause', (event) => {
console.log('pause');
});
video.addEventListener('ended', (event) => {
console.log('ended');
});
</script>id 값이 'my-video' 인 요소를 찾아서 이벤트 리스너를 달아주었습니다.
그리고 영상 없이 오디오만 재생하는 기능을 추가해보겠습니다.
먼저 <video> 태그 밑에 아래의 코드를 추가해주세요.
<div style="margin-top: 20px;">
<button id="audio-only-btn" style="margin-right: 10px;">오디오만 재생</button>
</div>
<div style="margin-top: 30px;">
<p>재생속도: <span id="playback-speed">1</span></p>
<div style="display: flex;">
<button id="speed-0.25-btn" style="margin-right: 10px;">0.25</button>
<button id="speed-0.5-btn" style="margin-right: 10px;">0.5</button>
<button id="speed-0.75-btn" style="margin-right: 10px;">0.75</button>
<button id="speed-normal-btn" style="margin-right: 10px;">1(기본)</button>
<button id="speed-1.25-btn" style="margin-right: 10px;">1.25</button>
<button id="speed-1.5-btn" style="margin-right: 10px;">1.5</button>
<button id="speed-1.75-btn" style="margin-right: 10px;">1.75</button>
<button id="speed-2-btn" style="margin-right: 10px;">2</button>
</div>
</div>
그리고 <script> 태그 안에 아래의 코드를 추가합니다.
const player = videojs('my-video');
const audioOnlyBtn = document.getElementById("audio-only-btn");
audioOnlyBtn.addEventListener('click', function handleClick() {
console.log('audio-only-btn-click');
console.log('player.audioOnlyMode(): ' + player.audioOnlyMode());
// 오디오만 재생 모드가 true 일 경우
if (player.audioOnlyMode()) {
player.audioOnlyMode(false); // 오디오만 재생 모드를 false 로 바꾸고
audioOnlyBtn.textContent = '오디오만 재생'; // 버튼 이름 변경
} else {
player.audioOnlyMode(true); // 오디오만 재생 모드를 true 로 바꾸고
audioOnlyBtn.textContent = '비디오도 재생'; // 버튼 이름 변경
}
});
이번에는 재생속도를 변경해보겠습니다.
// 재생속도를 표시하는 <span> 요소
const speed = document.getElementById('playback-speed');
// 재생속도를 0.25로 바꾸는 버튼
const speedBtn1 = document.getElementById("speed-0.25-btn");
speedBtn1.addEventListener('click', function handleClick() { // 버튼에 클릭 리스너 달기
console.log('speed-0.25-btn-click');
video.playbackRate = 0.25; // 영상의 재생속도 변경
speed.innerHTML = '0.25'; // 재생속도 html에 표시
});
// 재생속도를 0.5로 바꾸는 버튼
const speedBtn2 = document.getElementById("speed-0.5-btn");
speedBtn2.addEventListener('click', function handleClick() {
console.log('speed-0.5-btn-click');
video.playbackRate = 0.5;
speed.innerHTML = '0.5';
});
// 재생속도를 0.75로 바꾸는 버튼
const speedBtn3 = document.getElementById("speed-0.75-btn");
speedBtn3.addEventListener('click', function handleClick() {
console.log('speed-0.75-btn-click');
video.playbackRate = 0.75;
speed.innerHTML = '0.75';
});
// 재생속도를 기본(1)으로 설정하는 버튼
const speedBtn4 = document.getElementById("speed-normal-btn");
speedBtn4.addEventListener('click', function handleClick() {
console.log('speed-normal-btn-click');
video.playbackRate = 1;
speed.innerHTML = '1';
});
// 재생속도를 1.25로 바꾸는 버튼
const speedBtn5 = document.getElementById("speed-1.25-btn");
speedBtn5.addEventListener('click', function handleClick() {
console.log('speed-1.25-btn-click');
video.playbackRate = 1.25;
speed.innerHTML = '1.25';
});
// 재생속도를 1.5로 바꾸는 버튼
const speedBtn6 = document.getElementById("speed-1.5-btn");
speedBtn6.addEventListener('click', function handleClick() {
console.log('speed-1.5-btn-click');
video.playbackRate = 1.5;
speed.innerHTML = '1.5';
});
// 재생속도를 1.75로 바꾸는 버튼
const speedBtn7 = document.getElementById("speed-1.75-btn");
speedBtn7.addEventListener('click', function handleClick() {
console.log('speed-1.75-btn-click');
video.playbackRate = 1.75;
speed.innerHTML = '1.75';
});
// 재생속도를 2로 바꾸는 버튼
const speedBtn8 = document.getElementById("speed-2-btn");
speedBtn8.addEventListener('click', function handleClick() {
console.log('speed-2-btn-click');
video.playbackRate = 2;
speed.innerHTML = '2';
});
다음은 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>videojs</title>
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
</head>
<body>
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="854"
height="480"
poster="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
data-setup="{}"
>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<div style="margin-top: 20px;">
<button id="audio-only-btn" style="margin-right: 10px;">오디오만 재생</button>
</div>
<div style="margin-top: 30px;">
<p>재생속도: <span id="playback-speed">1</span></p>
<div style="display: flex;">
<button id="speed-0.25-btn" style="margin-right: 10px;">0.25</button>
<button id="speed-0.5-btn" style="margin-right: 10px;">0.5</button>
<button id="speed-0.75-btn" style="margin-right: 10px;">0.75</button>
<button id="speed-normal-btn" style="margin-right: 10px;">1(기본)</button>
<button id="speed-1.25-btn" style="margin-right: 10px;">1.25</button>
<button id="speed-1.5-btn" style="margin-right: 10px;">1.5</button>
<button id="speed-1.75-btn" style="margin-right: 10px;">1.75</button>
<button id="speed-2-btn" style="margin-right: 10px;">2</button>
</div>
</div>
<script>
const video = document.getElementById('my-video');
video.addEventListener('play', (event) => {
console.log('play');
});
video.addEventListener('pause', (event) => {
console.log('pause');
});
video.addEventListener('ended', (event) => {
console.log('ended');
});
const player = videojs('my-video');
const audioOnlyBtn = document.getElementById("audio-only-btn");
audioOnlyBtn.addEventListener('click', function handleClick() {
console.log('audio-only-btn-click');
console.log('player.audioOnlyMode(): ' + player.audioOnlyMode());
// 오디오만 재생 모드가 true 일 경우
if (player.audioOnlyMode()) {
player.audioOnlyMode(false); // 오디오만 재생 모드를 false 로 바꾸고
audioOnlyBtn.textContent = '오디오만 재생'; // 버튼 이름 변경
} else {
player.audioOnlyMode(true); // 오디오만 재생 모드를 true 로 바꾸고
audioOnlyBtn.textContent = '비디오도 재생'; // 버튼 이름 변경
}
});
// 재생속도를 표시하는 <span> 요소
const speed = document.getElementById('playback-speed');
// 재생속도를 0.25로 바꾸는 버튼
const speedBtn1 = document.getElementById("speed-0.25-btn");
speedBtn1.addEventListener('click', function handleClick() { // 버튼에 클릭 리스너 달기
console.log('speed-0.25-btn-click');
video.playbackRate = 0.25; // 영상의 재생속도 변경
speed.innerHTML = '0.25'; // 재생속도 html에 표시
});
// 재생속도를 0.5로 바꾸는 버튼
const speedBtn2 = document.getElementById("speed-0.5-btn");
speedBtn2.addEventListener('click', function handleClick() {
console.log('speed-0.5-btn-click');
video.playbackRate = 0.5;
speed.innerHTML = '0.5';
});
// 재생속도를 0.75로 바꾸는 버튼
const speedBtn3 = document.getElementById("speed-0.75-btn");
speedBtn3.addEventListener('click', function handleClick() {
console.log('speed-0.75-btn-click');
video.playbackRate = 0.75;
speed.innerHTML = '0.75';
});
// 재생속도를 기본(1)으로 설정하는 버튼
const speedBtn4 = document.getElementById("speed-normal-btn");
speedBtn4.addEventListener('click', function handleClick() {
console.log('speed-normal-btn-click');
video.playbackRate = 1;
speed.innerHTML = '1';
});
// 재생속도를 1.25로 바꾸는 버튼
const speedBtn5 = document.getElementById("speed-1.25-btn");
speedBtn5.addEventListener('click', function handleClick() {
console.log('speed-1.25-btn-click');
video.playbackRate = 1.25;
speed.innerHTML = '1.25';
});
// 재생속도를 1.5로 바꾸는 버튼
const speedBtn6 = document.getElementById("speed-1.5-btn");
speedBtn6.addEventListener('click', function handleClick() {
console.log('speed-1.5-btn-click');
video.playbackRate = 1.5;
speed.innerHTML = '1.5';
});
// 재생속도를 1.75로 바꾸는 버튼
const speedBtn7 = document.getElementById("speed-1.75-btn");
speedBtn7.addEventListener('click', function handleClick() {
console.log('speed-1.75-btn-click');
video.playbackRate = 1.75;
speed.innerHTML = '1.75';
});
// 재생속도를 2로 바꾸는 버튼
const speedBtn8 = document.getElementById("speed-2-btn");
speedBtn8.addEventListener('click', function handleClick() {
console.log('speed-2-btn-click');
video.playbackRate = 2;
speed.innerHTML = '2';
});
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] Full-calendar 커스텀하기 (0) | 2022.07.01 |
|---|---|
| [javascript] 모달창의 외부를 클릭하면 모달창이 안 보이게 하기 (0) | 2022.06.24 |
| [Javascript] filter 함수 사용하기 (0) | 2022.06.21 |
| [JavaScript] Full-calendar 사용하기 (0) | 2022.06.16 |
| [Javascript] 토글버튼으로 웹 배경 바꾸기 (0) | 2022.06.09 |
