• 회원가입
  • 로그인
  • 구글아이디로 로그인

[js] JS - m3u8 ★ (동영상재생 + 플레이어 다운 + 동영상다운로드 : 엠삼유팔 = 엠쓰리유팔 )

목차
  1. m3u8 플레이어 다운로드
  2. m3u8 샘플주소
  3. m3u8 플레이어 (재생)
  4. m38u 다운로드 ★

 

m3u8 플레이어 다운로드 

 

https://github.com/bharadwajpro/m3u8-player

 

 

m3u8 샘플주소

 

https://bitmovin-a.akamaihd.net/content/playhouse-vr/m3u8s/105560.m3u8

 

 

m3u8 플레이어 (재생)

1. hls.js 방법 

 

  • 정상작동 :  Chrome  /  FireFox  /  Opera  /  Edge
  • 조건작동 :  IE11 : flash player가 최신버전이 아닌 경우 작동 안하기도 함.
  • 동작안함 :  iPhone  /  IE6,7,8,9,10
  • 재생특징 :  플레이어 제어수단 없음. 
  • 재생특징 :  플레이어 제어수단 없음. 풀사이즈로 자동 재생.

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">

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

</head>


<body>

<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('http://59.8.86.15:1935/live/52.stream/playlist.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 = 'http://59.8.86.15:1935/live/52.stream/playlist.m3u8'; // 동영상경로

    video.addEventListener('canplay',function() {

        video.play();

    });

}

</script>


</html>

 


2. videojs-contrib-hls.js 방법 ★

 

  • 정상작동 :  Chrome  /  FireFox  /  Opera  /  Edge  /  iPhone
  • 조건작동 : IE11 : flash player가 최신버전이 아닌 경우 작동 안하기도 함. 
  • 재생특징 :  플레이어 제어수단 없음. 풀사이즈로 자동 재생.

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=yes">

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

</head>


<body>

<link href="video-js.css" rel="stylesheet">

<script src="video.js"></script>

<script src="videojs-flash.js"></script>

<script src="videojs-contrib-hls.js"></script>

<script>

    var player = videojs('hlsPlayEx');

    player.play();

</script>


<video id="example_video_1" class="video-js vjs-default-skin" controls autoplay width="500" height="300" data-setup="{}">

    <source src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" type="application/x-mpegURL">

</video>

 

</html>

 

해피정 님 http://www.happyjung.com/lecture/2671

 

m38u 다운로드 ★

 

1.

m3u8-windows-10-x64.exe 파일을 C:\ 드라이브에 다운로드

https://github.com/oopsguy/m3u8/releases/tag/v1.0

 

2.

아래 방법 중 하나 이용해 도스창 띄우기

방법1: 시작 > 실행 > cmd 입력 > 확인
방법2: 윈도우키 + R키 > cmd 입력 > 확인
방법3: 시작 버튼 위에서 마우스오른쪽 눌러, Windows PowerShell 실행.

3.

아래 명령어 입력

다운경로/m3u8-windows-10-x64.exe -u="https://m3u8 주소.m3u8" -o="저장폴더경로"

(예) 

C:\m3u8-windows-10-x64.exe -u="http://59.8.86.15:1935/live/52.stream/playlist.m3u8" -o="C:\"

 

정보참고: https://tgd.kr/funzinnu/36431935

관련글: https://blog.naver.com/prawnion/221283676321


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
js JS - getRangeAt() 메서드
js JS - rules 속성 - styleSheets 객체의 속성
js JS - 특정요소 함수실행제외 (= 배열문자열포함검사) ★★★★★
js JS - Keyboard KeyCode (키보드키코드 = 키보드키번호 = 키보드키조회 = 키보드코드 = 키보…
js JS - ctrlKey, altKey, shiftKey 속성 - Ctrl키, Alt키, Shift키 눌림여부…
js JS - 숫자만 입력 가능
js JS - 클릭버튼생성 (= 클릭탭생성), 자식요소개별아이디부여, 클릭요소삭제 (= 클릭요소제거 = 클릭부모요…
js JS - F12키차단 (=개발자도구차단) + 마우스오른쪽금지 (= 마우스오른쪽차단 = 불펌방지 = 클릭방지)
js JS - Drag & Drop (= Draggable) - 요소이동 (= 요소끌어이동 = 드래그앤드롭 = 드…
js JS - INPUT입력값을 GET방식으로 넘기기 (=인풋값, 인풋입력밧, 겟방식전달)
js JS - 아이피 유효성검사 (= 아이피 유효성체크 = 아이피 적합성검사 = 아이피 적합성체크)
js JS - Lazyload (레이지로드)
js JS - 스크롤고정 스크롤스파이 메뉴 (= 매뉴얼메뉴 Smooth Scrolling Sticky Scroll…
js JS - 마우스오버 시, 오디오재생 (= mp3재생 = 소리재생)
js JS - 숫자제거 공백제거 정규표현식
js JS - 3D 입체 영상 (= 입체 화면 = 이미지 파노라마 360도 회전 영상 = Image Panoram…
js JS - m3u8 ★ (동영상재생 + 플레이어 다운 + 동영상다운로드 : 엠삼유팔 = 엠쓰리유팔 )
js JS - 이전페이지 보내기 (= 기존페이지로 돌아가기) 3가지방법
js JS - 각종 게임 무료다운로드 주소 좌표 (= 게임다운좌표)
js JS - 서브도메인 입력 후 해당 주소로 이동
1/4
목록
찾아주셔서 감사합니다. Since 2012