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

最新推荐文章于 2024-05-23 21:59:19 发布

ssf1987

最新推荐文章于 2024-05-23 21:59:19 发布

阅读量7k

点赞数

分类专栏： IT 软件文章标签：视频直播、点播 http flv

本文链接：https://blog.csdn.net/ssf1987/article/details/88600274

版权

IT 软件专栏收录该内容

38 篇文章 0 订阅

订阅专栏

最近在做关于视频平台的直播和点播功能，服务端使用的是SRS版本，计划手机APP使用PLDroidPlayer来通过http-flv的方式实现视频的直播和点播，Web端可以使用flv.js。目前手机端没有什么问题，介绍下使用html5页面方式通过http-flv来进行视频的直播和点播，直播和点播都使用flv。

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

ssf1987

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
2
评论
html页面通过flv.js实现视频监控直播和点播功能。

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

扫一扫