1. hls.js 방법
- 정상작동 : Chrome / FireFox / Opera / Edge
- 조건작동 : IE11 : flash player가 최신버전이 아닌 경우 작동 안하기도 함.
- 동작안함 : iPhone / IE6,7,8,9,10
- 재생특징 : 플레이어 제어수단 없음.
- 재생특징 : 플레이어 제어수단 없음. 풀사이즈로 자동 재생.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<title>브라우저에서 m3u8 확장자를 가진 영상을 재생하기</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://59.8.86.15:1935/live/52.stream/playlist.m3u8'); // 동영상경로
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://59.8.86.15:1935/live/52.stream/playlist.m3u8'; // 동영상경로
video.addEventListener('canplay',function() {
video.play();
});
}
</script>
</html>
2. videojs-contrib-hls.js 방법 ★
- 정상작동 : Chrome / FireFox / Opera / Edge / iPhone
- 조건작동 : IE11 : flash player가 최신버전이 아닌 경우 작동 안하기도 함.
- 재생특징 : 플레이어 제어수단 없음. 풀사이즈로 자동 재생.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">
<title>브라우저에서 m3u8 확장자를 가진 영상을 재생하기</title>
</head>
<body>
<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>
<script src="videojs-flash.js"></script>
<script src="videojs-contrib-hls.js"></script>
<script>
var player = videojs('hlsPlayEx');
player.play();
</script>
<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay width="500" height="300" data-setup="{}">
<source src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" type="application/x-mpegURL">
</video>
</html>
해피정 님 http://www.happyjung.com/lecture/2671
