当前位置：首页 > VUE

vue实现视频功能

2026-02-19 21:40:15VUE

视频播放基础实现

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

<template>
  <video 
    :src="videoSrc" 
    controls 
    width="600"
    @play="handlePlay"
    @pause="handlePause">
  </video>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/sample.mp4'
    }
  },
  methods: {
    handlePlay() {
      console.log('视频开始播放');
    },
    handlePause() {
      console.log('视频已暂停');
    }
  }
}
</script>

第三方库集成（Video.js）

通过video.js增强视频功能，支持更多格式和自定义UI：
安装依赖：

npm install video.js @videojs-player/vue

组件集成示例：

import { VideoJsPlayer } from '@videojs-player/vue';
import 'video.js/dist/video-js.css';

export default {
  components: { VideoJsPlayer },
  data() {
    return {
      options: {
        sources: [{
          src: 'https://example.com/sample.m3u8',
          type: 'application/x-mpegURL'
        }],
        controls: true
      }
    }
  }
}

模板中使用：

vue实现视频功能

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

自定义控制栏

通过覆盖默认样式或创建自定义组件实现控制栏：

/* 隐藏原生控制栏 */
video::-webkit-media-controls {
  display: none !important;
}

创建自定义按钮组件：

vue实现视频功能

<template>
  <div class="custom-controls">
    <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
    <input type="range" v-model="progress" @input="seek">
  </div>
</template>

通过ref操作视频元素：

this.$refs.videoElement.currentTime = newProgress;

流媒体协议支持

处理HLS/DASH等流媒体协议需引入专用库：

npm install hls.js dash.js

HLS示例代码：

import Hls from 'hls.js';

if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource('https://example.com/stream.m3u8');
  hls.attachMedia(this.$refs.videoElement);
}