vue+video-player组件应用

本篇文章可用于vue项目，PC端视频播放功能。

具体实现：

一、安装video-player组件：

1、安装组件：

npm i vue-video-player --save

2、main.js文件全局注册组件：

// 视频组件，全局注册
import VideoPlayer from 'vue-video-player/src';
import 'vue-video-player/src/custom-theme.css';
import 'video.js/dist/video-js.css';
Vue.use(VideoPlayer);

二、配置video-player公共组件：

注意，本组件设置的属性为一加载就播放，使用时可按自己情况酌情修改；

<template>
  <div class="video">
  	<!-- 使用组件
      增加loading，优化视频播放缓慢问题
    -->
    <video-player class="video-player"
      ref="videoPlayer"
      v-loading="loading"
      element-loading-background="rgb(0,0,0)"
      :playsinline="true"
      :options="playerOptions"
    ></video-player>
  </div>
</template>

export default {
  props: {
    mp4Url: {
      type: String,
      // default: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4'
      default: ''
    },
    mp4Pic: {
      type: String,
      // default: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png'
      default: ''
    },
    // fileAreaHeight: {
    //   type: Number,
    //   default: 500
    // },
    fileType: {
      type: String,
      default: 'mp4' // 资源的类型
    }
  },
  computed: { // 使用计算属性
    playerOptions () {
      const playerOptionsObj = {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 视频播放速度
        autoplay: true, // 如果true，浏览器准备好时开始回放---是否一加载即播放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）。
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）。
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/' + this.fileType,	// 资源格式写法：'video/mp4'，否则控制台会出现notSupportedMessage设置的错误。
          src: this.mp4Url // 视频url地址
        }],
        poster: this.mp4Pic, // 视频封面地址
        // width: document.documentElement.clientWidth,
        // height: this.fileAreaHeight,	// 设置高度，fluid需要设置成flase
        notSupportedMessage: '此视频暂无法播放...', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          // timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      }
      return playerOptionsObj;
    }
  },
  data() {
    return {
      loading: true
    };
  },
  mounted() {
    this.$refs.videoPlayer.$refs.video.addEventListener('loadeddata', e => {
      console.log('提示视频的元数据已加载')
      console.log(e)
      this.loading = false;
    })
  },
  methods: {
    loadstart(e) {
      console.log('提示视频的元数据已加载', e)
    }
  },
};

::v-deep {
  .video-js {
    .vjs-big-play-button {
      width: 1.5em;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: none;
    }
    .vjs-play-progress:before {
      font-size: 1em;
      top: 50%;
      transform: translateY(-50%);
    }
    .vjs-slider-horizontal .vjs-volume-level:before {
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

三、应用video-player组件：

注意，这里额外配置一次path地址，目的为优化页面中多个视频同时加载问题；
noVideo可自行配置样式，应与视频加载后的样式保持一致，优化体验感，对未加载的视频组件进行占空处理；
实际应用中可去除此判断外壳，直接引入组件并配置path属性；

<Videoplayer v-if="newPath" :mp4Url="newPath"></Videoplayer>
<div class="noVideo" v-else>
  <div class="videoIcon" @click="isPlay(index, ind)"></div>
</div>

import Videoplayer from '@/components/Videoplayer'; // 引入上面创建的组件
export default {
  components: { Videoplayer },
  data() {
    return {
      loading: true,
      path: '', // 视频地址
      newPath: null
    }
  },
  methods: {
  	// 播放视频
    isPlay(index, ind) {
      this.newPath = this.path;
    }
  }
}

.box {
  width: 300px;
  // margin: 0 15px 15px 0;
  .noVideo {
    height: calc(300px * 9 / 16);  // 这里主要为9：16的样式计算
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    .videoIcon {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: rgba(43, 51, 63, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #fff;
      font-size: 30px;
      &::before {
        content: "\F101";
        font-family: VideoJS;
        font-weight: normal;
        font-style: normal;
      }
    }
    &:hover .videoIcon {
      background: rgba(115, 133, 159, 0.5)
    }
  }
}