• 【vue】vue+easyPlayer 实现宫格布局及视频播放

    由于业务需要，ant-design-vue框架集成easyPlayer.js作为视频播放器。EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）、WS视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式。

    官方教程地址：
    https://www.npmjs.com/package/@easydarwin/easyplayer

    1、npm安装easyPlayer依赖包及引入文件

    // 安装命令
npm install @easydarwin/easyplayer --save

// Vue 集成调用
copy node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml 到 静态文件 根目录
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js 到 静态文件 根目录
// 若视频流为H.265调用EasyPlayer.wasm
copy node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm 到 静态文件 根目录

// 注意： 没有调用会出现无法加载对应插件的报错
在public/index.html中引入EasyPlayer-lib.min.js静态资源

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    demo：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <link rel="icon" href="<%= BASE_URL %>favicon.ico"/>
  <title>EasyPlayer-demo</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="./EasyPlayer-lib.min.js"></script>
</head>
<body>
<noscript>
  <strong
  >We're sorry but easynvr-token doesn't work properly without JavaScript
    enabled. Please enable it to continue.</strong
  >
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    2、vue页面引入easyPlayer组件

    <div class="videoArea">
     <div class="gridBtn">
        <span>布局：</span>
        <span @click='splitScreen(24, 1)' :span='4' class='splitClass'><img :src="require('@/assets/img/1-screen.png')"> 1 x 1</span>
        <span @click='splitScreen(12, 4)' :span='4' class='splitClass'><img :src="require('@/assets/img/4-screen.png')"> 2 x 2</span>
        <span @click='splitScreen(8, 9)' :span='4' class='splitClass'><img :src="require('@/assets/img/9-screen.png')"> 3 x 3</span>
        <span @click='splitScreen(6, 16)' :span='4' class='splitClass'><img :src="require('@/assets/img/16-screen.png')"> 4 x 4</span>
      </div>
     <div class="playerList">
        <a-row>
          <a-col :span="colSpan" v-for="i in playerNum" :key="i" @click="currentIndex = i">
            <a-card size="small" :class="{selectedCard: currentIndex === i}" :title="'视频监控'">
              <easy-player 
              	 ref="player"
                 :video-title="videoList[i-1] ? videoList[i-1].title : ''"
                 :video-url="videoList[i-1] ?  videoList[i-1].url : ''"
                 style="height: 260px"
                 :autoplay="autoplay"
                 :muted="muted"
                 @error="restartPlayer"
                 @ended="restartPlayer"
            </a-card>
          </a-col>
        </a-row>
      </div>
</div>

<script>
export default {
	components: {
    	EasyPlayer: () => import('@easydarwin/easyplayer')
    },
    data () {
      return {
     	 // 分屏布局
        playerNum: 1,
        colSpan: 24,
        currentIndex: 1,
         // 视频播放器
 		muted: false,
        autoplay: true,
        videoList: [
          { title: '视频1', url: 'http://flv.bdplay.nodemedia.cn/live/bbb.flv'},
          { title: '视频2', url: 'http://data.mars3d.cn/file/video/lukou.mp4'},
          { title: '视频3', url: 'http://vjs.zencdn.net/v/oceans.mp4'}
		]
	},
	methods:{
	  splitScreen(span, num) {
        this.colSpan = span
        this.playerNum = num
        if (this.currentIndex > num) {
          this.currentIndex = 1
        }
      },
      restartPlayer() {
        let [player] = this.$refs.player
        player = player.getVueInstance()
        player.initPlayer()  // 重新初始化播放器
      }
	}
}
</script>
 

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    3、demo效果

    在这里插入图片描述

  • 相关阅读:
    基于matlab实现的卡尔曼滤波匀加速直线运动仿真
    winform C#键盘钩子(Hook)拦截器,屏蔽键盘深入解析
    方波信号发生器电路仿真,小波神经网络算法原理
    【PAT（甲级）】1070 Mooncake
    配电室电力监控系统：实时掌握电力运行状况
    Java 基础学习总结（207）—— 具有革命性、未来性、开创新纪元的 JDK 21， 它来了
    计算机系统（16）----- 调度算法（2）
    .NET Framework中自带的泛型委托Action
    如何使用NE555产生方波
    19--Django-项目实战-博客开发-开放对外访问接口、文章详情页以及下方点赞功能实现
  • 原文地址：https://blog.csdn.net/wbx_wlg/article/details/133069540