欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

flv.js与video.js实现播放视频直播

程序员文章站 2022-07-13 12:07:27
...

1.准备

1.下载 nginx （可以任意使用一个web服务器）
2.下载 livego
3.下载 OBS （直播推流直播工具）
4.引用 flv.js
5.引用 video.js

(￣▽￣)／ 以上软件请大家自行解压或安装

2.环境配置

首先运行livego （进入可执行文件文件夹 cmd黑窗口输入 livego， 记得靠谱.livego.json配置文件）

flv.js与video.js实现播放视频直播

运行livego效果

安装与运行OBS
打开设置 配置流服务器

配置连接 （url配置要和livego配置文件参数匹配）

 

flv.js与video.js实现播放视频直播

配置连接

连接成功后livego会有提示

 

flv.js与video.js实现播放视频直播

提示

flv.js与video.js实现播放视频直播

载入源

flv.js与video.js实现播放视频直播

效果

进入nginx下的html目录,新建个index1.html与index2.html
然后运行 nginx (运行前自行修改nginx端口)

2.使用flv.js实现直播播放

之前我写过教程《flv.js简单使用示例》
吧之前的代码稍作修改

代码:

<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>
    <style>
        .mainContainer {
            display: block;
            width: 1024px;
            margin-left: auto;
            margin-right: auto;
        }

        .urlInput {
            display: block;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-top: 8px;
            margin-bottom: 8px;
        }

        .centeredVideo {
            display: block;
            width: 100%;
            height: 576px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
        }

        .controls {
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
    </div>
    <br>
    <div class="controls">
        <!--<button onclick="flv_load()">加载</button>-->
        <button onclick="flv_start()">开始</button>
        <button onclick="flv_pause()">暂停</button>
        <button onclick="flv_destroy()">停止</button>
        <input style="width:100px" type="text" name="seekpoint" />
        <button onclick="flv_seekto()">跳转</button>
    </div>
    <script src="./flv.js/flv.min.js"></script>
    <script>
        var player = document.getElementById('videoElement');
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                "isLive": true,//<====加个这个 
                url: 'http://127.0.0.1:7001/live/movie/a.flv',//<==自行修改

            });
            flvPlayer.attachMediaElement(videoElement);
            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;
        }

        function flv_seekto() {
            player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
        }
    </script>
</body>

</html>

访问http://127.0.0.1/index1.html

如果浏览器开始播放视频那说明你已经成功

flv.js与video.js实现播放视频直播

效果

3.使用video.js实现直播播放(HLS)

根据livego教程

flv.js与video.js实现播放视频直播

教程

 

那么 video.js 的播放地址应该是 http://127.0.0.1:7002/live/movie/a.m3u8

但是实际测试时失败了罒ω罒

所以就使用 ffmpeg 将RTMP转为HLS 放到nginx的html目录下

ffmpeg命令参考:

ffmpeg -i rtmp://127.0.0.1:1935/live/movie/a -c copy -f hls -hls_time 5.0 -hls_list_size 0 -hls_wrap 15 ../html/a.m3u8

flv.js与video.js实现播放视频直播

ffmpeg

顺便说下 好像 dplayer播放器 也是可以的

代码:

<html>
<head>
    <title>demo</title>
    <meta charset="utf-8">
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>

<body>
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" data-setup="{}">
        <source src="./a.m3u8" type='application/x-mpegURL'>
        <!-- <source src="http://127.0.0.1:7002/live/movie/a.m3u8" type='application/x-mpegURL'> -->
    </video>
    <script type="text/javascript">
        var myPlayer = videojs('example_video_1');
        videojs("example_video_1").ready(function () {
            var myPlayer = this;
            myPlayer.play();
        });
    </script>
</body>

</html>

flv.js与video.js实现播放视频直播

效果

 

 

相关标签： C++程序开发

上一篇： 调用flv.js显示监控视频遇到的问题

下一篇： Flv.js全面解析

推荐阅读