flv.js 사용에 대한 자세한 설명-JS 튜토리얼-php.cn

flv.js 사용에 대한 자세한 설명

php中世界最好的语言

풀어 주다： 2018-03-10 16:12:23

원래의

5984명이 탐색했습니다.

이번에는 flv.js 사용에 대한 자세한 설명을 가져오겠습니다. flv.js 사용 시 주의사항은 무엇인가요?

Bilibili 저는 모든 사람이 그것에 익숙하다고 믿습니다. Flv.js는 bilibili 웹사이트에서 오픈 소스로 제공되는 HTML5 Flash 비디오(FLV) 플레이어입니다. 이는 순수하게 네이티브 JavaScript 개발(ECMAScript 6으로 작성)되었으며 Flash를 사용하지 않습니다. .
작동 원리는 Flv.js가 JavaScript로 flv 파일 스트림을 구문 분석하고 이를 실시간으로 fmp4로 캡슐화하고 미디어 소스 확장을 통해 브라우저에 공급하여 FLV 형식 비디오의 재생을 실현한다는 것입니다.
github

nodejs를 설치했다면 npm을 사용하여 flv.js를 설치할 수 있습니다
cnpm을 사용하여 설치하는 것이 좋습니다
물론 다른 방법을 사용하여 다운로드할 수도 있습니다
다운로드한 폴더의 dist 폴더에서 flv를 찾으세요. . min.js 복사

간단한 서버 테스트를 사용할 수 있습니다

코드:

<!DOCTYPE html><html><head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <style>
        .mainContainer {    display: block;    width: 1024px;    margin-left: auto;    margin-right: auto;
}.urlInput {    display: block;    width: 100%;    margin-left: auto;    margin-right: auto;    margin-top: 8px;    margin-bottom: 8px;
}.centeredVideo {    display: block;    width: 100%;    height: 576px;    margin-left: auto;    margin-right: auto;    margin-bottom: auto;
}.controls {    display: block;    width: 100%;    text-align: left;    margin-left: auto;    margin-right: auto;
}    </style></head><body>
    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn&#39;t support HTML5 video.</video>
    </div>
    <br>
    <div class="controls">
        <!--<button onclick="flv_load()">加载</button>-->
        <button onclick="flv_start()">开始</button>
        <button onclick="flv_pause()">暂停</button>
        <button onclick="flv_destroy()">停止</button>
        <input style="width:100px" type="text" name="seekpoint" />
        <button onclick="flv_seekto()">跳转</button>
    </div>
    <script src="flv.min.js"></script>
    <script>
        var player = document.getElementById(&#39;videoElement&#39;);        if (flvjs.isSupported()) {            var flvPlayer = flvjs.createPlayer({                type: &#39;flv&#39;,                url: &#39;你的视频.flv&#39;
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
        }        function flv_start() {
            player.play();
        }        function flv_pause() {
            player.pause();
        }        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }        function flv_seekto() {
            player.currentTime = parseFloat(document.getElementsByName(&#39;seekpoint&#39;)[0].value);
        }    </script></body></html>

로그인 후 복사

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다음 페이지의 다른 관련 기사를 주목하세요. PHP 중국어 웹사이트!