标题前端开发进行视频监控。rtmp格式在2020年底就不再进行支持,所以要让后端将rtmp格式的视频格式转换成flv格式的。

一、基于vue的页面开发:安装flv插件,使用import引入
npm install --save flv.js
<template>
  <div id="welcome_page">
    <el-row>
      <el-col :span="12">
        <div class="mainContainer">
          <video id="videoElement1" class="centeredVideo" controls autoplay width="90%" 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>
      </el-col>
      <el-col :span="12">
        <div class="mainContainer">
          <video id="videoElement2" class="centeredVideo" controls autoplay width="90%" 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>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import flvjs from "flv.js";

export default ({
  name: 'Welcome',

  mounted () {
    var videoElement1 = document.getElementById('videoElement1');
    var videoElement2 = document.getElementById('videoElement2');
    if (flvjs.isSupported()) {
      var flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'http://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
      });
      flvPlayer.attachMediaElement(videoElement1);
      flvPlayer.load();
    }
    if (flvjs.isSupported()) {
      var flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: 'http://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
      });
      flvPlayer.attachMediaElement(videoElement2);
      flvPlayer.load();
    }

    function flv_start() {
      player.play();
    }
  },

})
</script>

<style scoped>
</style>
二、基于普通html开发:直接引入flv
<!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 οnclick="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://39.101.176.23/live?port=54321&app=myapp&stream=video_test'
            });
            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>

Logo

前往低代码交流专区

更多推荐