bilibili flv流媒体

最新推荐文章于 2024-08-27 16:01:06 发布

lrf01

最新推荐文章于 2024-08-27 16:01:06 发布

阅读量1.9k

点赞数

分类专栏：流媒体 flv 文章标签： javascript

本文链接：https://blog.csdn.net/m0_50013804/article/details/111565411

版权

流媒体同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

flv

1 篇文章 0 订阅

订阅专栏

flv.js

这里使用github的bilibili下的flv.js

bilibili的flv.js链接

FLV是一种全新的流媒体视频格式，不需要再去额外安装其他视频插件。
FLV是一个二进制文件，由文件头【FLV header】和文件主体【FLV Body】,文件主体中有很多的tag组成，每个tag都有一个preTagSize字段，代表前面一个tag的大小；tag可以分成三类：audio（音频流），video（视频流），script（脚本流）。

在这里插入图片描述

bilibili开源的flv流媒体，在chrome浏览器中只支持6个视频，超出就一直加载无法显示
至于为什么最多只允许6个视频，网上给出的结论是：
“同一目标服务器的http1.1请求，浏览器有并发数限制，允许5~6个，以外的都会强制pending”（在Chrome，Edge浏览器中是有并发限制）

如有其他疑问访问github的issues

这里的直播平台可以使用OBS实现推流

使用OBS实现推流访问：https://blog.csdn.net/m0_50013804/article/details/111630558

如果需要全部代码访问：https://github.com/lym-github01/flv

效果图

在这里插入图片描述
核心代码如下

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <link rel="stylesheet" type="text/css" href="demo.css"/>
</head>
<body>
<div class="mainContainer">
    <div class="controls">
        <button onclick="flv_load()">Load</button>
        <button onclick="flv_start()">Start</button>
    </div>
    <div class="video-container">
        <div>
            <video name="videoElement0" class="centeredVideo" controls autoplay>
                Your browser is too old which doesn't support HTML5 video.
            </video>
            <video name="videoElement1" class="centeredVideo" controls autoplay>
                Your browser is too old which doesn't support HTML5 video.
            </video>
            <video name="videoElement2" class="centeredVideo2" controls autoplay style="margin-top:-56.2%">
                Your browser is too old which doesn't support HTML5 video.
            </video>
            <video name="videoElement3" class="centeredVideo2" controls autoplay>
                Your browser is too old which doesn't support HTML5 video.
            </video>
            <video name="videoElement4" class="centeredVideo2" controls autoplay>
                Your browser is too old which doesn't support HTML5 video.
            </video>
            <video name="videoElement5" class="centeredVideo2" controls autoplay>
                Your browser is too old which doesn't support HTML5 video.
            </video>
            <video name="videoElement6" class="centeredVideo2" controls autoplay>
                Your browser is too old which doesn't support HTML5 video.
            </video>
        </div>
    </div>
</div>
<script src="../dist/flv.js"></script>
<script>
    function flv_load(mediaDataSource) {
        let num = document.getElementsByTagName("video").length;
        if (flvjs.isSupported()) {
            for (var i = 0; i < num; i++) {
                var asd= flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    url: 'http://192.168.0.200:81/live?port=1935&app=hls&stream=mystream',//填自己的视频地址
                });
                let aaa='videoElement'+i
                asd.attachMediaElement(document.getElementsByName(aaa)[0]);
                asd.load();
            }
        }
    }

    //点击strat实现播放  暂停  效果
    function flv_start() {
        player.play();
    }

    document.addEventListener('DOMContentLoaded', function () {
        flv_load();
    });
</script>
</body>
</html>