当前位置：首页 > VUE

vue 实现视频播放

2026-01-18 03:36:51VUE

实现视频播放的基本方法

在Vue中实现视频播放可以通过HTML5的<video>标签或第三方库如video.js来实现。以下是两种常见的方法：

使用HTML5 <video>标签

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

controls属性添加播放控件，width和height设置视频尺寸。<source>标签指定视频源文件及其类型。

使用第三方库（如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 {
          autoplay: true,
          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>

自定义视频播放器控件

如果需要自定义播放器控件，可以通过监听<video>元素的事件并控制其方法：

<template>
  <div>
    <video ref="videoPlayer" width="640" height="360" @play="onPlay" @pause="onPause">
      <source src="path/to/video.mp4" type="video/mp4">
    </video>
    <button @click="togglePlay">{{ isPlaying ? 'Pause' : 'Play' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false
    };
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer;
      if (this.isPlaying) {
        video.pause();
      } else {
        video.play();
      }
    },
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    }
  }
};
</script>

处理视频源动态变化

如果视频源可能动态变化，可以通过watch或计算属性更新视频源：

<template>
  <div>
    <video ref="videoPlayer" controls width="640" height="360">
      <source :src="videoSrc" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  props: ['videoId'],
  computed: {
    videoSrc() {
      return `path/to/video_${this.videoId}.mp4`;
    }
  },
  watch: {
    videoSrc(newSrc) {
      const video = this.$refs.videoPlayer;
      video.src = newSrc;
      video.load();
    }
  }
};
</script>

添加字幕支持

HTML5视频支持WebVTT格式的字幕文件：

<template>
  <div>
    <video controls width="640" height="360">
      <source src="path/to/video.mp4" type="video/mp4">
      <track
        label="English"
        kind="subtitles"
        srclang="en"
        src="path/to/subtitles.vtt"
        default>
    </video>
  </div>
</template>

字幕文件（subtitles.vtt）示例：

WEBVTT

1
00:00:01.000 --> 00:00:04.000
This is the first subtitle.

2
00:00:05.000 --> 00:00:08.000
This is the second subtitle.

响应式视频播放器

使用CSS确保视频在不同屏幕尺寸下保持比例：

<template>
  <div class="video-container">
    <video class="responsive-video" controls>
      <source src="path/to/video.mp4" type="video/mp4">
    </video>
  </div>
</template>

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
}

.responsive-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

vue 实现视频播放