Vue和Canvas：如何实现视频播放器的定制化界面

1. 为什么需要定制化界面的视频播放器?

随着移动互联网的飞速发展，视频成为了人们日常娱乐和学习中的必不可少的元素。然而，市面上常见的视频播放器界面，大多数都是通用的，不能满足用户不同的视觉需求。而定制化界面的视频播放器则可以根据用户的喜好和需求来设计，使得用户更加满意。因此，定制化界面的视频播放器越来越受到开发者的重视并成为了一种趋势。

2. 定制化界面的开发方式

2.1 基于HTML和CSS的开发方式

这种方式需要依据实际需要制定样式，常见的方法是使用HTML和CSS进行界面设计。HTML可以创建播放器的结构和布局， CSS则可以定义样式来定制化界面。该方法方便简单，但对于复杂设计需要一定的技术背景才能实现。而且，HTML和CSS的兼容问题也需要考虑。

2.2 基于Vue和Canvas的开发方式

Vue是一种JavaScript框架，用于构建用户界面，而Canvas是一个HTML5元素，用于渲染图像。基于Vue和Canvas的开发方式可以让开发者更方便地进行JavaScript开发，创建自定义的交互式视频播放器。相比基于HTML和CSS的开发方式，这种方式需要更多的编程技能，但它可以提供更灵活的交互性和更好的用户体验。

3. 使用Vue和Canvas创建定制化界面的视频播放器

3.1 依赖

在开始之前，需要确认以下依赖是否已安装。

// Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
// Video.js
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
// videojs-contrib-hls
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>

3.2 项目结构

先看一下项目结构。

components/
--MyPlayer.vue
--Progress.vue
--VolumeButton.vue
--PlayButton.vue
--QualityButton.vue
App.vue
main.js

MyPlayer组件是主体组件，包含了进度栏组件、音量调节按钮组件、播放按钮组件、画质切换按钮组件，用于控制视频播放器的交互均在这个组件中实现。

3.3 Video.js 和 hls.js

在MyPlayer组件中，需要创建一个video元素并使用Video.js对其进行操作。同时，在使用Video.js播放HLS视频时，需要安装videojs-contrib-hls插件：

// 定义和引入Video.js插件
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import 'videojs-contrib-hls/dist/videojs-contrib-hls.min.js'
export default {
  // 创建video元素，并使用videojs对其进行控制
  mounted () {
    this.player = videojs(this.$refs.videoPlayer, this.options, () => {
      console.log('视频初始化完成')
      this.player.play()
    });
    
    // 使用深度merge策略，自定义组件样式
    this.player.updateStyle({
      controlBar: {
        playToggle: {},
        volumePanel: {},
        progressControl: {
          seekBar: {
            loadProgressBar: {},
            playProgressBar: {},
            playProgress: {},
          },
          currentTimeDisplay: {},
          durationDisplay: {},
          timeDivider: {}
        },
        customControlSpacer: {},
        qualityButton: {},
        fullscreenToggle: {}
      }
    });
  },
  // 销毁player对象
  beforeDestroy () {
    if (this.player) {
      this.player.dispose()
    }
  },
  data () {
    return {
      player: null,
      options: {
        responsive: true,
        sources: [{
          src: 'https://example.com/playlist.m3u8',
          type: 'application/x-mpegURL',
          withCredentials: false,
          preload: 'auto'
        }],
        aspectRatio: '16:9',
        playbackRates: [0.5, 1, 1.5, 2],
        liveui: true,
        width: null,
        height: null,
        controlBar: {
          children: [
            'playToggle',
            'progressControl',
            'volumePanel',
            'qualityButton',
            'fullscreenToggle'
          ],
          playToggle: {},
          volumePanel: {},
          progressControl: {
            children: [
              'seekBar',
              'currentTimeDisplay',
              'timeDivider',
              'durationDisplay'
            ],
            seekBar: {
              children: [
                'loadProgressBar',
                'playProgressBar'
              ],
              playProgressBar: {},
              loadProgressBar: {},
              playProgress: {},
              mouseTimeDisplay: {},
              timeTooltip: {}
            },
            currentTimeDisplay: {},
            durationDisplay: {},
            timeDivider: {}
          },
          customControlSpacer: {},
          qualityButton: {},
          fullscreenToggle: {}
        }
      }
    }
  }
}

