Uniapp 之renderjs解決swiper+多個video卡頓問題

一、效果圖

二、示例代碼

test.vue

<template><view style="" :style="{height: windowHeight+'px'}"><swiper class="video-swiper" vertical @change="swiperChange" :current="current" @animationfinish="swiperFinish"><swiper-item v-for="(item,index) in list" :key="index" style="position: relative;"><MyVideo :fistId="list[0].itemid" :item="item" :isPlay="!isShow && videoId == item.itemid" @onEnded="endVideo(item.itemid)" /><view v-if="isShow"style="z-index:99;position: absolute;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;"><image @click.stop="plays(item.itemid,index)" src="@/static/bofang.png"style="width: 40px;height: 40px;"></image></view><view class="abs video-info-box"><view class="video-info"><view class="f-title c-base ">@樣子公司</view><view class="f-paragraph c-base mt-md">{{item.title}}</view></view></view></swiper-item></swiper></view>
</template><script>import MyVideo from '@/components/my-video/my-video.vue'export default {components: {MyVideo},data() {return {windowHeight: uni.getSystemInfoSync().windowHeight,list: [{itemid: 1,url: '/file/upload/202508/01/094826971.mp4',title: '視頻一'},{itemid: 2,url: '/file/upload/202508/01/090055511.mp4',title: '視頻二'},{itemid: 3,url: '/file/upload/202508/01/090409611.mp4',title: '視頻三'}],videoContexts: [],isShow: false,videoIndex: null,videoId: null,current: 0,first_id: 0}},onLoad() {},methods: {swiperChange(e) {console.log(e)let {current} = e.detailthis.current = currentif (current != this.videoIndex) {this.endVideo(this.videoId, 'swiper')}},swiperFinish(e) {console.log(e)let {current} = e.detaillet item = this.list[current]console.log(item)this.plays(item.itemid, current)},plays(id, index) {// #ifndef APPlet videoContext = uni.createVideoContext(`Video${id}`, this);videoContext.play()// #endifthis.videoId = idthis.videoIndex = indexthis.isShow = falsethis.autoplaySwiper = false},//當video播放結束得時候 進行初始化，恢復輪播endVideo(id, type) {// #ifndef APPlet videoContext = uni.createVideoContext(`Video${id}`, this);videoContext.pause()// #endifthis.isShow = truethis.videoIndex = nullthis.videoId = nullthis.autoplaySwiper = trueif (!type) {setTimeout(v => {this.current++}, 500)}},}}
</script><style>.video-swiper {width: 100%;height: 100%}.video_item {height: 100%;width: 100%;}.video-info-box {width: 500rpx;height: auto;display: inline-block;position: absolute;left: 32rpx;bottom: 100rpx;z-index: 99999999;}
</style>

my-video.vue

<template><view class="myVideo_view" v-html="innerHtml" :fid="fistId" :change:fid="MyVideo.setFid" :id="id" :change:id="MyVideo.updateId" :isPlay="isPlay" :change:isPlay="MyVideo.handelPlay" ></view>
</template><script>export default {props: {item: {type: Object,default: () => ({}),},// 添加控制播放和暫停的propisPlay: {type: Boolean,default: true,},fistId: {type: Number,default: 0}},computed: {id() {return this.item.itemid}},data() {return {innerHtml: '',};},created() {this.initVideoHtml();},methods: {isHttpOrHttps(url) {const regex = /^(http|https):\/\//;return regex.test(url);},initVideoHtml() {let { url } = this.itemlet bool = this.isHttpOrHttps(url)if(!bool) {url = plus.io.convertLocalFileSystemURL(url);}this.innerHtml = `<video class="swiper-video" id="Video${this.item.itemid}" src="${url}" width="100%" height="100%" style="object-fit: contain;" autoplay/>`;},// 通知父組件播放完成ended() {this.$emit('onEnded')}},};
</script>
<script module="MyVideo" lang="renderjs">export default {data() {return {id: '',fid: '',video: null,}},computed: {videoId() {return 'Video' + this.id}},mounted() {this.initVideoElement()},methods: {initVideoElement() {let video = document.getElementById(this.videoId)this.video = videovideo.addEventListener('loadedmetadata', () => {this.video.play().then(res => {//第一個視頻不用暫停if(this.fid==this.id) {return false}this.video.pause()})})video.addEventListener('ended', () => {this.video.pause()this.$ownerInstance.callMethod('ended')})},handelPlay(isPlay) {if(!this.video) returnisPlay ? this.video.play() : this.video.pause()},updateId(id) {this.id = id},setFid(fid) {this.fid = fid}}}
</script>
<style scoped>.myVideo_view {height: 100%;border-radius: 10rpx;overflow: hidden;background-color: #000;}
</style>

翻譯圖片

中文

英文