vue实现录播播放

Vue 实现录播播放

使用 video.js 实现

安装 video.js 和相关的 Vue 适配器：

npm install video.js @videojs-player/vue

在 Vue 组件中引入并使用：

<template>
  <video-player
    src="你的视频地址.mp4"
    controls
    autoplay
    :loop="false"
    :volume="0.6"
  />
</template>

<script>
import { defineComponent } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'

export default defineComponent({
  components: {
    VideoPlayer
  }
})
</script>

使用原生 HTML5 video 元素

简单的视频播放器实现：

<template>
  <div>
    <video
      ref="videoPlayer"
      controls
      width="640"
      height="360"
    >
      <source src="你的视频地址.mp4" type="video/mp4">
      您的浏览器不支持 HTML5 视频
    </video>
    <div>
      <button @click="play">播放</button>
      <button @click="pause">暂停</button>
      <button @click="stop">停止</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    play() {
      this.$refs.videoPlayer.play()
    },
    pause() {
      this.$refs.videoPlayer.pause()
    },
    stop() {
      const video = this.$refs.videoPlayer
      video.pause()
      video.currentTime = 0
    }
  }
}
</script>

添加播放列表功能

实现多个视频的播放列表：

<template>
  <div>
    <video
      ref="videoPlayer"
      controls
      width="640"
      height="360"
    ></video>
    <ul>
      <li
        v-for="(video, index) in videos"
        :key="index"
        @click="changeVideo(video.src)"
      >
        {{ video.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videos: [
        { title: '视频1', src: 'video1.mp4' },
        { title: '视频2', src: 'video2.mp4' },
        { title: '视频3', src: 'video3.mp4' }
      ]
    }
  },
  methods: {
    changeVideo(src) {
      this.$refs.videoPlayer.src = src
      this.$refs.videoPlayer.load()
      this.$refs.videoPlayer.play()
    }
  }
}
</script>

添加进度条控制

自定义视频进度控制：

<template>
  <div>
    <video
      ref="videoPlayer"
      @timeupdate="updateProgress"
      controls
      width="640"
      height="360"
    ></video>
    <input
      type="range"
      min="0"
      max="100"
      step="1"
      v-model="progress"
      @input="seek"
    />
    <span>{{ currentTime }} / {{ duration }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      currentTime: '00:00',
      duration: '00:00'
    }
  },
  methods: {
    updateProgress() {
      const video = this.$refs.videoPlayer
      this.progress = (video.currentTime / video.duration) * 100
      this.currentTime = this.formatTime(video.currentTime)
      this.duration = this.formatTime(video.duration)
    },
    seek() {
      const video = this.$refs.videoPlayer
      video.currentTime = (this.progress / 100) * video.duration
    },
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const secs = Math.floor(seconds % 60)
      return `${minutes}:${secs < 10 ? '0' : ''}${secs}`
    }
  }
}
</script>

添加全屏功能

实现全屏播放功能：

<template>
  <div>
    <video
      ref="videoPlayer"
      controls
      width="640"
      height="360"
    ></video>
    <button @click="toggleFullscreen">全屏</button>
  </div>
</template>

<script>
export default {
  methods: {
    toggleFullscreen() {
      const video = this.$refs.videoPlayer
      if (!document.fullscreenElement) {
        video.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    }
  }
}
</script>

添加画中画功能

实现画中画模式：

<template>
  <div>
    <video
      ref="videoPlayer"
      controls
      width="640"
      height="360"
    ></video>
    <button @click="togglePictureInPicture">画中画</button>
  </div>
</template>

<script>
export default {
  methods: {
    async togglePictureInPicture() {
      const video = this.$refs.videoPlayer
      try {
        if (video !== document.pictureInPictureElement) {
          await video.requestPictureInPicture()
        } else {
          await document.exitPictureInPicture()
        }
      } catch (error) {
        console.error('画中画错误:', error)
      }
    }
  }
}
</script>

添加播放速度控制

实现播放速度调整：

<template>
  <div>
    <video
      ref="videoPlayer"
      controls
      width="640"
      height="360"
    ></video>
    <select v-model="playbackRate" @change="changeSpeed">
      <option value="0.5">0.5x</option>
      <option value="1" selected>1x</option>
      <option value="1.5">1.5x</option>
      <option value="2">2x</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playbackRate: 1
    }
  },
  methods: {
    changeSpeed() {
      this.$refs.videoPlayer.playbackRate = this.playbackRate
    }
  }
}
</script>

这些实现方式可以根据实际需求进行组合和扩展，构建功能更完善的录播播放器。