uniapp 视频全屏播放兼容ios打包

需求:

  1. 10个视频放入轮播图,点击其中一个后全屏播放
  2. 横屏布局
  3. 判断视频在本地缓存是否存在,有的话读本地,没有的话存服务器
  4. 打包成ios

分析:

  1. 10个视频放在同一个页面,写多个组件耗费性能且uniapp兼容性差,因此,拆分成两个界面,一个界面单独布局,一个界面单独处理video逻辑,全屏播放,可以获取屏幕宽高赋予给video组件,cover-view或cover-image组件添加返回首页
  2. 横屏实现代码:"pageOrientation": "landscape"放到page.json下的globalStyle
  3. 关键代码
  4. ios打包需要配置证书,配置完云打包差不多等待几分钟既可生成下载包链接

关键代码

//初始化video组件宽高
initResize: function() {
	var that = this;
	//赋予video组件宽高
	uni.getSystemInfo({
		success: (res) => {
			//console.log(res);
			that.screenHeight = res.windowHeight + "px";
			that.screenWidth = res.windowWidth + "px";
		}
	})
},
//初始化视频状态
initVideoStatus(options) {
let _this = this;
//获取本地缓存数据看是否存在
const videoHistoryAry = uni.getStorageSync('videoListAry');
console.log(videoHistoryAry);

let isExist = false;
if (videoHistoryAry != null && videoHistoryAry.length > 0) {
	for (var i = 0; i < videoHistoryAry.length; i++) {
		//在缓存中存在则用缓存地址,不存在则添加到新的数组中			
		if (videoHistoryAry[i].id == _this.id) {
			console.log('缓存中存在');
			isExist = true;
			_this.vidsrc = videoHistoryAry[i].videoAddress;
			break;
		}
	}
	//不存在的话下载并添加新数组
	if (!isExist) {
		console.log(options.vidsrc);
		_this.vidsrc = options.vidsrc;
		const downloadItem = {
			id: _this.id,
			videoAddress: _this.vidsrc
		}
		_this.downFile('videoListAry', videoHistoryAry, downloadItem);
	}

} else {
	console.log("首次进入,没有缓存过一次");
	const videoHistoryAry = [];
	_this.vidsrc = options.vidsrc // 我是在线链接
	const downloadItem = {
		id: _this.id,
		videoAddress: _this.vidsrc
	}
	_this.downFile('videoListAry', videoHistoryAry, downloadItem);
}

},
// 下载视频  
downFile(setName, setSourceArr, setObj) {
	console.log(setSourceArr)
	const _this = this;
	uni.downloadFile({
		url: setObj.videoAddress,
		success: (res) => {
			if (res.statusCode === 200) {
				console.log('下载成功地址:' + res.tempFilePath);
				//保存视频到本地  
				uni.saveFile({
					tempFilePath: res.tempFilePath,
					success: function(res) {
						var savedFilePath = res.savedFilePath;
						console.log('保存成功:' + savedFilePath);
						setSourceArr.push({
							id: setObj.id,
							videoAddress: savedFilePath
						});
						uni.setStorageSync(setName, setSourceArr);
					},
					error: function(err) {
						console.log(error);
					}
				});
			}
		}
	});
},

链接引用

  1. uniapp-ios-打包
  2. 视频缓存
  3. 打包app屏幕旋转
原文地址:https://www.cnblogs.com/hanhaiyuntao/p/14298676.html