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

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

기술자료

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

페이지 정보

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

댓글목록

등록된 댓글이 없습니다.


Total 2,202건 1 페이지
기술자료 목록
번호 제목
공지 일반
온라인 강좌를 소개합니다. (up.2017-12-05 16:33) Hit.15818
2201 영카트
2200 영카트
2199 영카트
2198 그누보드
2197 영카트
2196 HTML
웹브라우저 언어설정 코드 (wr.2018-03-28) Hit.299
2195 ClassicASP
2194 그누보드
2193 HTML
2192 전자결제
[LG유플러스] [ASP] utf-8 사용하기 (up.2018-03-16 06:06) Hit.421
2191 ClassicASP
한글 깨짐 변환 (up.2018-03-16 04:56) Hit.403
2190 JavaScript
새로고침(F5) 금지 (wr.2018-03-15) Hit.420
2189 그누보드
[G4] 스팸게시글 한방에 삭제하기 (up.2018-03-23 15:54) Hit.445
2188 전자결제
[LG유플러스] [ASP] 오류 해결하기 (up.2018-03-16 04:57) Hit.482
2187 ClassicASP
열람중 HTML
2185 그누보드
2184 HTML
2183 일반
FileZilla 마스터 비밀번호 설정하기 (up.2018-02-25 03:34) Hit.752
2182 호스팅
[트리포드] 호스팅 연장하기 (wr.2018-02-23) Hit.651
2181 ClassicASP
2180 PHP
MySQL(MariaDB) 테이블 만들기 (wr.2018-02-22) Hit.745
2179 일반
YouTube 광고 안보기 (up.2018-03-02 01:00) Hit.819
2178 그누보드
게시물 검색

회원로그인

접속자집계

오늘
54
어제
1,731
최대
3,099
전체
3,918,421

회사명: 해피정닷컴   전화: 070-7600-3500   팩스: 02-865-3528
주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
사업자번호: 119-05-36414   대표: 정창용   개인정보보호책임자: 정창용
Copyright 2001-2018 해피정닷컴. All Rights Reserved.