问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

从“blob”url 检索下载文件

社区维基
1
新手上路，请多包涵

一个网站有一个视频标签元素，结构如下：

 <video id="playerVideo" width="450px" autoplay="autoplay" height="338px" style="height:100%;width:100%;" class="mejs-rai-e" src="blob:http%3A//www.example.com/d70a74e1-0324-4b9f-bad4-84e3036ad354"></video>

如您所见，src 元素有一个预先配置为 blob 的 url。有没有像脚本或视频下载器插件这样的方法来找到文件并下载它？

原文由 giovaZ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译html视频
阅读 261
1 个回答
得票最新
社区维基
1

如果您有 blob url，则可以从 <a> （链接）标签设置 href 属性以下载文件。

在以下示例中，我使用 xhr 响应创建了 blob url。这个问题的答案基本上可以在名为 download() 的函数中找到。

 function setVideo(blob)
{
  var url = URL.createObjectURL(blob);
	var video = document.getElementById('playerVideo');
	video.type = "video/mp4";
	video.src = url;
	video.load();
	download(url);
}

function download(blob_url)
{
	var fileName = "video.mp4";
	var a = document.createElement('a');
	a.href        = blob_url;
	a.download    = fileName;
	a.textContent = "DOWNLOAD " + fileName;
	document.getElementById('blobURL').innerHTML = "BLOB URL: <b>"+blob_url+"</b>";
	document.getElementById('download').appendChild(a);
}

$(document).ready(function(){
 var xhr = new XMLHttpRequest();
 xhr.responseType = 'blob';

 xhr.onload = function() {
  setVideo(xhr.response);
 };

 xhr.open('GET', 'https://cors-anywhere.herokuapp.com/http://techslides.com/demos/sample-videos/small.mp4');
 xhr.send();

});

 <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<h1>My Page</h1>
<p>Some paragraph.</p>
<video id="playerVideo" width="320" height="240" autoplay="autoplay" muted>
  Your browser does not support the video tag.
</video><br>
<span id="blobURL"></span><br>
<span id="download"></span>

</body>
</html>

原文由 chippie3000 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题