战纪无双网游活动聚合网

一、前言

最近着手了一个新需求：将某记录仪的实时视频在页面展现。

实现步骤：

通过WebRtc将直播视频转码为flv/rtsp格式流；

通过Vlc或代码中的视频播放器播放视频。

常见播放flv直播视频流软件如：VLC、PotPlayer等，好用但无法嵌入代码。

在此介绍一种使用原生html+js即可实现直播视频流播放的方式，内网外网皆可用。

二、实现

引入Bilibili开源Flash 视频（FLV）播放器

方式一：外网引入 https://github.com/Bilibili/flv.js 方式二：内网导入（把js下载下来标签引入即可） 链接：https://pan.baidu.com/s/1kiDJgoxGn4pQ3qCROdu0fw?pwd=myjn 提取码：myjn

编写调用播放器方法

if (flvjs.isSupported()) {

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

var flvPlayer = flvjs.createPlayer({

type: 'flv', // 指定视频类型，特别注意此处伟flv

isLive: true, // 开启直播

hasAudio: false, //需要设置为false不然播放不了视频

cors: true, // 开启跨域访问

url: 'url' //FLV视频地址

}