直播插件-flv.js

课前准备：直播流协议 https://www.cnblogs.com/yangchin9/p/14930874.html

前言：PC端、H5页面播放 flv 视频流

测试直播链接：https://live.cgtn.com/1000/prog_index.m3u8

一、简介

HTML5 原生仅支持播放 mp4/webm 格式，是不支持 FLV格式的，好在Bilibili大神给了我们解决方案，那就是免费开源的flv.js， 有了flv.js的加持HTML5 上也能支持延迟极低的 HTTP FLV 播放

原理：
flv.js在获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF（MP4 碎片）片段，再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放；
也就是说当我们拿到flv视频流以后，直接使用flv.js+video标签就可以实现直播了

二、安装与使用

安装flv.js的方式有两种；

1、script标签引入cdn链接，或者是直接下载flv.js到本地后引入

2、npm安装

// 方法一 script标签引入
// 开发阶段可使用未压缩的版本，方便调试
// <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>

// 方法二 npm安装
npm i flv.js -S
// 引入
import flvjs from 'flv.js'

// 具体使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flv.js教程</title>
<style>
#videoElement{
    width: 300px;
    height: 200px;
}
</style>
</head>
<video id="videoElement"></video>
<!-- 开发阶段可使用未压缩的版本，方便调试 -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://flv.yinyuetai.com/uploads/videos/common/0781012623061B0C379B5C52B815FA1D.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>
</html>

 三、开发物料

1、flv.js文档

posted @ 2022-07-28 11:50  yangchin9  阅读(2542)  评论(0)  编辑  收藏  举报