vue实现视频播放

实现视频播放的基本方法

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

使用HTML5原生video标签

在Vue组件模板中直接使用<video>元素：

<template>
  <div>
    <video 
      ref="videoPlayer"
      controls
      :src="videoSrc"
      width="600"
      @play="onPlay"
      @pause="onPause"
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'path/to/video.mp4'
    }
  },
  methods: {
    onPlay() {
      console.log('视频开始播放')
    },
    onPause() {
      console.log('视频暂停')
    }
  }
}
</script>

使用第三方视频播放器库

对于更复杂的需求，可以使用专门的视频播放器库如vue-video-player：

安装依赖：

npm install vue-video-player video.js

组件实现：

<template>
  <div>
    <video-player 
      :options="playerOptions"
      @ready="onPlayerReady"
    />
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          type: 'video/mp4',
          src: 'path/to/video.mp4'
        }]
      }
    }
  },
  methods: {
    onPlayerReady(player) {
      console.log('播放器已准备好', player)
    }
  }
}
</script>

自定义播放控制

通过ref访问video元素实现自定义控制：

<template>
  <div>
    <video ref="videoElement" :src="videoSrc"></video>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

<script>
export default {
  methods: {
    play() {
      this.$refs.videoElement.play()
    },
    pause() {
      this.$refs.videoElement.pause()
    }
  }
}
</script>

处理跨浏览器兼容性

不同浏览器对视频格式支持不同，提供多种格式源：

<video controls width="600">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持HTML5视频
</video>

响应式视频播放器

使视频播放器适应不同屏幕尺寸：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

直播流播放

对于直播场景，可以使用HLS或DASH协议：

// 使用hls.js实现HLS直播
import Hls from 'hls.js'

export default {
  mounted() {
    const video = this.$refs.videoElement
    if(Hls.isSupported()) {
      const hls = new Hls()
      hls.loadSource('http://example.com/live/stream.m3u8')
      hls.attachMedia(video)
    }
  }
}