当前位置：首页 > VUE

vue实现视频播放组件

2026-01-21 09:44:04VUE

实现基础视频播放组件

使用HTML5的<video>标签结合Vue的响应式数据绑定实现基础播放功能。

<template>
  <div class="video-player">
    <video 
      ref="videoPlayer"
      :src="videoSrc"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      controls
    ></video>
    <div class="controls">
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <input type="range" v-model="progress" @input="seekVideo" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/sample.mp4',
      isPlaying: false,
      progress: 0
    };
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer;
      this.isPlaying ? video.pause() : video.play();
    },
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    },
    onEnded() {
      this.isPlaying = false;
      this.progress = 0;
    },
    seekVideo(e) {
      const video = this.$refs.videoPlayer;
      const seekTime = (e.target.value / 100) * video.duration;
      video.currentTime = seekTime;
    }
  }
};
</script>

添加进度条实时更新

通过timeupdate事件监听播放进度，并更新进度条。

vue实现视频播放组件

mounted() {
  this.$refs.videoPlayer.addEventListener('timeupdate', this.updateProgress);
},
methods: {
  updateProgress() {
    const video = this.$refs.videoPlayer;
    this.progress = (video.currentTime / video.duration) * 100;
  }
}

支持自定义控件样式

通过CSS覆盖默认控件样式，隐藏原生控件并完全自定义UI。

<video ref="videoPlayer" :src="videoSrc" @click="togglePlay" class="custom-video"></video>
<style>
.custom-video {
  width: 100%;
  /* 隐藏原生控件 */
  &::-webkit-media-controls {
    display: none !important;
  }
}
.controls {
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
}
</style>

集成第三方播放器库（如Video.js）

通过Vue封装第三方库实现高级功能（如字幕、多清晰度切换）。

vue实现视频播放组件

安装依赖：

npm install video.js @videojs-player/vue

组件封装：

import { VideoJsPlayer } from '@videojs-player/vue';
export default {
components: { VideoJsPlayer },
data() {
 return {
   options: {
     sources: [{
       src: 'https://example.com/video.mp4',
       type: 'video/mp4'
     }],
     controls: true,
     poster: 'https://example.com/poster.jpg'
   }
 };
}
};

<template>
<video-js-player :options="options" />
</template>

响应式尺寸调整

通过CSS和Vue监听窗口大小变化，动态调整播放器尺寸。

data() {
  return {
    playerWidth: '800px'
  };
},
created() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.playerWidth = window.innerWidth < 768 ? '100%' : '800px';
  }
}

<video :style="{ width: playerWidth }"></video>

跨浏览器兼容性处理

针对不同浏览器添加多种视频格式源。

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

性能优化

使用preload="metadata"减少初始加载时间

实现懒加载：通过Intersection ObserverAPI在视频进入视口时加载

mounted() {
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    this.loadVideo();
    observer.unobserve(this.$el);
  }
});
observer.observe(this.$el);
}