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

본문 바로가기
사이트 내 전체검색

기술자료

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

페이지 정보

댓글 0건 조회 4,998회 작성일 2018-03-08 19:40 ~ 2018-03-11 23:33

본문

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


1. hls.js 사용하는 방법
정상작동 :  Chrome  /  FireFox  /  Opera  /  Edge
조건작동 :  IE11 : flash player가 최신버전이 아닌 경우 작동 안하기도 합니다.
동작안함 :  iPhone  /  IE6,7,8,9,10
데모보기 : http://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가 최신버전이 아닌 경우 작동 안하기도 합니다.
데모 보기 : http://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
 
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

첨부파일

  • hls.zip (60.7K) 79회 다운로드 | DATE : 2018-03-11 23:33:54
  • videojs.zip (368.0K) 49회 다운로드 | DATE : 2018-03-11 23:32:19

댓글목록

등록된 댓글이 없습니다.


Total 2,300건 1 페이지
기술자료 목록
번호 제목
공지 일반   16619  2001-08-31 11:52 ~ 2017-12-05 16:33  
2299 PHP   27  2018-12-12 03:04 ~ 2018-12-14 20:04  
2298 MySQL   26  2018-12-11 14:36 ~ 2018-12-11 14:52  
2297 그누보드   30  2018-12-09 12:19  
2296 테크노트   67  2018-12-05 19:37 ~ 2018-12-06 15:43  
2295 킴스큐   68  2018-12-04 13:47  
2294 PHP   67  2018-12-03 17:34 ~ 2018-12-03 19:03  
2293 영카트   196  2018-11-28 10:37 ~ 2018-11-30 02:33  
2292 그누보드   115  2018-11-22 12:13  
2291 MySQL   169  2018-11-22 05:24 ~ 2018-11-22 05:27  
2290 HTML   152  2018-11-16 12:11 ~ 2018-11-16 12:17  
2289 Linux   153  2018-11-13 00:15 ~ 2018-11-15 05:37  
2288 그누보드   248  2018-11-09 06:32 ~ 2018-11-17 13:46  
2287 그누보드   266  2018-11-01 18:50 ~ 2018-11-01 19:01  
2286 영카트   227  2018-10-31 05:44 ~ 2018-10-31 05:47  
2285 그누보드   205  2018-10-30 15:47  
2284 그누보드   252  2018-10-22 09:58  
2283 HTML   315  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   301  2018-10-04 23:04  
2281 MySQL   333  2018-10-03 02:29  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
14
어제
2,783
최대
3,306
전체
4,464,377

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.