vue 实现视频播放

Vue 实现视频播放的方法

使用 HTML5 <video> 标签

在 Vue 组件中直接使用 HTML5 的 <video> 标签是最简单的方式。可以通过 ref 或 v-model 控制播放状态。

<template>
  <div>
    <video ref="videoPlayer" controls width="600">
      <source src="your-video-url.mp4" type="video/mp4">
    </video>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </div>
</template>

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

使用第三方库（如 Video.js）

Video.js 是一个功能强大的视频播放器库，支持多种格式和自定义样式。可以通过 Vue 插件或直接引入使用。

安装 Video.js：

npm install video.js

在 Vue 中使用：

<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: 'your-video-url.mp4',
        type: 'video/mp4'
      }]
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

使用 Vue 视频播放器组件（如 vue-video-player）

vue-video-player 是基于 Video.js 的 Vue 封装，提供更便捷的集成方式。

安装：

npm install vue-video-player

在 Vue 中使用：

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

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

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        controls: true,
        sources: [{
          src: 'your-video-url.mp4',
          type: 'video/mp4'
        }]
      }
    };
  }
};
</script>

实现自定义控制逻辑

可以通过 Vue 的数据绑定和事件监听实现自定义控制逻辑，例如进度条、音量控制等。

<template>
  <div>
    <video ref="videoPlayer" @timeupdate="updateProgress"></video>
    <input type="range" v-model="progress" @input="seek">
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0
    };
  },
  methods: {
    updateProgress() {
      const video = this.$refs.videoPlayer;
      this.progress = (video.currentTime / video.duration) * 100;
    },
    seek(e) {
      const video = this.$refs.videoPlayer;
      video.currentTime = (e.target.value / 100) * video.duration;
    }
  }
};
</script>

处理跨浏览器兼容性

不同浏览器对视频格式的支持可能不同，可以通过提供多种格式的源文件确保兼容性。

<video controls>
  <source src="your-video-url.mp4" type="video/mp4">
  <source src="your-video-url.webm" type="video/webm">
  <p>您的浏览器不支持 HTML5 视频。</p>
</video>

响应式设计

通过 CSS 或 Vue 的动态样式绑定确保视频播放器在不同设备上适配。

<video :style="{ width: isMobile ? '100%' : '600px' }"></video>

data() {
  return {
    isMobile: window.innerWidth < 768
  };
},
mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.isMobile = window.innerWidth < 768;
  }
}