vue项目实现视频播放

实现视频播放的基本方法

在Vue项目中实现视频播放可以通过HTML5的<video>标签或第三方库来完成。以下是几种常见的方法：

使用HTML5 <video>标签 在Vue组件中直接使用<video>标签是最简单的方式：

<template>
  <video controls width="600">
    <source src="path/to/video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</template>

使用第三方播放器库 对于更复杂的需求，可以使用专门的视频播放器库如Video.js、plyr等：

// 安装Video.js
npm install video.js

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, {
      controls: true,
      sources: [{
        src: 'path/to/video.mp4',
        type: 'video/mp4'
      }]
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

实现高级功能

自定义控制栏 通过Video.js可以轻松自定义控制栏：

this.player = videojs(this.$refs.videoPlayer, {
  controls: true,
  controlBar: {
    playToggle: true,
    volumePanel: true,
    currentTimeDisplay: true,
    timeDivider: true,
    durationDisplay: true,
    progressControl: true,
    fullscreenToggle: true
  }
})

添加字幕 HTML5视频支持WebVTT格式的字幕：

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

处理自适应流媒体

HLS/DASH支持 对于自适应流媒体，需要额外插件：

// 安装HLS插件
npm install @videojs/http-streaming

// 在项目中引入
import '@videojs/http-streaming'

使用示例

this.player = videojs(this.$refs.videoPlayer, {
  html5: {
    hls: {
      overrideNative: true
    },
    dash: {
      overrideNative: true
    }
  }
})

移动端优化

全屏处理 移动端需要特殊处理全屏功能：

// 安装全屏插件
npm install @videojs/video.js-fullscreen

// 使用
import fullscreen from '@videojs/video.js-fullscreen'
videojs.registerPlugin('fullscreen', fullscreen)

触摸控制 添加触摸事件处理：

this.player.on('touchstart', () => {
  if (this.player.paused()) {
    this.player.play()
  } else {
    this.player.pause()
  }
})

性能优化

懒加载视频 实现视频的懒加载：

<video preload="none" poster="placeholder.jpg">
  <source data-src="video.mp4" type="video/mp4">
</video>

// 当视频进入视口时加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const video = entry.target
      video.querySelector('source').src = video.querySelector('source').dataset.src
      video.load()
      observer.unobserve(video)
    }
  })
})

observer.observe(this.$refs.videoPlayer)

自适应分辨率 根据网络条件切换视频质量：

// 网络检测
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection
if (connection) {
  const videoSrc = connection.effectiveType === '4g' ? 'high.mp4' : 'low.mp4'
  this.player.src({ type: 'video/mp4', src: videoSrc })
}

错误处理

添加错误处理 捕获并处理播放错误：

this.player.on('error', () => {
  console.error('播放错误:', this.player.error().message)
  // 显示错误信息或切换到备用源
})

备用源设置 提供多个备用源：

this.player.src([
  { type: 'video/mp4', src: 'primary.mp4' },
  { type: 'video/mp4', src: 'fallback.mp4' }
])