VideoJS 로 웹페이지에서 동영상 플레이어 사용하기
소스코드는 굉장히 단순합니다.
아래 옵션중 vjs-big-play-centered 는 플레이 버튼을 중앙에 두며, 미설정시 좌측 상단에 버튼이 위치합니다.
스마트폰에서 재생 버튼이 느리게 동작되어 영상을 다운로드 후 재생하는 듯 보인다면 웹서버에 H.264 모듈을 설치하여 스트리밍이 가능합니다.
<head>
<meta charset="UTF-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>
</head>
<body>
<video id="my-video"
class="video-js vjs-big-play-centered"
controls
preload="auto"
width="320"
height="180"
data-setup='{
"autoplay": true
}'>
<source src="The.mkv" type='video/mp4'>
<track kind="subtitles" src="The.vtt" srclang="ko" label="Korean" default />
</video>
</body>
* 참고 (SRT -> VTT 자막 변경 명령어)
아래 3가지만 고치면 되지만, 번거로우므로 명령어를 사용합니다.
- 시간 정보에 , (콤마) 대신 . (점)
- 자막 순번 제거
- 맨 위에 WEBVTT 라고 명시
# ffmpeg -i The.srt The.vtt
'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글
| script 를 이용한 안내 창 (Alert) 커스텀하여 출력하기 (0) | 2024.05.28 |
|---|---|
| td 에서 두가지 배경색 사용하기 (0) | 2021.07.21 |
| [JavaScript] checkbox 선택시 바로 이벤트 발생 (0) | 2021.07.15 |
| JavaScript 에서 refresh 없이 PHP 파일 실행하기 (0) | 2021.07.01 |
| [html] 깜빡이는 글자, 이미지 예제 (0) | 2021.06.30 |
