Vue3解决页面1,4,9,16播放器手写完整代码

看到我请叫我铁锤

已于 2023-09-04 11:11:37 修改

阅读量480

点赞数 1

文章标签： html css3 vue.js

于 2023-06-08 19:39:10 首次发布

本文链接：https://blog.csdn.net/wtd183833501176/article/details/131114414

版权

作者在项目中遇到页面播放器问题，尝试网上的解决方案未果后，决定自己编写代码实现。他们使用Vue框架，通过控制不同播放器的显示与隐藏，实现了在一个页面上展示1、4、9或16个不同的视频播放源。代码示例展示了如何创建和布局多个LivePlayer组件来达到这一目标。

摘要由CSDN通过智能技术生成

做项目的过程中遇到了页面播放器的问题,困扰了我三天!!!!!三天!!!网上冲浪了很多,但是唯一找到了一个合理的,却不能满足我想要一个页面多个播放器播放不同播放源的问题,于是,做了个大胆的决定----手搓,直接手搓,不用网上的方法,但是后面肯定是要改的,但是呢,现在情况就是能用就用咯,话不多说,上代码:

先看运行:

html部分

<template>
  <div class="cell">
    <el-row :gutter="8" style="width: 100%;height: 100%;">
      <el-col :span="4" :xs="24">
        <OrgTree ref="orgTreeRef" style="overflow: auto" @click.right="test1($event)" @node-click="nodeClick" />
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="cell-tool">
          <div class="bk-button-group">
            <el-button size="small" @click="clicktrue(0)">1</el-button>
            <el-button size="small" @click="clicktrue(1)">4</el-button>
            <el-button size="small" @click="clicktrue(2)">9</el-button>
            <el-button size="small" @click="clicktrue(3)">16</el-button>
          </div>
        </div>
        <!-- 1 -->
        <div class="player" v-show="arr[0]" >
          <div class="cell-player-1">
            <LivePlayer ref="player3" :videoUrl=datass[0] live play />
          </div>
        </div>
        <!-- 4 -->
        <div class="player1" v-show="arr[1]" >
          <div class="cell-player-4">
            <LivePlayer ref="player3" :videoUrl=datass[0] live play />
          </div>
          <div class="cell-player-4">
            <LivePlayer ref="player3" :videoUrl=datass[1]  live play />
          </div>
          <div class="cell-player-4">
            <LivePlayer ref="player3" :videoUrl=datass[2] live play />
          </div>
          <div class="cell-player-4">
            <LivePlayer ref="player3" :videoUrl=datass[3] live play />
          </div>
        </div>
        <!-- 9 -->
        <div class="player2" v-show="arr[2]">
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[0] live play />
          </div>
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[1] live play />
          </div>
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[2] live play />
          </div>
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[3] live play />
          </div>
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[4] live play />
          </div>
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[5] live play />
          </div>
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[6] live play />
          </div>
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[7] live play />
          </div>
          <div class="cell-player-9">
            <LivePlayer ref="player3" :videoUrl=datass[8] live play />
          </div>
        </div>
        <!-- 16 -->
        <div class="player4" v-show="arr[3]">
          
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[0] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[1] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[2] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[3] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[4] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[5] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[6] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[7] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[8] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[9] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[10] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[11] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[12] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[13] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[14] live play />
          </div>
          <div class="cell-player-16">
            <LivePlayer ref="player3" :videoUrl=datass[15] live play />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

js部分:

<script lang="ts" setup>
import { ref ,reactive} from 'vue'
import LivePlayer from '@liveqing/liveplayer-v3';
import OrgTree from './orgTree.vue';
import { getVidelUrlBySn } from "/@/api/main/tbvideo";
const videoURLL = ref('')
let arr = ref([false, true, false, false]) as any
const datass = reactive([]) as any
async function nodeClick(node: any, mid: number) {
  const UrL = await getVidelUrlBySn({ sn: node.pmid, chnId: node.id, schema: 'all', streamType: 0, expireTime: 720 }) as any
  // 播放地址
  console.log(UrL, "UrL11111");
  videoURLL.value = UrL.data.result.data.videoUrls[0]
  datass.push(videoURLL.value)
  console.log(datass,"sssss");

};

function clicktrue(i: any) {
  console.log(arr, "arr");
  for (let j = 0; j < arr.value.length; j++) {
    arr.value[j] = false
  }
  arr.value[i] = true

  // player2.value != player2.value;
  // player4.value != player4.value
}
function test1(e: { target: { className: string; }; }) {
  // if(e)
  if (e.target.className.search("vben-tree__title") != -1) {
    console.log(1111)
  }
  console.log("e", e, e.target.className)
}
</script>

css部分:

<style>
.player {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.player1 {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.player2 {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.player4 {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cell-player-4 {
  width: 50%;
  height: 50% !important;
  box-sizing: border-box;
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
}

.cell-player-1 {
  width: 100%;
  box-sizing: border-box;
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
}

.cell-player-9 {
  width: 33.33%;
  height: 33.33% !important;
  box-sizing: border-box;
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
}

.cell-player-16 {
  width: 25%;
  height: 25% !important;
  box-sizing: border-box;
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
}

.cell {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>