feat(videoView): 添加交付视频下载功能
- 在视频查看页面添加下载按钮 - 实现交付视频下载功能,包括微信浏览器的特殊处理
This commit is contained in:
parent
0d06fe8fb6
commit
040ee7a5d8
|
@ -25,6 +25,15 @@
|
||||||
@click="showConfirmModal"
|
@click="showConfirmModal"
|
||||||
>确认视频</u-button>
|
>确认视频</u-button>
|
||||||
</view>
|
</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
|
<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() {
|
showAdjustModal() {
|
||||||
this.adjustForm.state = 0;
|
this.adjustForm.state = 0;
|
||||||
|
|
Loading…
Reference in New Issue