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视频播放器的一些常见功能的实现代码，包括自定义样式、支持多种格式的视频、支持视频播放进度条、支持全屏播放和支持视频倍速播放。我们可以根据业务需求，自由组合和扩展这些功能，为用户提供更好的视频播放体验。