jn_manager/src/views/vab/player/index.vue

<template>
  <div class="player-container">
    <el-divider content-position="left">
      视频地址采用cdn加速服务，开发时需部署到到本地
    </el-divider>
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card shadow="hover">
          <div slot="header">播放传统MP4</div>
          <vab-player-mp4 :config="config1" @player="Player1 = $event" />
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card shadow="hover">
          <div slot="header">播放m3u8，且不暴露视频地址</div>
          <vab-player-hls
            :config="config2"
            @player="Player2 = $event"
          ></vab-player-hls>
        </el-card>
      </el-col>
      <!--<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
        <el-card shadow="hover">
          <div slot="header">播放flv，且不暴露视频地址</div>
          <vab-player-flv
            :config="config3"
            @player="Player3 = $event"
          ></vab-player-flv>
        </el-card>
      </el-col>-->
    </el-row>
  </div>
</template>

<script>
  import { VabPlayerMp4, VabPlayerHls } from '@/plugins/vabPlayer.js'

  export default {
    name: 'Player',
    components: {
      VabPlayerMp4,
      VabPlayerHls,
    },
    data() {
      return {
        config1: {
          id: 'mse1',
          url: 'https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.mp4',
          volume: 1,
          autoplay: false,
        },
        Player1: null,
        config2: {
          id: 'mse2',
          url: 'https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.m3u8',
          volume: 1,
          autoplay: false,
        },
        Player2: null,
        config3: {
          id: 'mse3',
          url: 'https://cdn.jsdelivr.net/gh/chuzhixin/videos@master/video.flv',
          volume: 1,
          autoplay: false,
        },
        Player3: null,
      }
    },
    created() {},
    mounted() {},
    methods: {},
  }
</script>