前两天在做视频上传的时候发现上传的视频在页面中居然不能播放,只有音频没有画面,我以为是上传的问题结果我直接把视频文件往浏览器里一拉也播放不了,后来上网一顿搜，发现video标签只能支持编码格式为h264的视频,然后我就下载了一个格式工厂,一看我那个视频文件还真不是h264的，我第一时间寻思换一个视频播放插件不就好使了吗，结果找了好几个，发现那些插件都是根据video标签改了一下样式，没办法啊只能从文件下手了。
使用的是这个插件:
"@ffmpeg/ffmpeg": "^0.11.6",
我用的若依框架，在使用之前需要改vue.config.js文件里的东西
devServer: { headers: { // 加这四行代码 'Cross-Origin-Opener-Policy': 'same-origin',// 加这四行代码 'Cross-Origin-Embedder-Policy': 'require-corp',// 加这四行代码 },// 加这四行代码 host: '0.0.0.0', port: port, open: true,
在public/index.html文件里加行代码
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 视频转码↓ --> <meta http-equiv="Content-Security-Policy" content="worker-src 'self' blob:;"><!-- ←加这行 -->
<!-- 视频转码↑ -->
<meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
使用:
import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg/dist/ffmpeg.min.js";
const ffmpeg = createFFmpeg({ log: true });
我给封装了一下
// 视频转换编码 async changeFile(inputFile) { // 加载ffmpeg核心库 await ffmpeg.load() // 将视频文件加载到内存中 await ffmpeg.FS('writeFile',"input.mp4", await fetchFile(inputFile)); // 使用FFmpeg进行视频转码 await ffmpeg.run("-i", "input.mp4", "-c:v", "libx264", "output.mp4"); // 从内存中读取转码后的视频文件 const data = ffmpeg.FS("readFile", "output.mp4"); // const data = ffmpeg.read("output.mp4"); // 创建Blob对象以供下载或其他用途 const h264VideoBlob = new Blob([data.buffer], { type: "video/mp4" });
// 我这里使用a标签下载下来了转换后的h264文件能成功再浏览器中播放(亲测有效啊) var a = document.createElement('a') a.href = URL.createObjectURL(h264VideoBlob) a.setAttribute('download', 'filename'); a.click(); // window.location.href = URL.createObjectURL(h264VideoBlob) console.log(inputFile); console.log("转换后的文件", data, "---------", h264VideoBlob); // return h264VideoBlob },
用的时候直接调用这个方法传入一个file文件,输出的话可以根据自己需求来;
但是，我在用的时候啊感觉速度很慢啊，一个12M的视频用了一分钟我看网上说和电脑GPU有关。
反正这个ffmpeg功能很强大，可以加水印啊啥的，我也没有仔细研究，大家感兴趣可以去试试
