vue-video-player的github地址戳

安装

cnpm install vue-video-player --save

<template>

  <div class="index">

    <div class="video-bar">

      <div class="video-box">

        <div class="one-video" v-for="(item,index) in playerList" :key="index">

          <p class="tit">{{item.title}}</p>

          <video-player

            class="video-player vjs-custom-skin"

            ref="videoPlayer"

            :playsinline="true"

            :options="playerList[index].options"

          ></video-player>

        </div>

      </div>

    </div>

  </div>

</template>

<script>
引用

import { videoPlayer } from "vue-video-player";

import "video.js/dist/video-js.css";

import "video.js/dist/video-js.css";

export default {

  data() {

    return {

      videoList: [],

      playerList: []

    };

  },

  methods: {},

  created() {

    this.$axios.post("").then(response => {

      if (response.data.code == 200) {

        this.videoList = response.data.data.video;

        for (let i = 0; i < this.videoList.length; i++) {

          let myoption = {

            playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

            autoplay: false, //如果true,浏览器准备好时开始回放。

            muted: false, // 默认情况下将会消除任何音频。

            loop: false, // 导致视频一结束就重新开始。

            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）

            language: "zh-CN",

            aspectRatio: this.videoList[i].type == 1 ? "55:30" : "1:1", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

            sources: [

              {

                src: this.videoList[i].src, // 路径

                type: "video/mp4" // 类型

              }

            ],

            poster: this.videoList[i].poster, //你的封面地址

            notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。

            controlBar: {

              timeDivider: true,

              durationDisplay: true,

              remainingTimeDisplay: false,

              fullscreenToggle: true //全屏按钮

            }

          };

          let obj = {

            title: this.videoList[i].title,

            options: myoption

          };

          this.playerList.push(obj);

        }

      }

    });

  },

  components: {

    videoPlayer

  }

};

</script>

<style lang="less">

.index {

  .video-bar {

    text-align: center;

    padding-bottom:20px;

    .video-box {

      .one-video {

        width: 90%;

        margin: 0 auto;

        .tit{

            margin:20px 0 8px;

            font-size:17px;

            

        }

      }

    }

  }

  .video-js .vjs-big-play-button {

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 1.5em;

    height: 1.5em;

    border-radius: 1.5em;

  }

}

</style>