vue 实现视频播放

vue 实现视频播放的方法

在Vue中实现视频播放可以通过多种方式完成，以下是几种常见的方法：

使用HTML5的video标签

在Vue组件中直接使用HTML5的video标签是最简单的方式。这种方法适用于本地视频文件或远程视频链接。

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

使用第三方库vue-video-player

vue-video-player是一个基于Video.js的Vue组件，提供了丰富的视频播放功能。

安装依赖：

npm install vue-video-player video.js

使用示例：

<template>
  <video-player
    :options="playerOptions"
    :playsinline="true"
    customEventName="customstatechangedeventname"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
  />
</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: 'your-video.mp4'
        }]
      }
    }
  },
  methods: {
    onPlayerPlay(player) {
      console.log('player play', player)
    },
    onPlayerPause(player) {
      console.log('player pause', player)
    }
  }
}
</script>

使用plyr库

Plyr是一个简单、轻量级的HTML5媒体播放器，支持视频和音频。

安装依赖：

npm install plyr vue-plyr

使用示例：

<template>
  <vue-plyr>
    <video>
      <source src="your-video.mp4" type="video/mp4">
    </video>
  </vue-plyr>
</template>

<script>
import VuePlyr from 'vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'

export default {
  components: {
    VuePlyr
  }
}
</script>

使用流媒体播放器（如HLS.js）

对于流媒体视频（如.m3u8格式），可以使用hls.js库。

安装依赖：

npm install hls.js

使用示例：

<template>
  <video ref="video" controls width="600"></video>
</template>

<script>
import Hls from 'hls.js'

export default {
  mounted() {
    const video = this.$refs.video
    const videoSrc = 'your-stream.m3u8'

    if (Hls.isSupported()) {
      const hls = new Hls()
      hls.loadSource(videoSrc)
      hls.attachMedia(video)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play()
      })
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = videoSrc
      video.addEventListener('loadedmetadata', () => {
        video.play()
      })
    }
  }
}
</script>

自定义视频播放器组件

如果需要完全自定义的视频播放器，可以创建一个Vue组件，控制播放、暂停、音量等功能。

<template>
  <div class="custom-player">
    <video ref="video" :src="videoSrc"></video>
    <div class="controls">
      <button @click="togglePlay">{{ isPlaying ? 'Pause' : 'Play' }}</button>
      <input type="range" v-model="volume" min="0" max="1" step="0.1" @input="setVolume">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'your-video.mp4',
      isPlaying: false,
      volume: 1
    }
  },
  methods: {
    togglePlay() {
      const video = this.$refs.video
      if (this.isPlaying) {
        video.pause()
      } else {
        video.play()
      }
      this.isPlaying = !this.isPlaying
    },
    setVolume() {
      this.$refs.video.volume = this.volume
    }
  }
}
</script>

<style>
.custom-player {
  position: relative;
  width: 600px;
}
.controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
</style>

以上方法涵盖了从简单到复杂的视频播放实现方式，可以根据项目需求选择合适的方法。对于简单的需求，使用HTML5 video标签足够；对于需要更多功能和更好用户体验的场景，可以考虑使用第三方库。