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

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

기술자료

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

페이지 정보

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

댓글목록

등록된 댓글이 없습니다.


Total 2,231건 1 페이지
기술자료 목록
번호 제목
공지 일반
온라인 강좌를 소개합니다. ( update. 2017-12-05 16:33 ) Hit.16013
2230 그누보드
2229 그누보드
XE -> 그누보드5 변경 v7 ( update. 2018-06-12 13:13 ) Hit.124
2228 제로보드
2227 호스팅
무료 호스팅을 제공하는 업체 ( update. 2018-06-12 03:53 ) Hit.100
2226 제로보드
[XpressEngine] 버전 확인하기 ( write. 2018-06-11 ) Hit.80
2225 제로보드
2224 호스팅
let's encrypt 지원하는 호스팅 ( write. 2018-06-07 ) Hit.111
2223 그누보드
2222 영카트
네이버 페이를 영카트에 적용하기 ( update. 2018-06-05 21:36 ) Hit.123
2221 etc언어
[XML] TypeError: Failed to construct 'URL': Invalid URL ( update. 2018-06-05 14:15 ) Hit.109
2220 일반
2219 그누보드
2218 그누보드
2217 그누보드
[G5] XpressEngine 와 그누보드5 테이블 비교 ( update. 2018-05-25 14:05 ) Hit.163
2216 일반
2215 Search
2214 제로보드
[XpressEngine] 설치 사양 ( update. 2018-05-23 18:50 ) Hit.159
2213 영카트
영카트 4 와 영카트 5 의 변경된 함수 ( update. 2018-05-22 00:40 ) Hit.151
2212 호스팅
[Daum] 스마트워크 발송자 이름 변경하기 ( update. 2018-05-17 10:41 ) Hit.180
2211 JavaScript
2210 도메인
국제도메인 삭제복구서비스 ( update. 2018-05-10 14:05 ) Hit.240
2209 MSSQL
getdate() 와 sysdatetime() ( write. 2018-05-09 ) Hit.206
2208 그누보드
[G5] 글 가장 위로 순서 변경하기 ( update. 2018-05-08 12:40 ) Hit.202
2207 호스팅
네임서버 정보 ( update. 2018-05-09 13:45 ) Hit.207
게시물 검색

회원로그인

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

접속자집계

오늘
64
어제
2,781
최대
3,174
전체
4,072,822

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