shuquAi/pages/midPage/index.vue

<template>
	<view class="content">
		中间

	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0,
				showVideo: true
			}
		},

		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					//console.log(res)
					this.windowWidth = res.windowWidth
					this.windowHeight = res.windowHeight
				}
			});
		},

		methods: {
			clickDownLoad() {
				console.log('下载');

				// ***判断是否在微信内打开，如果是，提示用户在外部浏览器打开，否则运行下载代码***
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					alert("请在右上角...点击【在浏览器打开】")
				} else {
					this.downLoad() //调用下载函数
					this.showVideo = false
					uni.showLoading({
						title: "正在下载"
					});
				}
			},

			downLoad() {
				//测试发现，在pc端正常下载; 在移动端 qq浏览器，safari浏览器不能下载	
				let that = this;
				let url =
					' https://zhengda.oss-cn-chengdu.aliyuncs.com/yishulian/2023-06-29/Qb8M1CqlIUBj.mp4';

				//**调用download.js下载，下载速度相对快一些**
				let downjs = require("@/utils/download.js"); //引用当前目录下的自定义函数
				let x = new XMLHttpRequest();
				x.open("GET", url, true);
				x.responseType = 'blob';
				let fileName = '学习资料' + Date.now() + ".mp4"
				x.onload = function(e) {
					downjs(x.response, fileName, "video/mp4")
					uni.hideLoading()
					that.showVideo = true
				};
				x.send();


				//**不调用download.js下载**
				// let xhr = new XMLHttpRequest();
				// xhr.open('GET', url, true);
				// xhr.responseType = 'blob'; // 返回类型blob
				// xhr.onload = function() {
				// 	if (xhr.readyState === 4 && xhr.status === 200) {
				// 		let blob = this.response;
				// 		// 转换一个blob链接
				// 		let u = window.URL.createObjectURL(new Blob([blob]));
				// 		let a = document.createElement('a');
				// 		a.download = 'test.mp4'; //下载后保存的名称
				// 		a.href = u;
				// 		a.style.display = 'none';
				// 		document.body.appendChild(a);
				// 		a.click();
				// 		a.remove();
				// 		uni.hideLoading();
				// 		that.showVideo = true;
				// 	}
				// };
				// xhr.send()

			}
		}
	}
</script>

<style>
	.bg-set {
		width: 100%;
	}

	.btn-set {
		height: 87rpx;
		width: 253rpx;
		position: absolute;
		z-index: 1000;
		top: 10%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

	.videoPoster {
		width: 79%;
		height: 71%;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #333333;
		position: absolute;
		z-index: 1000;
		top: 54%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		/* 水平垂直居中 要与上方的top,left配合使用*/
	}

	video {
		width: 100%;
		height: 100%;
	}
</style>