nodejs 使用 fluent-ffmpeg 进行切片,生成m3u8文件,使用Vue-Video-Player 读取视频
https://cloud.tencent.com/developer/article/1524052
有个需要限制用户视频下载的需求,要求并不是太严格,主要面对的普通用户,防止他们下载视频,其实防也是防不住的,可以录屏啊。花了三四天的时间,查了大量的资料。
一开始使用 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
更多推荐
所有评论(0)