VUE项目使用easyplayer.js实现海康视频监控

做的一个项目里面有一个需求需要监控视频，但是项目的一些组件兼容问题，此次项目无法使用海康的视频插件。所以就使用了更简单的easyplayer.js组件。

首先安装easyplayer:

npm install @easydarwin/easyplayer --save

在VUE中调用

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf 到静态文件根目录。

copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到静态文件根目录。

copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到静态文件根目录。

在 html 中引用 dist/component/EasyPlayer-lib.min.js

###H.265 copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到静态文件根目录。

上效果图：

（因为某些原因就不展示过多的监控画面了，所以用图片挡住了。）

代码部分：

这次项目我使用了官方的HTML DEMO所以就在vue里面iframe一下html页面。

首先在vue里面iframe

扫描二维码关注公众号，回复： 14971303 查看本文章

<template>
<iframe :src='src' frameborder="0" style="width: 100%;height: 100%;"></iframe>
</template>
<script>
export default {
  data() {
    return {
      showSessionId: "",
      src: "",
    };
  },
  mounted() {
    this.showSessionId = window.location.search;
    this.src = `../../../static/videom/index.html${this.showSessionId}`;
  },
  methods: {

  },
};
</script>

请求海康视频接口会返回一个视频流地址并且会重新请求地址会变化，所以需要写方法。

然后就是重点的html了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./EasyPlayer-element.min.js"></script>
</head>
<style>
  #player {
    width: 50%;
    height: 50%;
  }
  #player .easy-player {
    height: 400px;
    width: 850px;
    flex: 1;
  }
</style>
<body style="width:100%;height: 100%;">
  <div id="videobox3" style="width:100%;height: 100%;display: flex;flex-wrap: wrap;">
  </div>
  <script type="text/javascript">
    var drvicelist3 = [
      '213456789012389123aaa',//海康视频key
      '123333333333333asdasd',//海康视频key
    ]
    var urllist3 = []
    var namelist3 = [
      '监控一区',
      '监控二区',
    ]
    function getUrl3(drviceCode) {
      $.ajax({
        type: "get",
        url: '/dr/video/getVideoUrl?drviceCode=' + drviceCode,
        success: function (data) {
          urllist3.push(data.body)
        },
        error: function (err) {
          console.log('请求视频流失败：', err);
        },
      });
    }
    drvicelist3.forEach(item => {
      getUrl3(item)
    })
    setTimeout(() => {
      let html = ''
      urllist3.forEach((item, index) => {
        html += '<easy-player video-url="' + item + '" id="player" live="true" video-title=" ' + namelist3[index] + ' " show-custom-button="true" decode-wasm="true"></easy-player>'
      })
      $('#videobox3').html(html)
    }, 1000);
</script>
</body>

</html>

视频属性参数

参数	说明	类型	默认值
video-url	视频地址	String	-
video-title	视频右上角显示的标题	String	-
poster	视频封面图片	String	-
auto-play	自动播放	Boolean	true
live	是否直播, 标识要不要显示进度条	Boolean	true
speed	是否显示倍速播放按钮。注意：当live为true时，此属性不生效	Boolean	true
loop	是否轮播。	Boolean	false
alt	视频流地址没有指定情况下, 视频所在区域显示的文字	String	无信号
muted	是否静音	Boolean	false
aspect	视频显示区域的宽高比	String	16:9
isaspect	视频显示区域是否强制宽高比	Boolean	true
loading	指示加载状态, 支持 sync 修饰符	String	-
fluent	流畅模式	Boolean	true
timeout	加载超时(秒)	Number	20
stretch	是否不同分辨率强制铺满窗口	Boolean	false
show-custom-button	是否在工具栏显示自定义按钮(极速/流畅, 拉伸/标准)	Boolean	true
isresolution	是否在播放 m3u8 时显示多清晰度选择	Boolean	false
isresolution	供选择的清晰度 "yh,fhd,hd,sd", yh:原始分辨率	fhd:超清，hd:高清，sd:标清	-
resolutiondefault	默认播放的清晰度	String	hd
isTransCoding	是否开启转raw	Boolean	false