分段播放视频

浪漫九州

已于 2024-03-21 08:26:50 修改

阅读量758

点赞数

分类专栏： SpringBoot 文章标签：音视频 java spring vue.js

于 2023-09-26 14:41:43 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59631482/article/details/133309210

版权

SpringBoot 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何在前端使用Vue3的vue3-video-play组件实现视频播放，并展示了后端如何通过API接口进行分段MP4文件的请求和响应处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端

import vue3videoPlay from "vue3-video-play"; // 引入组件
import "vue3-video-play/dist/style.css"; // 引入css

<template>
    <div class="about">
      <vue3VideoPlay
        v-bind="options"
        speed
      />
    </div>
  </template>
  <script setup>
  import { reactive } from "vue";
  const options = reactive({
    width: "100%", //播放器宽度 也可以使用px
    height: "100%", //播放器高度  同理可以使用px
    color: "#409eff", //主题色
    title: "", //视频名称
    src: "http://localhost:3000/Utils/play", //视频源
    muted: false, //静音
    webFullScreen: false,
    speedRate: ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
    autoPlay: false, //自动播放
    loop: false, //循环播放
    mirror: false, //镜像画面
    ligthOff: false, //关灯模式
    volume: 0.3, //默认音量大小
    control: true, //是否显示控制
    controlBtns: [
      "audioTrack",
      "quality",
      "speedRate",
      "volume",
      "setting",
      "pip",
      "pageFullScreen",
      "fullScreen",
    ], //显示所有按钮,
  });
  </script>

后端

 @ApiOperation("分段播放MP4")
    @GetMapping("/play")
    public void play(HttpServletRequest request, HttpServletResponse response) throws IOException{
        response.reset();
        File file = new File("G:/appapi/target/classes/01.mp4");
        long fileLength = file.length();
        // 随机读文件
        RandomAccessFile randomAccessFile = new RandomAccessFile(file, "r");

        //获取从那个字节开始读取文件
        String rangeString = request.getHeader("Range");
        long range=0;
        if (StrUtil.isNotBlank(rangeString)) {
            range = Long.valueOf(rangeString.substring(rangeString.indexOf("=") + 1, rangeString.indexOf("-")));
        }
        //获取响应的输出流
        OutputStream outputStream = response.getOutputStream();
        //设置内容类型
        response.setHeader("Content-Type", "video/mp4");
        //返回码需要为206，代表只处理了部分请求，响应了部分数据
        response.setStatus(HttpServletResponse.SC_PARTIAL_CONTENT);

        // 移动访问指针到指定位置
        randomAccessFile.seek(range);
        // 每次请求只返回1MB的视频流
        // byte[] bytes = new byte[1024 * 1024];
        byte[] bytes = new byte[1024 * 1024];
        int len = randomAccessFile.read(bytes);
        //设置此次相应返回的数据长度
        response.setContentLength(len);
        //设置此次相应返回的数据范围
        response.setHeader("Content-Range", "bytes "+range+"-"+(fileLength-1)+"/"+fileLength);
        // 将这1MB的视频流响应给客户端
        outputStream.write(bytes, 0, len);
        outputStream.close();
        randomAccessFile.close();
        System.out.println("返回数据区间:【"+range+"-"+(range+len)+"】");
    }