当前位置：首页 > VUE

vue 实现视频

2026-01-12 22:32:39VUE

Vue 实现视频播放的方法

在 Vue 中实现视频播放可以通过多种方式完成，常见的有使用 HTML5 的 <video> 标签或第三方库如 video.js。以下是几种实现方法：

使用 HTML5 `<video>` 标签

HTML5 提供了原生的 <video> 标签，可以直接在 Vue 模板中使用。这种方法简单易用，适合基础需求。

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

controls 属性显示视频控件（播放、暂停等）。
width 设置视频宽度。
<source> 标签指定视频源和类型。

使用第三方库 `video.js`

如果需要更丰富的功能（如自定义控件、多格式支持等），可以使用 video.js。

安装 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 {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {
          controls: true,
          sources: [{
            src: 'path/to/video.mp4',
            type: 'video/mp4'
          }]
        };
      }
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('Player is ready');
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

通过 videojs 初始化播放器，传入 DOM 元素和配置选项。
beforeDestroy 钩子中销毁播放器，避免内存泄漏。

使用 Vue 视频播放组件

如果需要更便捷的封装，可以使用现成的 Vue 视频播放组件，如 vue-video-player。

安装 vue-video-player：

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: {
        autoplay: false,
        controls: true,
        sources: [{
          src: 'path/to/video.mp4',
          type: 'video/mp4'
        }]
      }
    };
  }
};
</script>

vue-video-player 是对 video.js 的 Vue 封装，使用更简单。
通过 playerOptions 配置播放器行为。

动态加载视频源

如果需要动态加载视频源，可以通过绑定数据实现：

<template>
  <div>
    <video controls width="600">
      <source :src="videoSrc" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'path/to/video.mp4'
    };
  },
  methods: {
    changeVideo(newSrc) {
      this.videoSrc = newSrc;
    }
  }
};
</script>

通过 :src 动态绑定视频源。
调用 changeVideo 方法可以切换视频。

视频事件监听

可以通过监听视频事件（如播放、暂停、结束等）实现交互逻辑：

<template>
  <div>
    <video 
      ref="videoPlayer"
      controls 
      width="600"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    >
      <source src="path/to/video.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  methods: {
    onPlay() {
      console.log('Video started playing');
    },
    onPause() {
      console.log('Video paused');
    },
    onEnded() {
      console.log('Video ended');
    }
  }
};
</script>