<cover-image :src="imageUrl" :id='pageImageId'></cover-image>
<cover-image class="uniLogo1" src="/static/logo.png" @click="logoClick"></cover-image>
<cover-image class="uniLogo2" src="/static/machineLogo.jpg" @click="machineLogoClick"></cover-image>
</cover-view>
</video>
</view>
<view>
<text>内容描述:{{dynamicText}}</text>
</view>
<view>
<text>点击的图片:{{imageClick}}</text>
</view>
<view>
<text>我是信息提示:{{showTips}}</text>
</view>
<view>
<text>最大内存:{{maxMemory}},其它内存信息{{memoryInfo}}</text>
</view>
</template>
<script>
export default {
data() {
return {
showVideo: true,
showTips: '',
dynamicText: '',
imageClick: '',
myArray: [],
startIndex: 0,
videoUrl: '',
imageUrl: '',
videoCtx: null, // 用于保存video上下文,
timeSpan: 3000,
pageImageId: '',
videoKey: false,
gcCount: 0,
clearTimer: null,
memoryTimer: null,
memoryInfo: '',
maxMemory: 0,
}
},
onLoad() {},
onReady() {
this.myArray = [
//'/static/tp.png',
'/static/2.mp4',
//'/static/banner.png',
// '/static/1.mp4',
// '/static/2.mp4',
// '/static/1.mp4',
// '/static/2.mp4',
// '/static/1.mp4',
// '/static/2.mp4',
// '/static/1.mp4',
// '/static/2.mp4',
// '/static/1.mp4',
// '/static/2.mp4',
// '/static/1.mp4',
// '/static/2.mp4',
// '/static/1.mp4',
// '/static/2.mp4',
// '/static/1.mp4',
// '/static/2.mp4',
];
var length = this.myArray.length;
//从视频数组中娶最后一个,初始化后,播放视频时,从数组里第一个开始播
this.startIndex = length - 1;
this.dynamicText = "myArray里放了" + length + "个视频,3秒后开始播放视频";
//this.getMemoryInfo();
//this.startTimer();
this.playVideo();
},
methods: {
getMemoryInfo() {
this.memoryTimer = setInterval(() => {
if (plus.os.name === 'Android') {
const Runtime = plus.android.importClass('java.lang.Runtime');
const runtime = Runtime.getRuntime();
const usedMB = ((runtime.totalMemory() - runtime.freeMemory()) / (1024 * 1024)).toFixed((
2));
if (usedMB > this.maxMemory) {
this.maxMemory = usedMB;
}
this.memoryInfo = "[内存监控] 使用中: " + usedMB + "MB";
}
}, 1000);
},
startTimer() {
this.clearTimer = setInterval(() => {
//执行GC
this.clearMem();
}, 10000);
},
stopTimer() {
if (this.clearTimer) {
clearInterval(this.clearTimer);
this.clearTimer = null;
}
if (this.memoryTimer) {
clearInterval(this.memoryTimer);
this.memoryTimer = null;
}
},
// 初始化video上下文
initVideoContext() {
if (!this.videoCtx) {
this.videoCtx = uni.createVideoContext('pageVideo', this);
}
},
logoClick() {
this.imageClick = '绿色绿色绿色绿色绿色绿色绿色的图片';
},
machineLogoClick() {
this.imageClick = '白色白色白色白色白色白色白色的图片';
},
//视频播放
playVideo() {
//this.startIndex = this.startIndex + 1;
// if (this.startIndex > this.myArray.length - 1) {
// this.startIndex = 0;
// }
var url = this.myArray[0];
this.dynamicText = "现在播放的视频index是" + this.startIndex;
this.pageImageId = 'pageImageIdHidden';
this.showTips = '现在播放的是视频:' + url;
this.initVideoContext();
setTimeout(() => {
this.showVideo = true; // 重建组件(强制释放内存)
this.videoUrl = url;
this.videoCtx.play();
this.startIndex = this.startIndex + 1;
}, 100);
// //执行GC
// this.clearMem();
},
clearMem() {
// 安卓原生代码(需封装为UniPlugin)
if (plus.os.name === 'Android') {
const System = plus.android.importClass('java.lang.System');
plus.android.invoke(this.videoCtx, 'release');
System.gc();
System.runFinalization();
if (plus.os.name === 'Android') {
const Runtime = plus.android.importClass('java.lang.Runtime');
const runtime = Runtime.getRuntime();
const usedMB = ((runtime.totalMemory() - runtime.freeMemory()) / (1024 * 1024)).toFixed((
2));
// if (usedMB > this.maxMemory) {
// this.maxMemory = usedMB;
// }
// this.memoryInfo = "[内存监控] 使用中: " + usedMB + "MB";
this.gcCount += 1;
this.imageClick = "执行了GC" + this.gcCount + ',后内存大小为' + usedMB + "MB";
}
}
},
handleVideoEnd() {
try {
this.dynamicText = '视频正常播放结束,3秒后开始下一个视频';
this.videoCtx.pause();
this.videoCtx.stop();
this.videoCtx.seek(0);
this.videoUrl = ''; // 清除数据绑定
this.videoCtx = null;
// 先销毁再重新创建
this.showVideo = false;
this.clearMem();
setTimeout(() => {
this.$nextTick(() => {
this.playVideo();
});
}, 3000);
} catch (e) {
this.dynamicText = e;
}
},
handleVideoError(e) {},
}
}
</script>
<style>
/ 页面样式 /
page {
hardware-accelerated: false;
}
.cover-container {
position: relative;
width: 100%;
height: 100%;
}
.uniLogo1 {
position: absolute;
width: 120rpx;
height: 60rpx;
bottom: 10%;
left: 10%;
}
.uniLogo2 {
position: absolute;
width: 120rpx;
height: 60rpx;
bottom: 10%;
right: 10%;
}
#pageVideo {
width: 100%;
height: 100px;
}
#pageImageId {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
}
#pageImageIdHidden {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
display: none;
}
</style>