js实现视频直播,结合bilibili开源项目

最新推荐文章于 2024-06-19 14:32:39 发布

Museions

最新推荐文章于 2024-06-19 14:32:39 发布

阅读量3.4k

点赞数

分类专栏： # 音视频类文章标签： flv video

本文解决了你的问题吗？转载注明链接,帮助更多人。

本文链接：https://blog.csdn.net/museions/article/details/100917084

版权

音视频类专栏收录该内容

5 篇文章 0 订阅

订阅专栏

flv.js为核心,使用构造器来创建video标签，当然flv文件流必须是正确推送，flv.js会把flv视频流解析成为blob对象来播放。

经过实际测试这个方案是可行的，bilibili开源的这个flvjs确实好用，以下是相关代码文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flv.js test</title>
</head>
<body>
    <script src="flv.min.js"></script> 
    <!--flvjs cdn https://www.bootcdn.cn/flv.js/-->
<video id="videoElement" width="800"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            "isLive": true,
            url: '' //flv文件流地址
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>
</body>
</html>

由于是本地文件，为防止跨域 CORS拦截，你得把这个文件在server服务容器中启动或者启用代理都可以，这个默认是没有开启播放的，所以需要自己设置显示播放控件来控制播放。

以上图示 Media Source Extensions™的工作流程 W3C的示例.

Museions

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js实现视频直播,结合bilibili开源项目

flv.js为核心,使用构造器来创建video标签，当然flv文件流必须是正确推送，flv.js会把flv视频流解析成为blob对象来播放。经过实际测试这个方案是可行的，bilibili开源的这个flvjs确实好用，以下是相关代码文件<html lang="en"><head> <meta charset="UTF-8"> <...
复制链接

扫一扫

专栏目录