【vue】vue+easyPlayer 实现宫格布局及视频播放_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静态资源

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>

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>

3、demo效果

在这里插入图片描述

本文链接：https://blog.csdn.net/wbx_wlg/article/details/133069540

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

工作中如何编译开源工具（gdb）_gdb编译-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏15次。编译是大部分工程师的烦恼，大家普遍喜欢去写业务代码。但我觉得基本的编译流程，我们还是需要掌握的，希望遇到相关问题，不要退缩，尝试去解决。天下文章一大抄，百度能解决我们90%的问题。_gdb编译

文章浏览阅读1.8k次，点赞4次，收藏6次。python简易爬虫v1.0作者：William Ma (the_CoderWM)进阶python的首秀，大部分童鞋肯定是做个简单的爬虫吧，众所周知，爬虫需要各种各样的第三方库，例如scrapy, bs4, requests, urllib3等等。此处，我们先从最简单的爬虫开始。首先，我们需要安装两个第三方库：requests和bs4。在cmd中输入以下代码：pip install requestspip install bs4等安装成功后，就可以进入pycharm来写爬虫了。爬

安装flask后vim出现：error detected while processing /home/zww/.vim/ftplugin/python/pyflakes.vim:line 28_freetorn.vim-程序员宅基地

文章浏览阅读2.6k次。解决方法：解决方法可以去github重新下载一个pyflakes.vim。执行如下命令git clone --recursive git://github.com/kevinw/pyflakes-vim.git然后进入git克降目录，./pyflakes-vim/ftplugin,通过如下命令将python目录下的所有文件复制到~/.vim/ftplugin目录下即可。cp -R ...._freetorn.vim

HIT CSAPP大作业：程序人生—Hello‘s P2P-程序员宅基地

文章浏览阅读210次，点赞7次，收藏3次。本文简述了hello.c源程序的预处理、编译、汇编、链接和运行的主要过程，以及hello程序的进程管理、存储管理与I/O管理，通过hello.c这一程序周期的描述，对程序的编译、加载、运行有了初步的了解。_hit csapp

18个顶级人工智能平台-程序员宅基地

文章浏览阅读1w次，点赞2次，收藏27次。来源：机器人小妹　　很多时候企业拥有重复，乏味且困难的工作流程，这些流程往往会减慢生产速度并增加运营成本。为了降低生产成本，企业别无选择，只能自动化某些功能以降低生产成本。　　通过数字化..._人工智能平台

electron热加载_electron-reloader-程序员宅基地

文章浏览阅读2.2k次。热加载能够在每次保存修改的代码后自动刷新 electron 应用界面，而不必每次去手动操作重新运行，这极大的提升了开发效率。安装 electron 热加载插件热加载虽然很方便，但是不是每个 electron 项目必须的，所以想要舒服的开发 electron 就只能给 electron 项目单独的安装热加载插件[electron-reloader]:// 在项目的根目录下安装 electron-reloader，国内建议使用 cnpm 代替 npmnpm install electron-relo._electron-reloader

随便推点

精选了20个Python实战项目(附源码)，拿走就用！-程序员宅基地

文章浏览阅读3.8w次，点赞107次，收藏993次。点击上方“Python爬虫与数据挖掘”，进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤昔闻洞庭水，今上岳阳楼。大家好，我是小F。Python是目前最好的编程语言之一。由于其可读性和对初学者的友好性，已被广泛使用。那么要想学会并掌握Python，可以实战的练习项目是必不可少的。接下来，我将给大家介绍20个非常实用的Python项目，帮助大家更好的..._python项目

android在线图标生成工具,图标在线生成工具Android Asset Studio的使用-程序员宅基地

文章浏览阅读1.3k次。在网站的导航资源里看到了一个非常好用的东西：Android Asset Studio，可以在线生成各种图标。之前一直在用一个叫做Android Icon Creator的插件，可以直接在Android Studio的插件里搜索，这个工具的优点是可以生成适应各种分辨率的一套图标，有好几种风格的图标资源，遗憾的是虽然有很多套图标风格，毕竟是有限的。Android Asset Studio可以自己选择其..._在线 android 图标

android 无限轮播的广告位_轮播广告位-程序员宅基地

文章浏览阅读514次。无限轮播广告位没有录屏，将就将就着看，效果就是这样主要代码KsBanner.java/** * 广告位 * * Created by on 2016/12/20. */public class KsBanner extends FrameLayout implements ViewPager.OnPageChangeListener { private List

echart省会流向图（物流运输、地图）_java+echart地图+物流跟踪-程序员宅基地

文章浏览阅读2.2k次，点赞2次，收藏6次。继续上次的echart博客，由于省会流向图是从echart画廊中直接取来的。所以直接上代码<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&_java+echart地图+物流跟踪

Ceph源码解析：读写流程_ceph 发送数据到其他副本的源码-程序员宅基地

文章浏览阅读1.4k次。一、OSD模块简介1.1 消息封装：在OSD上发送和接收信息。cluster_messenger -与其它OSDs和monitors沟通client_messenger －与客户端沟通1.2 消息调度：Dispatcher类，主要负责消息分类1.3 工作队列：1.3.1 OpWQ: 处理ops（从客户端）和sub ops（从其他的OSD）。运行在op_tp线程池。1...._ceph 发送数据到其他副本的源码

进程调度（一）——FIFO算法_进程调度fifo算法代码-程序员宅基地

文章浏览阅读7.9k次，点赞3次，收藏22次。一定义这是最早出现的置换算法。该算法总是淘汰最先进入内存的页面，即选择在内存中驻留时间最久的页面予以淘汰。该算法实现简单，只需把一个进程已调入内存的页面，按先后次序链接成一个队列，并设置一个指针，称为替换指针，使它总是指向最老的页面。但该算法与进程实际运行的规律不相适应，因为在进程中，有些页面经常被访问，比如，含有全局变量、常用函数、例程等的页面，FIFO 算法并不能保证这些页面不被淘汰。这里，我_进程调度fifo算法代码