• 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屏幕旋转
  • 相关阅读:
    全美在线上云 保证上千考场统一监考
    如何构建一个较为通用的业务技术架构
    在tomcat下context.xml中配置各种数据库连接池
    Java中的多线程
    彻底理解ThreadLocal
    plsql工具使用
    软件清单
    EL表达式
    AOP(execution表达式)
    JSTL标签库之核心标签
  • 原文地址:https://www.cnblogs.com/hanhaiyuntao/p/14298676.html
Copyright © 2020-2023  润新知