Vue視頻播放器

一、可自定義樣式

Vue視頻播放器可以根據需求自定義樣式，如修改播放器的背景色、字體顏色、大小等。以下是示例代碼：

  <template>
    <div class="my-player">
      <video ref="videoPlayer"
             :src="videoSrc"
             :autoplay="autoplay"
             :controls="controls"
             :poster="poster"
             :width="width"
             :height="height"></video>
    </div>
  </template>

  <style>
    .my-player {
      background-color: #000;
      color: #fff;
      font-size: 18px;
    }
  </style>

上面的代碼中，我們使用了一個自定義的樣式類my-player，來控制播放器的背景色、字體顏色和大小。

二、支持多種格式的視頻

Vue視頻播放器支持常見的各種視頻格式，如MP4、AVI、FLV等。以下是示例代碼：

  <template>
    <div class="my-player">
      <video ref="videoPlayer"
             :src="videoSrc"
             :autoplay="autoplay"
             :controls="controls"
             :poster="poster"
             :width="width"
             :height="height"></video>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {
          videoSrc: 'example.mp4',
          autoplay: false,
          controls: true,
          poster: 'poster.png',
          width: 640,
          height: 360
        }
      }
    }
  </script>

上面的代碼中，我們設置了一個MP4格式的視頻，同時也設置了視頻的自動播放、控制欄、封面、寬度和高度。

三、支持視頻播放進度條

Vue視頻播放器支持視頻播放進度條，可以通過拖動進度條控制視頻的播放進度。以下是示例代碼：

  <template>
    <div class="my-player">
      <progress ref="progressBar"
                :value="currentTime"
                :max="duration"
                @click="jumpPlay">
      </progress>
      <video ref="videoPlayer"
             :src="videoSrc"
             :autoplay="autoplay"
             :controls="controls"
             :poster="poster"
             :width="width"
             :height="height"
             @timeupdate="timeUpdate"></video>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {
          videoSrc: 'example.mp4',
          autoplay: false,
          controls: true,
          poster: 'poster.png',
          width: 640,
          height: 360,
          currentTime: 0,
          duration: 0
        }
      },
      methods: {
        timeUpdate () {
          const videoPlayer = this.$refs.videoPlayer;
          this.currentTime = videoPlayer.currentTime;
          this.duration = videoPlayer.duration;
        },
        jumpPlay (event) {
          const progressBar = this.$refs.progressBar;
          const videoPlayer = this.$refs.videoPlayer;
          const rect = progressBar.getBoundingClientRect();
          const rate = (event.clientX - rect.left) / rect.width;
          videoPlayer.currentTime = videoPlayer.duration * rate;
        }
      }
    }
  </script>

上面的代碼中，我們使用了視頻播放器自帶的progress組件來實現了一個視頻播放進度條。同時，我們還給進度條添加了滑鼠點擊事件，可以通過拖動進度條控制視頻的播放進度。

四、支持全屏播放

Vue視頻播放器支持全屏播放模式，可以讓用戶在感受視頻樂趣的同時，還能夠全屏欣賞視頻。以下是示例代碼：

  <template>
    <div class="my-player">
      <video ref="videoPlayer"
             :src="videoSrc"
             :autoplay="autoplay"
             :controls="controls"
             :poster="poster"
             :width="width"
             :height="height"></video>
      <button @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏播放' }}</button>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {
          videoSrc: 'example.mp4',
          autoplay: false,
          controls: true,
          poster: 'poster.png',
          width: 640,
          height: 360,
          isFullScreen: false
        }
      },
      methods: {
        toggleFullScreen () {
          const videoPlayer = this.$refs.videoPlayer;
          const el = videoPlayer.parentNode;
          if (!this.isFullScreen) {
            if (el.requestFullscreen) {
              el.requestFullscreen();
            } else if (el.webkitRequestFullscreen) {
              el.webkitRequestFullscreen();
            } else if (el.mozRequestFullScreen) {
              el.mozRequestFullScreen();
            }
          } else {
            if (document.exitFullscreen) {
              document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
              document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
              document.mozCancelFullScreen();
            }
          }
          this.isFullScreen = !this.isFullScreen;
        }
      }
    }
  </script>

上面的代碼中，我們使用了video播放器自帶的fullscreen API來實現了全屏播放模式，同時，我們還添加了一個切換全屏播放和退出全屏的按鈕，讓用戶直觀地感受全屏播放的效果。

五、支持視頻倍速播放

Vue視頻播放器支持視頻倍速播放，可以根據需求將視頻播放速度加快或減慢。以下是示例代碼：

  <template>
    <div class="my-player">
      <video ref="videoPlayer"
             :src="videoSrc"
             :autoplay="autoplay"
             :controls="controls"
             :poster="poster"
             :width="width"
             :height="height"
             :playbackRate="playbackRate"></video>
      <select v-model="playbackRate">
        <option value="1.0">正常速度</option>
        <option value="0.5">0.5倍速度</option>
        <option value="1.5">1.5倍速度</option>
        <option value="2.0">2倍速度</option>
      </select>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {
          videoSrc: 'example.mp4',
          autoplay: false,
          controls: true,
          poster: 'poster.png',
          width: 640,
          height: 360,
          playbackRate: 1.0
        }
      }
    }
  </script>

上面的代碼中，我們添加了一個select組件，用於選擇視頻的倍速播放。可以看到，我們可以根據需求將視頻的播放速度加快或減慢。

六、總結

以上就是Vue視頻播放器的一些常見功能的實現代碼，包括自定義樣式、支持多種格式的視頻、支持視頻播放進度條、支持全屏播放和支持視頻倍速播放。我們可以根據業務需求，自由組合和擴展這些功能，為用戶提供更好的視頻播放體驗。