技術標籤：vuejscss

vue + vue-video-player新增多個視訊案例，包含更改視訊播放外掛樣式CSS

<template>
  <div>
                <div class="player" v-for="(item,index) in videoConfig" :key="index">
                  <video-player class="video-player vjs-custom-skin"
 

                                ref="videoPlayer"
                                :playsinline="true"
                                style="object-fit:fill;margin-top: 10px"
                                :x5-video-player-fullscreen="true"
                                @pause=
 
"onPlayerPause($event)"
                                @play="onPlayerPlay($event)"
                                @fullscreenchange="onFullscreenChange($event)"
                                @click="fullScreen"
                                :options="item"
 

                  >
                  </video-player>
                </div>
  </div>
</template>

<script>
  import {videoPlayer} from 'vue-video-player'

  require('vue-video-player/node_modules/video.js/dist/video-js.css')

  export default {
    data () {
      return {
        videoList: {},
        videoConfig: [],
      }
    },
    components: {
      videoPlayer,
    },
    mounted () {
      this.videoInfo()
      this.getVideoList()
    },
    computed: {
      player () {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      // 視訊介面
      videoInfo () {
        this.$http({
          url: this.$http.adornUrl('介面地址'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.videoList = data.info
          this.getVideoList()
        })
      },
      getVideoList () {
        for (let i in this.videoList) {
          this.videoConfig.push({
            // playerOptions: {
            // playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
            // recordTime: this.videoList[i].recordTime,
            autoplay: false, // 如果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/mp4',
              // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
              src: this.videoList[i].videoUrl
            }],
            // poster: 'http://vjs.zencdn.net/v/oceans.png',
            poster: '',
            width: document.documentElement.clientWidth,
            notSupportedMessage: '此視訊暫無法播放，請稍後再試', // 允許覆蓋Video.js無法播放媒體源時顯示的預設資訊。
            controlBar: {
              timeDivider: true,
              durationDisplay: true,
              remainingTimeDisplay: false,
              fullscreenToggle: true  // 全屏按鈕
            }
          })
          // }
        }
      }
      }
    }
  }
</script>

<style scoped>

  .video-js .vjs-big-play-button {
    width: 72px;
    height: 72px;
    border-radius: 100%;
    z-index: 100;
    background-color: #ffffff;
    border: solid 1px #979797;
  }

  .vido {
    /*border: 1px solid lightgray;*/
    height: 765px;
  }
  .player {
    margin: 15px;
  }

</style>
<style>
  /*播放按鈕設定成寬高一致，圓形，居中*/
  .vjs-custom-skin > .video-js .vjs-big-play-button {
    background-color: rgba(0, 0, 0, 0.45);
    font-size: 2em;
    border-radius: 50%;
    height: 2em !important;
    line-height: 2em !important;
    margin-top: -1em !important;
    margin-left: -1em !important;
    width: 2em !important;
    outline: none;
  }

  .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /*control-bar佈局時flex，通過order調整剩餘時間的位置到進度條右邊*/
  .vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time {
    order: 3 !important;
  }

  /*進度條背景軌道*/
  .video-js .vjs-slider {
    border-radius: 1em;
  }

  /*進度條進度*/
  .vjs-custom-skin > .video-js .vjs-play-progress, .vjs-custom-skin > .video-js .vjs-volume-level {
    border-radius: 1em;
  }

  /*滑鼠進入播放器後，播放按鈕顏色會變*/
  .video-js:hover .vjs-big-play-button, .vjs-custom-skin > .video-js .vjs-big-play-button:active, .vjs-custom-skin > .video-js .vjs-big-play-button:focus {
    background-color: rgba(0, 0, 0, 0.4) !important;
  }

  /*control bar*/
  .video-js .vjs-control-bar {
    background-color: rgba(0, 0, 0, 0.2) !important;
  }

  /*點選按鈕時不顯示藍色邊框*/
  .video-js .vjs-control-bar button {
    outline: none;
  }
</style>