브라우저에서 m3u8 확장자를 가진 영상을 재생하기 > 기술자료

• 목록

HTML5에서는 VIDEO / AUDIO의 기능이 매우 폭넓게 확장되었습니다.
그런데 크롬 및 기타 브라우저에서 m3u8 확장자를 가진 영상을 재생할 경우 플레이되지 않을 수 있습니다.
이는 해당 디바이스 및 OS에서 지원하지 않기 때문입니다.


1. hls.js 사용하는 방법
정상작동 :  Chrome  /  FireFox  /  Opera  /  Edge
조건작동 :  IE11 : flash player가 최신버전이 아닌 경우 작동 안하기도 합니다.
동작안함 :  iPhone  /  IE6,7,8,9,10
데모보기 : https://www.happyjung.com/demo/m3u8/hls.php

<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('https://video-dev.github.io/streams/x36xhzz/x36xhzz.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 = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'; // 동영상경로
    video.addEventListener('canplay',function() {
        video.play();
    });
}
</script>

참고자료
https://webisfree.com/2017-04-25/비디오-재생하기-위한-방법으로-hls-js-사용하기
https://github.com/video-dev/hls.js


2. videojs-contrib-hls.js 사용하는 방법
정상작동 :  Chrome  /  FireFox  /  Opera  /  Edge  /  iPhone
조건작동 : IE11 : flash player가 최신버전이 아닌 경우 작동 안하기도 합니다.
데모 보기 : https://www.happyjung.com/demo/m3u8/videojs.php

<link href="videojs/video-js.css" rel="stylesheet">
<script src="videojs/video.js"></script>
<script src="videojs/videojs-flash.js"></script>
<script src="videojs/videojs-contrib-hls.js"></script>
<script>
    var player = videojs('hlsPlayEx');
    player.play();
</script>
<?php
if($mobile) { // mobile 일때
?>
    <div>
        <video id="example_video_1" class="video-js vjs-default-skin" controls autoplay width="300" height="200" data-setup='{}'>
            <source src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" type="application/x-mpegURL">
        </video>
    </div>
    <div>
        동영상 설명을 적습니다.
    </div>
<?php
} else { // pc 일때
?>
    <div style="float:left; width:600px; height:340px;">
        <video id="example_video_1" class="video-js vjs-default-skin" controls autoplay width="592" height="340" data-setup='{}'>
            <source src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" type="application/x-mpegURL">
        </video>
    </div>
    <div style="float:right; width:335px; height:338px; padding:1px 0 1px 10px; background-color:#FFF; vertical-align:central">
        <div style="height:250px;">동영상 설명을 적습니다.</div>
        <div style="height:80px;">
            <div><img src="img/icon_ie.png" style="width:30px;" alt="인터넷 익스플로러" title="인터넷 익스플로러"> 에서 영상이 안보이는 경우에는</div>
            <div style="padding:3px 0;">
                <a href="https://www.microsoft.com/ko-kr/windows/microsoft-edge" target="_blank"><img src="videojs/icon_edge.png" style="width:30px;" alt="엣지"></a> 
                <a href="https://www.google.co.kr/chrome/" target="_blank"><img src="videojs/icon_chrome.png" style="width:30px;" alt="크롬"></a> 
                <a href="https://www.opera.com/ko" target="_blank"><img src="videojs/icon_opera.png" style="width:30px;" alt="오페라"></a>
                <a href="https://www.mozilla.org/ko/firefox/new/" target="_blank"><img src="videojs/icon_firefox.png" style="width:30px;" alt="파이어폭스"></a>
                <a href="https://www.apple.com/kr/safari/" target="_blank"><img src="videojs/icon_safari.png" style="width:30px;" alt="사파리"></a> 를 이용해주세요
            </div>
            <div style="padding-top:5px;">아이콘을 클릭하면 다운로드 사이트로 연결됩니다.</div>
        </div>
    </div>
    <div style="clear:both;"></div>
<?php
}
?>

참고자료
http://aljjabaegi.tistory.com/240
https://github.com/videojs