H5播放B站源的flv视频

前端代码

引入js

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

注意代码

<video id="video" controls="controls" width="1080">
    </video>
    <br>
    <input type="text" id="text"></input><button id="btn1">播放BvId</button><button id="btn2">播放直播源</button>
    <script>
        let video = document.getElementById('video');
        let text = document.getElementById("text");
        function play(url){
            let flvPlayer = flvjs.createPlayer({//设置 资源
                type: 'flv',
                url: url
            });
            flvPlayer.attachMediaElement(video);//附加到video元素
            flvPlayer.load();//加载
            flvPlayer.play();
        }
        document.getElementById("btn1").onclick = function () {
            play(`http://127.0.0.1:8080/stream/video/${text.value}`);
        };
        document.getElementById("btn2").onclick = function () {
            play(text.value);
        };
    </script>

效果

播放bvId视频

播放B站直播流

先通过roomId获取直播流，roomId就在直播页面地址里

设置直播流并播放

总体来说是非常简单的，flv.js应该就是B站开发的，可以在githut下载，为了防止有些人太懒，我把测试项目上传到码云，可以直接使用我的项目测试 ，或里面的js文件

码云地址：https://gitee.com/shaokang123/h5-flv/tree/master/

bvId播放服务，以及roomId转换服务是我另一个项目
CSDN地址：https://blog.csdn.net/weixin_44598449/article/details/117195834?spm=1001.2014.3001.5501