需求:
- 10个视频放入轮播图,点击其中一个后全屏播放
- 横屏布局
- 判断视频在本地缓存是否存在,有的话读本地,没有的话存服务器
- 打包成ios
分析:
- 10个视频放在同一个页面,写多个组件耗费性能且uniapp兼容性差,因此,拆分成两个界面,一个界面单独布局,一个界面单独处理video逻辑,全屏播放,可以获取屏幕宽高赋予给video组件,cover-view或cover-image组件添加返回首页
- 横屏实现代码:
"pageOrientation": "landscape"
放到page.json下的globalStyle里 - 关键代码
- 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);
}
});
}
}
});
},
链接引用