flv.js http-flv 재생 플레이어 HTML5

 

FLV.JS.zip

0.50MB

https://github.com/Bilibili/flv.js/releases

bilibili/flv.js

에서 다운 받는다.

 

게시판에 삽입시 아래와 같이 넣어주면된다.

물론 flv.js가 위치한 웹서버는 nginx로 하였고, http-flv 모듈을 포함해서 컴파일된 버전으로 하였다.

http-flv 모듈은 rtmp hls를 다 지원하는 듯하다.

근데 내 컴에서 flv 인코딩한 파일이 재생이 되지 않는다.

그래서 혹시나 해서 mp4를 넣어봤다. 잘된다.

기존에 jwplayer를 쓸때는

PC에선 HTML5가 지원되지 않는 브라우저를 위해서 rtmp flash기반 재생,

HTML5지원하는 브라우저나, 모바일에선 http 전송 재생되도록

2개의 값을 주었었다.

이제 flash는 한물가는 상황이고, HTML5가 규격화되어가고 구버전 ie8~10들은 OS와 함께 거의 사용되지 않으므로

HTML5로 가는것이 맞다.

nginx에 대해 또 검색하다가 flv.js 를 발견했다.

jwplayer는 사실 유료이다.

기본 video태그로 브라우저 내장 지원 태그를 쓸 수 도 있지만,

무료인 flv.js 를 사용해본다.

 

<div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls="" autoplay="no" width="100%" height="auto">웹브라우저 버전이 낮아서 HTML5를 재생하지 못합니다. IE11이나 크롬, 파이어폭스, 오페라를 사용하세요</video>
    </div>
<script src="/flvplayer/flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'mp4',
     url: 'http://도메인/my.mp4'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

   flv js 소스는 나의 웹서버 루트 /flvplayer아래에 두었다.

 

위에서 type: 'flv' 인데 mp4로 바꾸었다. 

재생에 문제는 없다.