3.4 定制化界面

下面是三个自定义组件的代码示例：

3.4.1 自定义进度栏组件

export default {
  name: 'progress',
  props: ['percent'],
  template: `
    <div class="progress-container" ref="progressContainer" @click="seek">
      <div :style="{ width: percent + '%' }"></div>
    </div>
  `,
  methods: {
    seek (event) {
      let percent = event.offsetX / this.$refs.progressContainer.offsetWidth
      this.$emit('seek', percent)
    }
  }
}

3.4.2 自定义音量调节按钮组件

export default {
  name: 'volume-button',
  props: ['player'],
  data: function () {
    return {
      volume: null
    }
  },
  template: `
    <button class="vjs-volume-button vjs-menu-button vjs-button" type="button" title="Mute">
      <span style="display: none;" class="vjs-icon-placeholder"></span>
      <span>音量</span>
      <div class="vjs-menu">
        <div class="vjs-volume-panel vjs-menu-content">
          <div v-on:click="toggleMute" class="vjs-volume-panel vjs-menu-content vjs-volume-panel-vertical">
            <div :style="{ height: (100 - volume) + '%' }" class="vjs-volume-level"></div>
          </div>
        </div>
      </div>
    </button>
  `,
  // 订阅视频播放器的volumechange事件，用于更新组件内的音量状态
  mounted () {
    this.player.on('volumechange', () => {
      this.volume = Math.round(this.player.volume() * 100) || 0
    })
  },
  computed: {
    isMuted: function () {
      return this.player.muted()
    },
    icon: function () {
      if (this.volume === 0 || this.isMuted) {
        return 'vjs-icon-muted'
      } else if (this.volume < 50) {
        return 'vjs-icon-volume-low'
      } else {
        return 'vjs-icon-volume-high'
      }
    }
  },
  methods: {
    toggleMute: function () {
      // 切换静音状态
      if (this.isMuted) {
        this.player.muted(false)
      } else {
        this.player.muted(true)
      }
    }
  }
}

3.4.3 自定义播放按钮组件

export default {
  name: 'play-button',
  props: ['player'],
  data: function () {
    return {
      isPlaying: null
    }
  },
  template: `
    <button class="vjs-play-control vjs-control vjs-button" :class="{ 'vjs-ended': !player.duration() || player.currentTime() === player.duration() }" tabindex="0" type="button" v-on:click="togglePlay">
      <span></span>
    </button>
  `,
  // 订阅视频播放器的play和pause事件，用于更新组件内的播放状态
  mounted () {
    this.player.on(['play', 'pause'], () => {
      this.isPlaying = this.player.paused() ? false : true
    })
  },
  methods: {
    togglePlay: function () {
      if (this.isPlaying) {
        this.player.pause()
      } else {
        this.player.play()
      }
    }
  }
}

3.4.4 自定义画质切换按钮组件

export default {
  name: 'quality-button',
  props: {
    player: {
      type: Object,
      default: null
    },
    qualities: {
      type: Array,
      default: []
    }
  },
  data: function () {
    return {
      isActive: false
    }
  },
  template: `
    <button :class="{ active: isActive }" @click="toggleActive">
      720P
      <ul class="dropdown-menu">
        <li v-for="(item, index) in qualities" @click="changeQuality(item)">
          {{ item }}
        </li>
      
    </button>
  `,
  methods: {
    toggleActive: function () {
      this.isActive = !this.isActive
    },
    changeQuality: function (quality) {
      this.player.src(quality.src);
      this.player.play();
      this.toggleActive();
    }
  }
}

4. 结论

通过使用Vue和Canvas可以创建定制化界面的视频播放器。在开发中需要注意细节，如播放器样式的设计、事件的交互等，同时也要关注兼容性和优化问题。通过不断的尝试和实践，可以创造更漂亮、更好用的视频播放器界面，提升用户的观影体验。