使用flv.js进行视频直播

flv.js是B站开源的flv播放器,项目地址是:https://github.com/Bilibili/flv.js

将打包好的js代码复制到项目中引入就可以开始使用了。

<script src="js/flv.min.js"></script>

在页面中创建一个带id的video标签

<video id="videoElement" poster="./images/loading.gif" muted></video>

编写一个创建flv播放器对象的函数

function createFlvPlayer(id, url) {
    var flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        enableWorker: true,
        enableStashBuffer: false,
        stashInitialSize: 128,
        url: url
    });
    flvPlayer.attachMediaElement(document.getElementById(id));
    return flvPlayer
}

用flv播放器对象播放视频

var flvPlayer = createFlvPlayer('videoElement', 'http://192.168.0.105:8090/live/18WR250010/livestream.flv')
flvPlayer.load();
flvPlayer.play();

几个参数重要参数特别说明一下:
video标签中的poster是用来指定加载视频时的图片,我们可以准备一张正在加载的gif图片;
muted是用来设置返回的视频是否静音,建议默认设置,需要的时候在开启,否则在某些浏览器可以会出现这个错误:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. t. https://goo.gl/xX8pDD

isLive为true表示为直播;
而下面这三个参数是为了缩短延迟时间,具体说明看API描述文档:https://github.com/Bilibili/flv.js/blob/master/docs/api.md

enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,

本博客采用 知识共享署名-禁止演绎 4.0 国际许可协议 进行许可

本文标题:使用flv.js进行视频直播

本文地址:https://dev-tang.com/post/2018/09/flv_js.html

推荐阅读