vue-video-player 视频播放器使用以及多视频宫格实例参考

npm install vue-video-player

npm install vue-video-player@latest video.js@7.9.0

// 视频播放组件
import VueVideoPlayer from 'vue-video-player'
window.videojs = VueVideoPlayer.videojs
require('video.js/dist/lang/zh-CN.js')
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-contrib-hls'
import 'videojs-flash'

<template>
  <div>
    <video-player
      ref="videoPlayer"
      :options="videoPlayerOptions"
      @play="handlePlay"
      @pause="handlePause"
    ></video-player>
  </div>
</template>

<script>

export default {
  name: "Vedio",
  components: {
    videoPlayer
  },
  data() {
    return {
      videoPlayerOptions: {
        autoplay: true, // 自动播放
        muted: true, // 静音
        fluid: true, // 自适应播放容器
        language: 'zh-CN', // 中文提示
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 倍速播放
        sources: [
          
          {
            type: 'video/mp4', // 播放视频类型 mp4
            src: 'http://vjs.zencdn.net/v/oceans.mp4' // 播放视频链接
          },
          {
            type: 'application/x-mpegURL', // hls 需要依赖videojs-contrib-hls
            src: "http://url.video.com/newhls/live1/index.m3u8",
          },
        ],
        poster: "https://dogefs.s3.ladydaily.com/~/source/wallhaven/small/8o/8old52.jpg?w=400&h=200&fmt=webp", // 封面
      }
    };
  },
  methods: {
    handlePlay() {
      console.log('Video is playing.');
    },
    handlePause() {
      console.log('Video is paused.');
    }
  }
};
</script>

<template>
  <div class="app-container" style="padding: 0">
    <el-container style="height: calc(100vh - 50px)">
      <el-aside width="200px" style="background-color: #FFFFFF">
        <!--侧栏树数据-->
        <div class="head-container">
          <el-input
            v-model="dataspaceName"
            placeholder="请输入设备名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="dataspaceOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-aside>
      <el-container style="width: 100%;">
    
        <el-col :span="20" :xs="24" style="width: 100%;">
          <div class="cell">
            <div class="cell-tool" style="padding-top: 10px;">
              <div class="bk-button-group">
                <el-button @click="cellCount = 1" size="small">1</el-button>
                <el-button @click="cellCount = 4" size="small">4</el-button>
                <el-button @click="cellCount = 9" size="small">9</el-button>
                <el-button @click="cellCount = 16" size="small">16</el-button>
              </div>
            </div>
            <div class="cell-player" style="padding-top: 10px;">
              <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
                <el-row style="height: 100%;">
                  <el-col :span="18" style="height: 100%;">
                    <video-player
                      class="video-player vjs-custom-skin"
                      :options="playerOptions[i]"
                      ref="videoPlayer"
                      :playsinline="true"
                      @ready="playerReadied">
                    </video-player>
                  </el-col>
                  <el-col :span="6" style="padding: 0 1px 0 1px; height: 100%;">
                    <el-card style="height: 100%;">
                      <div slot="header" class="clearfix">
                        <span>设备</span>
                        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
                      </div>
                      <div v-for="o in 4" :key="o" class="text item">
                        {{ '设备参数 ' + o }}
                      </div>
                    </el-card>
                  </el-col>

                </el-row>
              </div>
            </div>
          </div>
        </el-col>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {listTree} from "@/api/edge/monitor";

