html页面通过flv.js实现视频监控直播和点播功能。

最近在做关于视频平台的直播和点播功能，服务端使用的是SRS版本，计划手机APP使用PLDroidPlayer来通过http-flv的方式实现视频的直播和点播，Web端可以使用flv.js。目前手机端没有什么问题，介绍下使用html5页面方式通过http-flv来进行视频的直播和点播，直播和点播都使用flv。1、在点播的时候，使用yamdi对flv视频文件添加关键帧，然后将视频文件存储在ngin..

ssf1987

6895人浏览 · 2019-03-16 16:36:33

ssf1987 · 2019-03-16 16:36:33 发布

1、在点播的时候，使用yamdi对flv视频文件添加关键帧，然后将视频文件存储在nginx服务器上，同样将html页面存储在nginx的目录下，具体代码如下：

flvVod.html
<!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.min.js"></script>    
    <script>
        var player = document.getElementById('videoElement');
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://192.168.0.100/flv/fkdwc_with_meta.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load(); //加载
        }

        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>

2、在直播的时候，如果使用的是SRS2版本时候，会遇到CORS 头缺少 'Access-Control-Allow-Origin'问题，通过在SRS上查找问题，发现是SRS2版本上不支持第三方网站的跨域访问，在SRS3版本上已有修复，w->header()->set("Access-Control-Allow-Origin", "*");，直播的html代码如下：

flvLive.html
<!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;
            margin-top: 8px;
            margin-bottom: 10px;
        }

        .logcatBox {
            border-color: #CCCCCC;
            font-size: 11px;
            font-family: Menlo, Consolas, monospace;
            display: block;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    
    <div class="mainContainer">
        <video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay>
            Your browser is too old which doesn't support HTML5 video.
        </video>

    </div>

	<script src="flv.1.5.0.js"></script>
    
    <script>
         if (flvjs.isSupported()) {
            startVideo()
        }

        function startVideo(){
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                hasAudio: true,
                hasVideo: true,
                enableStashBuffer: true,
                url: 'http://10.139.19.55:18080/live/livestreams.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }

        videoElement.addEventListener('click', function(){
            alert( '是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback + ' 是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback )
        })

        function destoryVideo(){
            flvPlayer.pause();
            flvPlayer.unload();
            flvPlayer.detachMediaElement();
            flvPlayer.destroy();
            flvPlayer = null;
        }

        function reloadVideo(){
            destoryVideo()
            startVideo()
        }
    </script>
    
</body>

</html>

直播效果页面如下：

3、设备侧推流代码如下：

ffmpeg -re -i fkdwc.flv -vcodec copy -acodec copy -f flv -y rtmp://10.139.19.55/live/livestreams

即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

flutter+dart聊天室|flutter仿微信界面聊天App实例

基于Flutter+Dart+photo_view+image_picker+video_player等技术开发跨平台实战仿微信聊天应用。实现消息发送/表情gif、图片预览、红包/视频号/朋友圈等功能。运用技术技术框架：Flutter 1.12.13/Dart 2.7.0视频组件：chewie: ^0.9.7图片/拍照：image_picker: ^0.6.6+1图片预览组件：photo_view

即构开发者社区

WebRTC语音对讲无声音

最近在搞Webrtc对讲的降噪和回音消除，找了代码然后改了非常多。。。。发现一个很无语的Bug：进入程序进行语音对讲，有偶发扬声器无法播放声音，但如果首先进行视频通话，再语音，刚正常。刚开始怀疑是代码改了哪里改错了，查了很多资料，Webrtc输出的每行日志都排查了，还是不行，后来直接通过查看喇叭设置，发现那个setSpeakerphoneOn已被关闭了，真是Orz.....然后直接在启动程...

即构开发者社区

用Flutter构建一个视频通话联系人管理应用

用Flutter构建一个视频 / 通话 / 联系人管理应用这是编程务实的第三个实验，要完成一个简单的拨号器。在此需求基础上，我使用Flutter添加了一些全新的功能，包括视频通话，观众视角通话，联系人管理等功能。尽我最大所能…美化（救命，UI真的尽力了, logo也是白嫖的）下面是一个简易的Demo展示:项目目录：$ lsandroidbuildioslibmyflutter.imlpu