js实现视频下载
使用 Blob 对象和 URL.createObjectURL 下载视频
通过将视频数据转换为 Blob 对象并创建临时 URL 实现下载。需要确保服务器允许跨域请求或视频源与网页同域。
function downloadVideo(url, filename) {
fetch(url)
.then(response => response.blob())
.then(blob => {
const blobUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = filename || 'video.mp4';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl);
});
}通过 MediaRecorder API 录制流媒体
适用于需要录制正在播放的视频流的情况，如 WebRTC 流或摄像头视频。
function recordStream(videoElement, duration, filename) {
const stream = videoElement.captureStream();
const recorder = new MediaRecorder(stream);
const chunks = [];
recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
const blob = new Blob(chunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename || 'recording.webm';
a.click();
};
recorder.start();
setTimeout(() => recorder.stop(), duration);
}使用 Service Worker 缓存视频
对于需要离线下载的场景，可以通过 Service Worker 缓存视频资源。
// 在 Service Worker 中
self.addEventListener('fetch', event => {
if (event.request.url.includes('.mp4')) {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
}
});
// 在主线程中
async function cacheVideo(url) {
const cache = await caches.open('video-cache');
await cache.add(url);
}处理跨域问题的解决方案
当视频资源存在跨域限制时，可以考虑以下方法：
-
配置服务器 CORS 头
Access-Control-Allow-Origin: * Access-Control-Expose-Headers: Content-Length -
使用代理服务器中转请求
const proxyUrl = 'https://cors-anywhere.herokuapp.com/'; fetch(proxyUrl + originalUrl) .then(response => response.blob()) // 后续处理与常规下载相同
注意事项
- 浏览器安全策略可能阻止某些下载行为
- 大文件下载需要考虑内存占用和进度显示
- 部分视频网站有DRM保护，无法直接下载
- 移动端浏览器可能存在更多限制
