feat(videoView): 添加交付视频下载功能
- 在视频查看页面添加下载按钮 - 实现交付视频下载功能,包括微信浏览器的特殊处理
This commit is contained in:
parent
0d06fe8fb6
commit
040ee7a5d8
|
@ -25,6 +25,15 @@
|
|||
@click="showConfirmModal"
|
||||
>确认视频</u-button>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮区域 -->
|
||||
<view class="btn-box one" v-else-if="routeParams.name === '查看交付视频'">
|
||||
<u-button
|
||||
class="confirm-btn"
|
||||
type="primary"
|
||||
@click="downloadVideo"
|
||||
>下载交付视频</u-button>
|
||||
</view>
|
||||
|
||||
<!-- 调整建议弹窗 -->
|
||||
<u-popup
|
||||
|
@ -116,6 +125,62 @@ export default {
|
|||
|
||||
}
|
||||
},
|
||||
downloadVideo(){
|
||||
if(!this.videoUrl){
|
||||
this.$u.toast('交付视频为空')
|
||||
}else{
|
||||
if(this.isWechat()){
|
||||
uni.showModal({
|
||||
title: '下载提示',
|
||||
content: '微信浏览器不允许下载,请复制视频链接在外部下载,或者右上角打开外部浏览器下载?',
|
||||
confirmText:'复制视频链接',
|
||||
success:(res)=>{
|
||||
if (res.confirm) {
|
||||
// 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
|
||||
uni.setClipboardData({
|
||||
data: this.videoUrl,
|
||||
success: function () {
|
||||
console.log('success');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}else{
|
||||
this.downloadFile(this.videoUrl, 'video.mp4');
|
||||
}
|
||||
}
|
||||
},
|
||||
isWechat(){
|
||||
return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
|
||||
},
|
||||
async downloadFile(videoUrl) {
|
||||
try {
|
||||
// 1. 获取视频文件的 Blob 对象
|
||||
const response = await fetch(videoUrl);
|
||||
const blob = await response.blob();
|
||||
|
||||
// 2. 创建 Blob URL
|
||||
const blobUrl = window.URL.createObjectURL(blob);
|
||||
|
||||
// 3. 创建 <a> 标签并触发下载
|
||||
const link = document.createElement('a');
|
||||
link.href = blobUrl;
|
||||
link.download = 'video.mp4'; // 设置下载的文件名
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
|
||||
// 4. 清理 Blob URL
|
||||
window.URL.revokeObjectURL(blobUrl);
|
||||
document.body.removeChild(link);
|
||||
} catch (error) {
|
||||
console.error('下载失败:', error);
|
||||
uni.showToast({
|
||||
title: '下载失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 显示调整建议弹窗
|
||||
showAdjustModal() {
|
||||
this.adjustForm.state = 0;
|
||||
|
|
Loading…
Reference in New Issue