“Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。”
前提： 公司项目中上传的视频编码格式不一，但是在浏览器播放中，却出现了黑屏（有声音）的情况，即使是MP4格式的视频，也存在无法播放，查询一番，了解到chrome浏览器的video标签仅对部分格式的视频支持播放
通常我们使用MP4格式，但是MP4又分为“1.MPEG4(DivX)”、“2.MPEG4(Xvid)”、“3.AVC(H264)”三种类型。其中只有H264类型的视频才能进行html播放
标签所支持的视频格式和编码：
MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器
| 格式 | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |
| MPEG4 | 9.0+ | No | No | 5.0+ | 3.0+ |
| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |
注释：Internet Explorer 8 以及更早的版本不支持 video 标签。
使用FFMPEG转码
预览地址： 642134542.github.io/vue-ffmpeg/
1、原理：
ffmpeg.wasm 是 FFmpeg 的纯 WebAssembly / JavaScript 端口。它支持在浏览器内录制、转换和流式传输视频和音频。
Webassembly 的出现为前端转码提供可能
2、按照官网配置
2.1 npm安装
npm install @ffmpeg/ffmpeg @ffmpeg/core
2.2 html
<div>
<h3>Upload a video to transcode to mp4 (x264) and play!</h3>
<video id="output-video" controls ></video><br/>
<input type="file" id="uploader">
<p id="message"></p>
</div>
2.3 js
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({
corePath: 'https://unpkg.com/@ffmpeg/core@0.8.5/dist/ffmpeg-core.js',
log: true,
});
const transcode = async ({ target: { files } }) => {
const message = document.getElementById('message');
const { name } = files[0];
message.innerHTML = 'Loading ffmpeg-core.js';
await ffmpeg.load();
ffmpeg.FS('writeFile', 'name', await fetchFile(files[0]));
message.innerHTML = 'Start transcoding';
await ffmpeg.run('-i', 'name', 'output.mp4');
message.innerHTML = 'Complete transcoding';
const data = ffmpeg.FS('readFile', 'output.mp4');
const video = document.getElementById('output-video');
video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
}
const elm = document.getElementById('uploader');
elm.addEventListener('change', transcode);
3、结果
页面可以正常加载和上传，但是在转码过程中报错了
ReferenceError: SharedArrayBuffer is not defined，
所以需要解决SharedArrayBuffer报错
可以看到SharedArrayBuffer是支持谷歌浏览器79版本以上
那么，为什么这里会出现SharedArrayBuffer is not defined的报错信息呢
经过一番百度和查看issue, 是因为谷歌浏览器的安全策略机制改变了
2017.7月（Chrome 60）引入 SharedArrayBuffer。
2021.7月（Chrome 92）限制 SharedArrayBuffer只能在 cross-origin isolated 页面使用。
Android Chrome 88 也进行了同样的限制。
从上述结论中，可以知道在60-91的版本的浏览器是可以正常打开的
那么92版本的呢
在vue-cli开发环境中我们可以再vue.config.js中配置
devServer: {
headers: {
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Embedder-Policy": "require-corp",
},
}
4、效果
在控制台中可以看到读取文件和转码进程，
而且页面可以正常的显示视频并播放
5、优化：
5.1、corePath
createFFmpeg中的corePath的地址是cdn在线的，这里我们需要换成自己的本地资源，
但是使用import一直报错
估计是相关依赖并没有找到，npm install还是不行
只好把包里的ffmpeg-core.js、ffmpeg-core.wasm和ffmpeg-core.worker.js放在public中
5.2、加载
读取文件和转码的时间比较长，所以我们需要增加加载层和进度条
ffmpeg.setProgress(({ ratio }) => {
console.log(ratio);
this.percentage = Math.floor(ratio * 100)
/*
* ratio is a float number between 0 to 1.
*/
});
6、部署：
使用ip或者域名访问，依旧会报错SharedArrayBuffer is not defined，所以我们需要代理中配置请求头
add_header Cross-Origin-Opener-Policy same-origin;
add_header Cross-Origin-Embedder-Policy require-corp;
但是还是存在报错信息
解决办法：
1、使用https代替http
2、使用chrome 60-91版本访问
7、可能存在报错信息
7.1、caught (in promise) Error: Oops, something went wrong in FS operation
解决办法： 不要使用中文名称，将name可以进行转义
7.2、Error: ffmpeg.FS('readFile', 'output.mp4') error. Check if the path exists
解决办法：同问题1
7.3、github page无法设置header请求头，预览地址是如何解决SharedArrayBuffer报错的
在Stack Overflow这个问题中 有个回答提供了解决方案 github.com/gzuidhof/co… 开发者只需要将coi-serviceworker.js在index.html引入即可
<script src="coi-serviceworker.js"></script>
