Bilibili / flv.js 修改

HTML5 Flash视频(FLV)播放器  视频播放器JavaScript库 修改

代码最近更新:主要开发语言:JavaScript

项目介绍 README

点击右侧README查看项目详情介绍

Flv.js

Flv.js 是HTML5 Flash视频(FLV)播放器,纯原生Javascript开发,没有用到Flash。由bilibili网站开源。

该项目依托于Media Source Extensions,受到hls.js的启发。

概览

一个实现了在HTML5 视频中播放FLV格式视频的Javascript库。它的工作原理是将FLV文件流转码复用成ISO BMFF(MP4 碎片)片段,然后通过Media Source Extensions将MP4片段喂进浏览器。

flv.js是使用ECMAScript 6编写的,然后通过Babel Compiler编译成ECMAScript 5,使用Browserify打包。

功能/特色

  • FLV容器,具有H.264 + AAC编解码器播放功能
  • 多部分分段视频播放
  • HTTP FLV低延迟实时流播放
  • FLV通过WebSocket实时流播放
  • 兼容Chrome, FireFox, Safari 10, IE11 和 Edge
  • 十分低开销,并且通过你的浏览器进行硬件加速

使用教程


以下内容来自flv.jsREADME.md文件

flv.js npm

An HTML5 Flash Video (FLV) Player written in pure JavaScript without Flash. LONG LIVE FLV!

This project relies on Media Source Extensions to work.

Overview

flv.js works by transmuxing FLV file stream into ISO BMFF (Fragmented MP4) segments, followed by feeding mp4 segments into an HTML5 <video> element through Media Source Extensions API.

flv.js is written in ECMAScript 6, transpiled into ECMAScript 5 by Babel Compiler, and bundled with Browserify.

Features

  • FLV container with H.264 + AAC / MP3 codec playback
  • Multipart segmented video playback
  • HTTP FLV low latency live stream playback
  • FLV over WebSocket live stream playback
  • Compatible with Chrome, FireFox, Safari 10, IE11 and Edge
  • Extremely low overhead, and hardware accelerated by your browser!

Installation

npm install --save flv.js

Build

npm install          # install dev-dependences
npm install -g gulp  # install build tool
gulp release         # packaged & minimized js will be emitted in dist folder

cnpm mirror is recommended if you are in Mainland China.

CORS

If you use standalone video server for FLV stream, Access-Control-Allow-Origin header must be configured correctly on video server for cross-origin resource fetching.

See cors.md for more details.

Getting Started

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

Limitations

  • MP3 audio codec is currently not working on IE11 / Edge
  • HTTP FLV live stream is not currently working on all browsers, see livestream.md

Multipart playback

You only have to provide a playlist for MediaDataSource. See multipart.md

Livestream playback

See livestream.md

API and Configuration

See api.md

Debug

npm install          # install dev-dependences
npm install -g gulp  # install build tool
npm run dev          # with incremental compile and auto reload

Design

See design.md

License

Copyright (C) 2016 Bilibili. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

flv.js 下的帖子

flv.js 使用教程 0

kyy 发表于 8个月前 (03-07)

查看更多帖子 ... 我要发帖