vue + video.js实现视频列表页（多个视频）

安装video.js

npm install video.js

在main.js中引用

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

页面使用

<!-- 视频列表 -->
<template>
  <div class="district-page">
    
      <div class="district-text">
        <div v-for="item in videoList" :key="item.id" style="margin-top:15px">
          <div class="test_two_box">
            <video :id="'wVideo'+item.Id" class="video-js" style="width:100%;height:100%">
              <source :src="item.Url" type="video/mp4" />
            </video>
          </div>
        </div>
      </div>
   
  </div>
</template>

<script>
import { CorpStyleList } from '@/apis/apis'
export default {
  data() {
    return {
      videoList: [],
      videoHtmlList: '',
    }
  },
  created() {
    this.GetVideo()
  },
  methods: {
    GetVideo() {
      CorpStyleList({TopNum:0}).then(res => {
        this.videoList = res;
        if(this.videoList.length > 0 ){
          this.$nextTick(() => {
            this.initVideo();
          })
        }
        
      })
    },
    initVideo(){
      let _this = this; 
      this.videoList.forEach((element,i) => {
        let myPlayer = this.$video(`wVideo${element.Id}`, {
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: false,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "300px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "150px",
          //封面图
          poster: element.CoverUrl
        });
        // 页面只能播放一个视屏限制
        myPlayer.on("play", function(){
          _this.videoList.forEach((element,i) => {
            let elsePlayer = _this.$video(`wVideo${element.Id}`);
            if(elsePlayer.id_ !== myPlayer.id_){
              elsePlayer.pause();
            }
          });
        });
      });
    },
  },
  destroyed() {   // 解决重新进入页面视频无法重新加载播放的问题，需要在页面销毁时销毁播放器
    this.videoList.forEach((element,i) => {
      let myPlayer = this.$video(`wVideo${element.Id}`);
      myPlayer.dispose()
    });
  }
};
</script>

<style lang="less" scoped>
  .district-page {
    text-align: left;
    .district-text {
      .test_two_box {
        width: 300px;
        height: 150px;
        margin: 0 auto;
        .video-js {
          width: 100%;
          height: 100%;
          background-color: #f8f8f8;
          /deep/.vjs-big-play-button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            line-height: 60px;
            left: 50%;
            top: 50%;
            transform: translate(-30px,-30px);
            border: 1px solid #fff;
          }
          /deep/.vjs-control-bar {
            width: 100%;
            height: 30px;
            line-height: 30px;
            .vjs-play-control,
            .vjs-volume-panel,
            .vjs-fullscreen-control {
              width: 30px;
              .vjs-button {
                width: 100%;
              }
            }
            .vjs-time-control {
              padding: 0;
              line-height: 30px;
            }
            .vjs-picture-in-picture-control {
              display: none!important;
            }
            .vjs-progress-control {
              .vjs-play-progress:before {
                top: -13px;
                right: -6px;
              }
            }
            .vjs-volume-control {
              display: none!important;
            }
          }
        }
      }
     
    }
  }

</style>

<style lang="less">
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;
}
</style>