From a18079f00f24ae1f0cb405a6eb8e4c8c642cd0df Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 28 九月 2021 15:38:46 +0800 Subject: [PATCH] 视频下载 --- src/components/wasmPlayer/index.vue | 50 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/components/wasmPlayer/index.vue b/src/components/wasmPlayer/index.vue index 2053aa8..9d6c06c 100644 --- a/src/components/wasmPlayer/index.vue +++ b/src/components/wasmPlayer/index.vue @@ -63,6 +63,12 @@ @click="fullScreen" :disable="false" ></b> + + <!-- 涓嬭浇 --> + <i + class="el-icon-download jsmodern-video-download" + @click="downLoad" + ></i> </section> <!-- 澶ф挱鏀炬寜閽� --> @@ -187,6 +193,7 @@ playerIndex: 0, isEmptyUrl: false, videoLoading: false, + loadUrl:'', } }, watch: { @@ -464,6 +471,8 @@ } this.playerStatus = this.player.PlayOrPause + + this.loadUrl = url }, setPlayerStatus(stat) { this.videoLoading = false @@ -477,6 +486,32 @@ fullScreen() { this.player.fullscreen() + }, + + async downLoad() { + this.$notify.info({ + title: '娑堟伅', + message: '璧勬簮涓嬭浇涓�,璇风◢鍚�...' + }); + let url = 'http:/'+this.loadUrl.substring(10) + let name = url.substring(url.lastIndexOf("/") + 1) + let responsePromise = await fetch(url) + let blob = await responsePromise.blob() + let objectURL = window.URL.createObjectURL(blob) + let a = document.createElement('a') + a.href = objectURL + a.download = name + a.click() + a.remove() + /* let url = 'http:/'+this.loadUrl.substring(10) + let link = document.createElement("a"); //鍒涘缓a鏍囩 + let name = url.substring(url.lastIndexOf("/") + 1) + link.style.display = "none"; //浣垮叾闅愯棌 + link.href = url; //璧嬩簣鏂囦欢涓嬭浇鍦板潃 + link.setAttribute("download", name); //璁剧疆涓嬭浇灞炴�� 浠ュ強鏂囦欢鍚� + document.body.appendChild(link); //a鏍囩鎻掕嚦椤甸潰涓� + link.click(); //寮哄埗瑙﹀彂a鏍囩浜嬩欢 */ + }, playPrev() { @@ -547,9 +582,9 @@ background: rgba(255, 255, 255, 0.25); border-radius: 3px; width: 460px; - width: -webkit-calc(100% - 220px); - width: -moz-calc(100% - 220px); - width: calc(100% - 220px); + width: -webkit-calc(100% - 260px); + width: -moz-calc(100% - 260px); + width: calc(100% - 260px); float: left; margin: 19px 0 0 65px; position: relative; @@ -693,6 +728,15 @@ opacity: 0.5; cursor: default; } + + .el-icon-download { + font-size: 24px; + width: 18px; + height: 18px; + margin-top: 7px; + margin-left: -12px; + } + } .video-player:hover { -- Gitblit v1.8.0