nodejs 使用 fluent-ffmpeg 进行切片，生成m3u8文件，使用Vue-Video-Player 读取视频

有个需要限制用户视频下载的需求，要求并不是太严格，主要面对的普通用户，防止他们下载视频，其实防也是防不住的，可以录屏啊。花了三四天的时间，查了大量的资料。

一开始使用 bold 对 url 加密

• 后端直接读取视频文件，将文件转成Buffer，前端请求blob类型,使用window.URL.createObjectURL(）将获取的blob类型的视频文件转成URL赋值给video的src属性
• f12 查看，确实不是那种直观的 http:链接。访问后会直接下载。
  • 缺点：
    • 视频文件过大的时候，加载巨慢
    • 只需要修改一下下载文件的后缀名就可以打开视频观看了

	// node 读文件，设置响应文件格式
  res.setHeader("Content-Type", "video/mpeg4; charset=utf-8");
  let filepath = path.join(__dirname, "../public/video.mp4");
  let files = fs.readFileSync(filepath);
   // 前端请求
   axios
        .get("http://xxxx", { responseType: "blob" })
        .then((res) => {
          this.$refs.video.onload = function (e) {
            window.URL.revokeObjectURL(this.$refs.video.src);
          };
          this.$refs.video.src = window.URL.createObjectURL(res.data);
        });

• 后来又查阅了大量的资料文档。什么 防盗链技术、HLS加密技术、逐帧加密等等。

我这里这是 对视频文件进行了一个简单的切片，并没有加密…,简单了解了一下，实现了一个小案例，以后有时间还需要仔细研究。

• 下载安装

 npm i fluent-ffmpeg

获取视频文件进行切片

	let ffmpeg = require("fluent-ffmpeg");
    let filePath = path.join(__dirname, '../public/images/video2.mp4'); // 视频地址
    ffmpeg(filePath)
        .videoCodec('libx264') // 设置视频编解码器
        // .audioCodec('libfaac') // 设置 音频解码器
        .format('hls') // 输出视频格式
        .outputOptions('-hls_list_size 0') //  -hls_list_size n:设置播放列表保存的最多条目，设置为0会保存有所片信息，默认值为5
        .outputOption('-hls_time 5') // -hls_time n: 设置每片的长度，默认值为2。单位为秒
        .output(path.join(__dirname, '../public/images/output.m3u8')) // 输出文件
        .on('progress', (progress) => { // 监听切片进度
            console.log('Processing: ' + progress.percent + '% done');
        })
        .on('end', () => { // 监听结束
            console.log("视频切片完成");
        })
        .run(); // 执行

前端展示

<template>
  <div class="item">
    <div class="player">
      <video-player
        class="vjs-custom-skin"
        :options="playerOptions"
        @ready="playerReadied"
      >
      </video-player>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
// videojs
// import videojs from "video.js";
// window.videojs = videojs;
// hls plugin for videojs6
// require("videojs-contrib-hls/dist/videojs-contrib-hls.js");
// export
export default {
  data() {
    return {
      playerOptions: {
        // videojs and plugin options
        height: "360",
        sources: [
          {
            withCredentials: false, // 不开启跨域限制
            type: "application/x-mpegURL",
            src:"", // 获取的m3u8格式的地址
          },
        ],
        controlBar: {
          timeDivider: false, // 是否显示当前时间和持续时间之间的分隔符
          durationDisplay: false, // 是否显示持续时间
          fullscreenToggle:false, // 是否允许全屏
        },
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        poster: "https://xxxx/surmon-5.jpg" // 获取或设置海报图像源URL
      },
    };
  },
  methods: {
    playerReadied(player) {
      axios.get("http:xxxx").then((res) => {
        console.log(res);
        this.playerOptions.sources[0].src = res.data.path;
      });
    },
  },
  components: {
    videoPlayer,
  },
};
</script>

参考的大佬文章：

m3u8 文件格式详解
https://www.jianshu.com/p/e97f6555a070

Vue-Video-Player视频播放插件
https://www.npmjs.com/package/vue-video-player
https://github.surmon.me/vue-video-player/

关于nodejs中使用fluent-ffmpeg模块、ffmpeg工具的使用心得
https://blog.csdn.net/qq_19788257/article/details/83011732

ffmpeg的安装与使用
https://blog.csdn.net/qq_39516859/article/details/81843419

fluent-ffmpeg详解 - 中文翻译，基本全部翻译过来了
https://cloud.tencent.com/developer/article/1524052

ffmpeg 视频ts切片生成m3u8
https://www.cnblogs.com/fieldtianye/p/13427303.html