1 2 3 4 5 6 L

Page Header > Subtitle

[javascript] hls.js 및 데모

http://streambox.fr/mse/hls.js-0.8.4/demo/ 

 

 

 

Including hls.js library code from jsdelivr CDN

 

<script src="//cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> 

 

 

 

Adding div element with video as id with controls

<span>
<video id="video" controls></video>​

 

 

 

Play m3u8 playlist using hls.js library

 <script type="text/javascript">
      var video = document.getElementById("video");
      var videoSrcHls = "http://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.m3u8";
 
      if(Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrcHls);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
          video.play();
        });
      }
    </script>​ 

 

 

Added the fallback when user’s browser does not support HLS

 <script type="text/javascript">
      var video = document.getElementById("video");
      var videoSrcInHls = "http://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.m3u8";
      var videoSrcInMp4 = "http://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.mp4";
 
      if(Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrcInHls);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
          video.play();
        });
      }else{
        addSourceToVideo(video, videoSrcInMp4, 'video/mp4');
        video.play();
      }
 
      function addSourceToVideo(element, src, type) {
        var source = document.createElement('source');
        source.src = src;
        source.type = type;
        element.appendChild(source);
      }
    </script>​ 

 

 

 

Full code for playM3u8UsingHlsJs.html 

 <script src="//cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
    <video id="video" controls></video>
 
    <script type="text/javascript">
      var video = document.getElementById("video");
      var videoSrcInHls = "http://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.m3u8";
      var videoSrcInMp4 = "http://www.jenrenalcare.com/upload/poanchen.github.io/sample-code/2016/11/17/how-to-play-mp4-video-using-hls/sample.mp4";
 
      if(Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrcInHls);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
          video.play();
        });
      }else{
        addSourceToVideo(video, videoSrcInMp4, 'video/mp4');
        video.play();
      }
 
      function addSourceToVideo(element, src, type) {
        var source = document.createElement('source');
        source.src = src;
        source.type = type;
        element.appendChild(source);
      }
    </script>​ 

 

 

 

 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기
captcha
자동등록방지 숫자입력

JS/Node.js

번호 제목 글쓴이 날짜 조회수
39 javascript [javascript] async, await를 사용하여 비동기 javascript를 동기식으로 만들자 미도어묵 02-18 1,022
38 javascript JavaScript 합집합, 교집합, 차집합, 대칭차 미도어묵 11-23 1,270
37 javascript jQuery 플러그인 부트스트랩의 콤포넌트(modal) 미도어묵 10-04 1,132
36 javascript Javascript 숫자에 천단위로 콤마(,) 찍기 미도어묵 08-20 791
35 javascript 함수형 프로그래밍 - 함수형으로 전환 미도어묵 08-09 856
34 Node.js nodejs & api call example 미도어묵 06-25 815
33 javascript jQuery 핸드폰 번호 체크하기 미도어묵 06-25 844
32 Node.js Node.js 업그레이드 미도어묵 04-23 762
31 Node.js node.js cross 도메인 header 처리 미도어묵 03-12 804
30 javascript hls.js 및 데모 미도어묵 02-22 796
29 Node.js node.js memcached_guide 미도어묵 01-02 799
28 Node.js clustering node + socket.io + redis 사용법 미도어묵 09-29 1,597
27 javascript script sample 예제 관리자 09-20 818
26 Node.js 커넥션 연결 확인 관리자 09-01 755
25 javascript [문법] [TypeScript] Electron + Vue.js 예제 관리자 07-24 1,082
24 javascript 웹 풀스택 입문을 위한 약 500페이지 분량의 교재 관리자 07-11 904
23 javascript [TypeScript] 타입스크립트 기초 세미나 자료 관리자 06-10 877
22 javascript javascript 함수 지향 관리자 04-08 787
21 Node.js Node.js 로 웹 사이트 데이터 가져오기 관리자 04-06 826
20 Node.js [MongoDB] Application / Mongoose를 이용하여 간단한 채팅 프로그램 개발 관리자 03-30 878