当前位置：首页 > VUE

vue实现分片播放视频

2026-02-09 16:08:27VUE

实现分片播放视频的基本思路

在Vue中实现分片播放视频的核心是利用HTML5的<video>标签和MediaSource API。通过将视频切分为多个片段（如MP4的fragments），按需加载和播放，可优化带宽和用户体验。

安装必要依赖

若需处理视频格式或分片，可安装hls.js（用于HLS流）或video.js等库：

npm install hls.js

基本实现步骤

1. 视频分片准备 确保视频已提前切分为多个片段（如segment1.mp4、segment2.mp4），或使用HLS协议（.m3u8索引文件+.ts分片）。

2. 使用MediaSource API 通过JavaScript动态拼接视频分片：

<template>
  <video ref="videoPlayer" controls></video>
</template>

<script>
export default {
  mounted() {
    const video = this.$refs.videoPlayer;
    const mediaSource = new MediaSource();
    video.src = URL.createObjectURL(mediaSource);

    mediaSource.addEventListener('sourceopen', () => {
      const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E"');

      // 加载第一个分片
      fetch('segment1.mp4')
        .then(response => response.arrayBuffer())
        .then(data => {
          sourceBuffer.appendBuffer(data);
        });

      // 监听分片结束事件，加载下一分片
      sourceBuffer.addEventListener('updateend', () => {
        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
          fetch('segment2.mp4')
            .then(response => response.arrayBuffer())
            .then(data => {
              sourceBuffer.appendBuffer(data);
            });
        }
      });
    });
  }
};
</script>

3. 使用HLS.js（推荐） 若视频为HLS格式，利用hls.js简化流程：

<template>
  <video ref="videoPlayer" controls></video>
</template>

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    const video = this.$refs.videoPlayer;
    const hls = new Hls();
    hls.loadSource('https://example.com/video.m3u8');
    hls.attachMedia(video);
  }
};
</script>