收藏
回答

createVideoContext闪退?

在页面有很多video组件时,大量使用wx.createVideoContext会出现闪退的现象。测试机型:iPhone6s

<template>  
    <view class="div">  
        <swiper class="swiper" :duration="400" vertical="true" @change="change_video">  
            <swiper-item v-for="(value, key) in videoList" :key="key" class="swiper-item">  
                <video :id="key" :src="value.src" :controls="false" :enable-play-gesture="true" :autoplay="false" class="video"></video>  
            </swiper-item>  
        </swiper>  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                current: 0, // 当前视频  
                videoList: []  
            }  
        },  

        onLoad() {  
            this.videoList.push({  
                    src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                }, {  
                    src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                }, {  
                    src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                }, {  
                    src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                }, {  
                    src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                },  
            )  
        },  
        onShow() {  
            let playing = wx.createVideoContext(this.current + '');  
            playing.seek(0);  
            playing.play();  
        },  
        onHide() {  
            wx.createVideoContext(this.current + '').pause();  
        },  
        methods: {  

            change_video(e) {  
                let that = this;  
                let current = e.detail.current; // 当前视频  

                // 特点条件 加载视频  
                if (current >= this.videoList.length - 1) {  
                    setTimeout(function() {  
                        that.videoList.push({  
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                        }, {  
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                        }, {  
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                        }, {  
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                        }, {  
                            src: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',  
                        }, );  
                    }, 400)  
                }  

                let prev = current - 1; // 上一个当前视频  
                let next = current + 1; // 下一个当前视频  

                // 判断向上还是向下。 prev是向上,next是向下。  
                let direction = '';  
                if (current - this.current > 0) {  
                    direction = 'next';  
                } else {  
                    direction = 'prev';  
                }  
                // 下滑 停止上一个视频  
                if (direction == 'next') {  
                    wx.createVideoContext(prev + '').stop();  
                }  
                // 上滑 停止下一个视频  
                if (direction == 'prev') {  
                    wx.createVideoContext(next + '').stop();  
                }  
                // 播放当前视频  
                wx.createVideoContext(current + '').play();  

                // 记录当前视频  
                this.current = current;  
            },  
        }  
    }  
</script>  
<style>  


    .swiper {  
        width: 100vw;  
        height: 100vh;  
        /* background-color: red; */  
    }  

    .swiper .swiper-item {  
        width: 100vw;  
        height: 100vh;  
        display: flex;  
        justify-content: center;  
        align-items: center;  
    }  

    .swiper .swiper-item .video {  
        width: 100vw;  
    }  
</style>  
  
  


回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容
问题标签