vue 实现视频

Vue 实现视频播放功能

使用 Vue 实现视频播放可以通过 HTML5 的 <video> 标签结合 Vue 的动态绑定和事件处理来实现。以下是几种常见的实现方式：

基础视频播放

在 Vue 组件中直接使用 <video> 标签，通过 v-bind 动态绑定视频源和其他属性。

<template>
  <div>
    <video 
      ref="videoPlayer" 
      :src="videoSrc" 
      controls 
      width="600"
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4'
    }
  }
}
</script>

动态控制视频播放

通过 Vue 的 ref 和事件绑定实现播放、暂停等控制功能。

<template>
  <div>
    <video 
      ref="videoPlayer" 
      :src="videoSrc" 
      width="600"
    ></video>
    <button @click="playVideo">播放</button>
    <button @click="pauseVideo">暂停</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4'
    }
  },
  methods: {
    playVideo() {
      this.$refs.videoPlayer.play()
    },
    pauseVideo() {
      this.$refs.videoPlayer.pause()
    }
  }
}
</script>

使用第三方库

对于更复杂的视频播放需求，可以使用第三方库如 video.js 或 vue-video-player。

安装 vue-video-player：

npm install vue-video-player

使用示例：

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

<script>
import { videoPlayer } from 'vue-video-player'

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'https://example.com/video.mp4',
          type: 'video/mp4'
        }]
      }
    }
  },
  methods: {
    onPlayerReady(player) {
      console.log('Player is ready', player)
    }
  }
}
</script>

视频封面和自定义控件

通过 Vue 的动态绑定实现视频封面和自定义控件。

<template>
  <div>
    <div v-if="!isPlaying" class="video-cover" @click="startPlay">
      <img :src="coverImage" alt="Video Cover">
      <button class="play-button">播放</button>
    </div>
    <video 
      v-else
      ref="videoPlayer" 
      :src="videoSrc" 
      @ended="onVideoEnded"
      controls
      width="600"
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4',
      coverImage: 'https://example.com/cover.jpg',
      isPlaying: false
    }
  },
  methods: {
    startPlay() {
      this.isPlaying = true
      this.$nextTick(() => {
        this.$refs.videoPlayer.play()
      })
    },
    onVideoEnded() {
      this.isPlaying = false
    }
  }
}
</script>

响应式视频尺寸

通过 Vue 的动态绑定和计算属性实现响应式视频尺寸。

<template>
  <div>
    <video 
      ref="videoPlayer" 
      :src="videoSrc" 
      :width="videoWidth" 
      :height="videoHeight"
      controls
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/video.mp4',
      windowWidth: window.innerWidth
    }
  },
  computed: {
    videoWidth() {
      return Math.min(this.windowWidth - 40, 800)
    },
    videoHeight() {
      return this.videoWidth * 9 / 16
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.windowWidth = window.innerWidth
    }
  }
}
</script>

以上方法涵盖了从基础到高级的视频播放实现方式，可以根据具体需求选择适合的方案。