728x90
먼저 ffmpeg 프로그램으로 m3u8 파일과 ts 파일을 생성해줍니다.
ffmpeg -i test.mp4 -vcodec libx264
-start_number 0
-hls_time 10
-hls_list_size 0
-f hls
test.m3u8인코딩 옵션은 공식 홈페이지에서 확인할 수 있습니다.
http://ffmpeg.org/ffmpeg-all.html#hls-2
ffmpeg Documentation
ffmpeg.org
<!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>hls_test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.1/video-js.min.css"
integrity="sha512-D/n19dhr+LY8HOoGuybX+bJYsZOFKb0r7YpAWBMPg5Hnke6lxdHl6q21d7qiwIsMgdSnBG9pSMQlwTtZ+6ISmw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.1/video.min.js"
integrity="sha512-xT61DWoPRoAa4ir+LqER5L4/zzuO5tQOQywZYqU8BaZVqolq78bRobozDxozcCZ6tmo92zetGVQHRp+sQHIi/g=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<video id="my_video" class="video-js" controls width="800" height="500">
<source src="test.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my_video');
player.play();
</script>
</body>
</html>cdn으로 video.js 라이브러리를 참조하고
src="" 이 부분에 m3u8 파일의 경로를 적어줍니다.
결과
cdn은 이 사이트에서 복사할 수 있습니다.
https://cdnjs.com/libraries/video.js
video.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
An HTML5 and Flash video player with a common API and skin for both. - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month,
cdnjs.com
'JavaScript' 카테고리의 다른 글
| [ JavaScript ] 자바스크립트로 button과 textarea 활성화, 비활성화를 해보기 (0) | 2022.07.24 |
|---|---|
| [JavaScript] find 함수에 대해 알아보고 네이버지도 api 에서 사용해보기 (0) | 2022.07.21 |
| [javascript] 숫자 입력하면 전화번호 형식으로 표현해주기 (0) | 2022.07.10 |
| [ javascript ] history 객체를 사용하여 이전 페이지로 돌아가기 (0) | 2022.07.09 |
| [Javascript] 네이버 지도 api를 사용해서 지도 표시 및 마커 찍기 (2) | 2022.07.06 |