简介

尝试仿制了一下bilibili弹幕网的直播功能的小（小小小）Demo，之后可能应该会仿照b站的直播间样式进行更新，甚至还会把普通视频的播放也做出来（

项目地址：https://github.com/SHIDi233/html5-live-bili

开始

flvjs

官方介绍：

一个HTML5 Flash视频（FLV）播放器，使用纯JavaScript编写，不使用Flash。FLV万岁！
此项目依赖于Media Source Extensions来工作。
该项目是bilibili公司的开源项目，项目地址：https://github.com/Bilibili/flv.js/

功能：

1.FLV 容器，具有 H.264 + AAC 编解码器播放功能
2.多部分分段视频播放
3.HTTP FLV 低延迟实时流播放
4.FLV 通过 WebSocket 实时流播放
5.兼容 Chrome, FireFox, Safari 10, IE11 和 Edge
6.低开销，能使用浏览器进行硬件加速

可以选择项目进行编译或直接下载release版本，将其中flv.js与flv.min.js提取放置于网页同级文件夹下。

h5界面

既然flvjs将flv流切成了mp4片段，我们可以使用html5中的video标签直接进行播放。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播页面</title>
    <meta name="description" content="仿Bilibili HTML5播放">
    <meta name=" keywords" content="仿Bilibili HTML5播放">
</head>

<body>
    <div class="play-video wrapper clearfix" style="width: 1215px; margin: 0 auto;">
        <!-- 左边 -->
        <div class="play-left" style="float: left;width: 644px;">
            <!-- 视频 -->
            <div class="bigvideo" style="position: relative;width: 1144px;box-shadow: 0 0 3px 3px #ccc;">
                <video id="video" controls autoplay width="1144" height="644"></video> //视频播放器大小，可自行调整
                <!-- 备注 -->
                <div class="info">
                    <p>直播测试</p>
                    <p>2023.04.27</p>
                </div>
            </div>
        </div>
    <script src="flv.min.js"></script>
    <script>
        var player = document.getElementById('video');
	
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                "isLive": true,
                url: 'http://123.57.221.224:7001/live/test.flv',//拉流url
            });
            flvPlayer.attachMediaElement(video);
            flvPlayer.load(); //加载
            flv_start();
        }
        function flv_start() {
            player.play();
        }
        function flv_pause() {
            player.pause();
        }
        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }
    </script>
</body>