export default {
  name: "Vedio",
  dicts: [],
  components: {},
  data() {
    return {
      loading: false,
      cellCount: 1,
      // 树选项
      dataspaceName: undefined,
      dataspaceOptions: [],
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label"
      },
      playerOptions: [
        {},
        {
          preload: 'auto',
          sources: [
            {
              type: 'application/x-mpegURL',
              src: "http://video.com/newhls/live1/index.m3u8",
            },
          ],
          autoplay: true,
          muted: true,
          language: 'zh-CN',
          fluid: false,
          controls: true,
          notSupportedMessage: '此视频暂无法播放，请稍后再试',
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true
          }
        },
        {
          preload: 'auto',
          sources: [
            {
              type: 'application/x-mpegURL',
              src: "http://video.com/newhls/live1/index.m3u8",
            },
          ],
          autoplay: true,
          muted: true,
          language: 'zh-CN',
          // fluid: true,
          controls: true,
          notSupportedMessage: '此视频暂无法播放，请稍后再试',
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true
          }
        },
        {
          preload: 'auto',
          sources: [
            {
              type: 'application/x-mpegURL',
              src: "http://video.com/newhls/live3/index.m3u8",
            },
          ],
          autoplay: true,
          muted: true,
          language: 'zh-CN',
          // fluid: true,
          controls: true,
          notSupportedMessage: '此视频暂无法播放，请稍后再试',
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true
          }
        },
        {
          preload: 'auto',
          sources: [
            {
              type: 'application/x-mpegURL',
              src: "http://video.com/newhls/live3/index.m3u8",
            },
          ],
          autoplay: true,
          muted: true,
          language: 'zh-CN',
          // fluid: true,
          controls: true,
          notSupportedMessage: '此视频暂无法播放，请稍后再试',
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            fullscreenToggle: true
          }
        }
      ],
      queryParams: [],

    };
  },
  watch: {
    dataspaceName(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {
    cellClass() {
      return function (index) {
        switch (this.cellCount) {
          case 1:
            return ['cell-player-1']
          case 4:
            return ['cell-player-4']
          case 6:
            if (index == 1)
              return ['cell-player-6-1']
            if (index == 2)
              return ['cell-player-6-2']
            if (index == 3)
              return ['cell-player-6-none']
            return ['cell-player-6']
          case 9:
            return ['cell-player-9']
          case 16:
            return ['cell-player-16']
          default:
            break;
        }

      }
    },
  },
  created() {
    this.getTree();
  },
  methods: {
    getTree() {
      this.loading = true;
      listTree().then((res) => {
        console.log(res)
        this.dataspaceOptions = res.data;
      })
    },

    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.ueId = data.id;
      // 从设备上获取视频url
      let myPlayer = this.$refs.videoPlayer.player;
      // 替换视频 ...
      myPlayer.src("");
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /**
     * 切换视频
     */
    showVideo() {
      let myPlayer = this.$refs.videoPlayer.player;

      // 用于多个视频源直接切换，但是现在只有一个视频源，
      myPlayer.src("");
    },

    onPlayerPause(player) {
      console.log(player);
    },
    onPlayerPlay(player) {
      console.log('player play!', player)
    },

    playerStateChanged(playerCurrentState) {
      console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied(player) {
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    }
  }

};
</script>

<style scoped>
.cell-tool {
  height: 40px;
  line-height: 30px;
  padding: 0 7px;
}

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

.cell-player-4 {
  width: 50%;
  height: 50% !important;
  box-sizing: border-box;
}

.cell-player-1 {
  width: 100%;
  box-sizing: border-box;
}

.cell-player-6-1 {
  width: 66.66%;
  height: 66.66% !important;
  box-sizing: border-box;
}

.cell-player-6-2 {
  width: 33.33%;
  height: 66.66% !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.cell-player-6-none {
  display: none;
}

.cell-player-6-2-cell {
  width: 100%;
  height: 50% !important;
  box-sizing: border-box;
}

.cell-player-6 {
  width: 33.33%;
  height: 33.33% !important;
  box-sizing: border-box;
}

.cell-player-9 {
  width: 33.33%;
  height: 33.33% !important;
  box-sizing: border-box;
}

.cell-player-16 {
  width: 25%;
  height: 25% !important;
  box-sizing: border-box;
}

.cell {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.video-player {
  height: 100%;
  width: 100%;
  background: #000;
}


</style>