video 视频下载，调用浏览器的下载进度方法

简单介绍下需求，跟上次的帖子一样，需要重写video标签的进度栏的样式，当然也包括重写下载方法，调用原生video标签下载视频的时候，浏览器会弹出下载进度条。

其实下载常用的可能利用a标签，创建一个请求就可以实现下载，但是这种下载方法死活出不来进度，可能方法使用的不对，如有好的方法可以提示我~

先看下什么时原生进度条吧

下图为调用原生时候，浏览器的下载进度提示。谷歌可能再底部出现，展示用的是Edge浏览器

展示下自定义下载方法后的效果，点击黄色下载按钮后浏览器的展示效果，除了重新自定义了视频的名称，效果跟原生的下载效果一致。

实现方式是利用StreamSaver.js插件，页面引入后

使用 window.streamSaver.createWriteStream();方法，创建写入视频流

具体代码如下

// 视频下载，可以调用浏览器下载的进度条load() {const video = this.$refs.video; // video标签const url = video.src;return fetch(url, {method: 'GET',cache: 'no-cache'}).then(res => {const fileStream = window.streamSaver.createWriteStream('test.mp4', {size: res.headers.get("content-length")})const readableStream = res.bodyif (window.WritableStream && readableStream.pipeTo) {return readableStream.pipeTo(fileStream).then(() => console.log('done writing'))}window.writer = fileStream.getWriter();const reader = res.body.getReader();const pump = () => reader.read().then(res => res.done ? window.writer.close() : window.writer.write(res.value).then(pump));pump();})}

另付上次帖子的内容☞video全屏操作栏自定义样式&&js 指定元素全屏&&视频截图下载_video全屏自定义控制_小菜花29的博客-CSDN博客

video 视频下载，调用浏览器的下载进度方法相关推荐

apiCloud app调用浏览器打开网页的方法
在APP调用浏览器有两种方法: 1.使用openApp 2.使用openWin 两种方法调用浏览器后的效果有一点不同: 1.使用openApp调用浏览器后,如果手机内有多个浏览器,会首先弹出选择浏览器 ...
app调用浏览器打开网页的方法 apicloud
在APP调用浏览器有两种方法: 1.使用openApp 2.使用openWin 两种方法调用浏览器后的效果有一点不同: 1.使用openApp调用浏览器后,如果手机内有多个浏览器,会首先弹出选择浏览器 ...
js调用浏览器的下载框
function openDownload(url) {let d = new Date().getTime();let saveName=d+"."+ url.replace(/ ...
火狐linux 32位,火狐浏览器32位电脑版下载,火狐浏览器官方下载最新版电脑版32位 v1.0 - 浏览器家园...
火狐浏览器32位电脑版是款非常优秀的网上浏览工具.火狐浏览器(firefox)是唯一一款自由的浏览器,您可以根据自己喜好,选择添加自己需要的功能,打造专属自己的个性浏览器,同时软件也是为用户提供了最快 ...
搜索引擎looka_Alook浏览器iOS版app下载_Alook浏览器苹果版下载v5.1_3DM手游
<Alook浏览器>是一款能带给你全新的上网浏览快感的手机app,在这款软件中你不仅能体验到2倍速上网的别样快感,还可以让你在这款软件中享受到极简的软件操作哟! 软件详情 1.Alook不 ...
video视频标签怎么禁止用户拖动进度条快进
昨天经理给我一个需求 , 让我查一下h5播放视频怎么禁止用户快进, 然后刚刚搜了下, 实现了出来,代码如下 , 效果就是我点进度条想快进的话 , 会强制退回去, 这样用户就不能快进了 <body ...
Java实现minio文件流下载文件,浏览器不下载
在我写完minio下载功能时,浏览器怎么也不执行下载,纯纯没反应,只返回了流给前端.就在百思不得其解时,突然去翻看之前前端写的下载代码请求,此时发现之前用的是Windows.open(url),现在不 ...
python selenium 实现在火狐浏览器上下载文件（涉及firefox下载文件相关的配置）
在这个案例中最重要也是我花了主要精力解决的问题就是火狐浏览器下载文件时会自动弹出下载弹框的这个问题. 解决这个问题可以参照以下步骤(本次案例中要下载的文件格式为dotx文件,如果有其他格式的文件要修改 ...
火狐下载 firefox免费高速下载 firefox又出新版本了
火狐下载 Firefox浏览器免费下载火狐下载,地址: <script type="text/javascript"> google_ad_client = &quo ...

video 视频下载，调用浏览器的下载进度方法

video 视频下载，调用浏览器的下载进度方法相关推荐

最新文章

热门文章