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

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

기술자료

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

페이지 정보

댓글 0건 조회 1,965회 수정일 18-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) 43회 다운로드 | DATE : 2018-03-11 23:33:54
  • videojs.zip (368.0K) 14회 다운로드 | DATE : 2018-03-11 23:32:19

댓글목록

등록된 댓글이 없습니다.


Total 2,244건 1 페이지
기술자료 목록
번호 제목
공지 일반
온라인 강좌를 소개합니다. ( update. 2017-12-05 16:33 ) Hit.16060
2243 HTML
2242 일반
2241 그누보드
2240 Linux
2239 제로보드
[XpressEngine] files 폴더의 비밀 ( update. 2018-07-13 21:51 ) Hit.20
2238 MySQL
2237 JavaScript
[jQuery] Magnific Popup ( write. 2018-07-12 ) Hit.41
2236 일반
전자책 읽기에 최적화된 무료 EPUB 뷰어 ( update. 2018-07-11 17:27 ) Hit.48
2235 HTML
2234 HTML
2233 그누보드
ZeroBoard 4를 그누보드 5 로 변경 ( update. 2018-07-02 21:40 ) Hit.80
2232 Search
Bing (빙) 웹마스터도구 사이트 등록하기 ( update. 2018-07-01 02:41 ) Hit.108
2231 일반
IU 노래 181곡을 Youtube에서 연속듣기 ( update. 2018-07-04 23:09 ) Hit.118
2230 그누보드
2229 그누보드
XE -> 그누보드5 변경 v7 ( update. 2018-06-12 13:13 ) Hit.237
2228 제로보드
2227 호스팅
무료 호스팅을 제공하는 업체 ( update. 2018-06-12 03:53 ) Hit.182
2226 제로보드
[XpressEngine] 버전 확인하기 ( write. 2018-06-11 ) Hit.149
2225 제로보드
2224 호스팅
let's encrypt 지원하는 호스팅 ( write. 2018-06-07 ) Hit.162
2223 그누보드
2222 영카트
네이버 페이를 영카트에 적용하기 ( update. 2018-06-05 21:36 ) Hit.187
2221 XML
2220 일반
게시물 검색

회원로그인

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

접속자집계

오늘
40
어제
2,846
최대
3,174
전체
4,125,081

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