在网页场景中，通过HTML5的原生能力实现视频转MP4并保存到本地，核心是利用媒体流处理、转码和文件下载相关的API，不需要引入额外的重型库，整体实现逻辑清晰，适配大多数现代浏览器。
实现核心思路
整个流程可以分为三个核心步骤：首先获取网页中视频的原始媒体流，接着将媒体流按照MP4的编码规范进行转码处理，最后通过浏览器的文件下载接口将转码后的内容保存为本地MP4文件。下面我们逐步拆解每个步骤的实现方式。
步骤一：获取视频媒体流
如果网页中的视频是通过<video>标签加载的，我们可以直接通过captureStream方法获取其实时媒体流，这是HTML5提供的原生能力，支持大多数主流浏览器。
示例代码如下：
// 获取页面中的video元素
const videoElement = document.querySelector('video');
// 调用captureStream获取媒体流，参数为视频的帧率，不填则使用默认帧率
const mediaStream = videoElement.captureStream();
// 打印媒体流信息，确认获取成功
console.log('获取到的媒体流:', mediaStream);
步骤二：媒体流转码为MP4
获取到媒体流之后，需要使用MediaRecorder API对媒体流进行录制，设置输出的编码格式为MP4兼容的格式，录制完成后可以得到转码后的二进制数据。
示例代码如下：
// 存储录制得到的二进制数据块
const recordedChunks = [];
// 创建MediaRecorder实例，设置输出格式为MP4常用的video/mp4
const mediaRecorder = new MediaRecorder(mediaStream, {
mimeType: 'video/mp4'
});
// 监听数据可用事件，将得到的二进制数据存入数组
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
// 开始录制
mediaRecorder.start();
// 假设录制10秒后停止，实际场景可以根据视频长度调整
setTimeout(() => {
mediaRecorder.stop();
}, 10000);
步骤三：保存为本地MP4文件
录制停止后，我们将存储的二进制数据块组合成完整的Blob对象，再通过URL.createObjectURL生成临时下载链接，利用a标签的下载能力触发文件保存到本地。
示例代码如下：
// 监听录制停止事件
mediaRecorder.onstop = () => {
// 将二进制数据块组合成Blob对象，类型设置为MP4
const mp4Blob = new Blob(recordedChunks, { type: 'video/mp4' });
// 生成临时下载链接
const downloadUrl = URL.createObjectURL(mp4Blob);
// 创建a标签用于触发下载
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
// 设置下载的文件名
downloadLink.download = '网页视频转码.mp4';
// 将a标签添加到页面并触发点击
document.body.appendChild(downloadLink);
downloadLink.click();
// 清理临时资源
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);
};
注意事项
- MediaRecorder的mimeType支持情况因浏览器而异，部分浏览器可能不支持直接输出video/mp4格式，此时可以尝试使用video/webm格式，后续再通过其他工具转码为MP4。
- captureStream方法需要视频资源满足同源策略，如果是跨域视频资源，需要服务器配置对应的跨域允许头才能正常获取媒体流。
- 录制的时长需要和视频的实际播放长度匹配，避免出现录制内容不完整的情况。
完整示例整合
将上面的步骤整合后，完整的实现代码如下：
// 完整实现函数
function convertVideoToMP4() {
const videoElement = document.querySelector('video');
if (!videoElement) {
console.error('页面中未找到video元素');
return;
}
// 获取媒体流
const mediaStream = videoElement.captureStream();
const recordedChunks = [];
// 创建录制实例
const mediaRecorder = new MediaRecorder(mediaStream, {
mimeType: 'video/mp4'
});
// 处理数据
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
// 录制停止后保存文件
mediaRecorder.onstop = () => {
const mp4Blob = new Blob(recordedChunks, { type: 'video/mp4' });
const downloadUrl = URL.createObjectURL(mp4Blob);
const downloadLink = document.createElement('a');
downloadLink.href = downloadUrl;
downloadLink.download = '网页视频转码.mp4';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);
};
// 开始录制，假设视频总时长为30秒
mediaRecorder.start();
setTimeout(() => {
mediaRecorder.stop();
}, 30000);
}
// 调用函数触发转码保存
convertVideoToMP4();
HTML5视频转码MP4保存MediaSourceFile_API修改时间：2026-07-18 03:00:24