flv.js 部署到linux,flv.js简单使用示例

Bilibili相信大家都不会陌生，而 Flv.js 就是由 bilibili 网站开源的 HTML5 Flash 视频(FLV)播放器，纯原生 JavaScript 开发(ECMAScript 6 编写) ，没有用到 Flash。

它的工作原理是 Flv.js 在 JavaScript 中流式解析 flv 文件流，并实时转封装为 fmp4 ，通过 Media Source Extensions 喂给浏览器，实现了 FLV 格式视频的播放。

github

如果你已经安装了nodejs可以使用 npm来安装 flv.js

推荐使用cnpm 来安装

当然你也可以使用其他方式进行下载

在下载好的文件夹中找到dist文件夹中的flv.min.js复制出来

可以使用简单的服务器测试

代码：

flv.js demo

.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;

}

Your browser is too old which doesn't support HTML5 video.

开始

暂停

停止

跳转

var player = document.getElementById('videoElement');

if (flvjs.isSupported()) {

var flvPlayer = flvjs.createPlayer({

type: 'flv',

url: '你的视频.flv'

});

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('seekpoint')[0].value);

}