uni-app app端 swiper 内嵌 video 轮播图切换来回切换后 video静音属性失效

uni-app app端 swiper 内嵌 video 轮播图切换来回切换后 video静音属性失效

<template>  
    <view class="warp-container">  
        <!-- 轮播图 -->  
        <swiper   
            class="tab-view"   
            ref="swiper1"   
            id="tab-bar-view"   
            :current="tabIndex"   
            :duration="300"  
            :circular="true"  
            :indicator-dots="true"  
            @change="onswiperchange"   
            @transition="onswiperscroll"   
            @animationfinish="animationfinish"  
            @onAnimationEnd="animationfinish"  
        >  
            <swiper-item   
                class="swiper-item"   
                v-for="(page, index) in swiperList"   
                :key="index"  
            >  
                <view   
                    class="swiper-rectangle"   
                    @tap.stop.prevent="onBindTapList"   
                    v-if="page.type == 'mp4'"  
                >  
                <!-- 视频 -->  
                    <video   
                        :src="page.image"   
                        :id="`video_${page.id}`"   
                        :ref="`swiper_${page.id}`"   
                        class="swiper-video"  
                        :autoplay="true"   
                        :muted="muted"   
                        :enable-progress-gesture="false"   

                        :vslide-gesture="false"  
                        @timeupdate="videoTimeupdate($event, page, index)">  
                    </video>  
                </view>  
                <view   
                    class="swiper-rectangle"   
                    v-if="page.type == 'img' || !page.type"   
                    @tap.stop.prevent="onBindTapList">  
                    <!-- 图片 -->  
                    <image   
                        class="swiper-img"   
                        :src="page.image"  
                    ></image>     
                </view>   
            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    // #ifdef APP-PLUS  
    const dom = weex.requireModule('dom');  
    // #endif  

    let m4v =  
        `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@20181126-lite.m4v`  

    export default {  
        components: {},  
        data() {  
            return {  
                // 是否静音  
                muted:true,  
                // 轮播图索引  
                tabIndex: 0,  
                // 轮播图列表 必要  
                swiperList: [{  
                        // url 媒体链接 img / video //必要  
                        image: m4v,  
                        // id //必要  
                        id: '0',  
                        // 当前 媒体文件 标题  不是必要  
                        title: '',  
                        // 媒体文件 类型 img / video // 必要  
                        type: 'mp4',  
                        //type类型为 mp4  视频总时长 // 可有可无  有：减少兼容性问题 无: 间接靠组件获取，多端问题存在多  
                        duration: 10000 // 默认10秒  
                    },  
                    {  
                        image: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',  
                        id: '1',  
                        title: '',  
                        type: 'img',  
                    },  
                    {  
                        image: m4v,  
                        id: '3',  
                        title: '',  
                        type: 'mp4',  
                    },  
                    {  
                        image: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/6acec660-4f31-11eb-a16f-5b3e54966275.jpg',  
                        id: '2',  
                        title: '',  
                        type: 'img',  
                    },  
                ],  
                // 是否显示面板指示点  
                indicatorDots: false,  
                // 自动播放 必要  
                autoplay: true,  
                //默认 每张停留时间 必要  
                default_interval: 5000,  
                // 每张停留时间 必要  
                interval: 5000,  
                // 切换过程所需时间 必要  
                duration: 500  
            }  
        },  
        onLoad() {  
            this.$nextTick(() => {  
                this.getSwiperList()  
                    .then(() => {  
                    })  
            })  
        },  
        onReady() {},  
        methods: {  
            // 冒泡点击事件  
            onBindTapList() {  

            },  
            // 监听 轮播图切换事件  
            onswiperchange(e) {  
                let index = e.target.current || e.detail.current  
                this.tabIndex = index  
                /* e.type(change)事件状态 e.target.current 当前索引  || e.currentTarget.dataset 节点暂存数据*/  
                // 监听当前是否为视频  
                this.onCurrentActiveForVideo(index)  
                // 监听当前  
                this.onCurrentActiveForImg(index)  
                // 暂停其余视频  
                this.changeBesides({  
                    index: index  
                })  
            },  
            // 监听切换开始动作  
            onswiperscroll(e) {  
                // console.log(e)  
            },  
            // 动画结束  
            animationfinish(e) {  
                // console.log(e)  
            },  
            // 更改 停留时间  
            intervalChange(val) {  
                this.interval = val  
            },  
            // 更改 索引  
            bindtapIndicator(e) {  
                this.tabIndex = e  
            },  

            //  轮播到 当前active为视频/图片 其余的轮播页视频停止播放  
            changeBesides(ev) {  
                this.$data.swiperList.forEach((item, index) => {  
                    if (ev.index != index && item.type == 'mp4') {  
                        item.context.pause()  
                    }  
                })  
            },    

            // 获取轮播图数据 并整理  
            getSwiperList() {  
                const _that = this  
                return new Promise((resolve, reject) => {  
                    /* api 获取到 轮播图数据后 先进行渲染 */  
                    let list = this.$data.swiperList.map(item => {  
                        if (item.type == 'mp4') {  
                            item.video_id = `video_${item.id}`  
                        }  
                        return item  
                    })  
                    // 赋值 swiper列表  
                    this.$data.swiperList = list  
                    // 显示swiper  
                    this.$data.showSwiper = true  
                    this.$nextTick(() => {  
                        // 检索 是否含有视频链接  
                        this.$data.swiperList.forEach((item, index) => {  
                            if (item.type == 'mp4') {  
                                // 视频组件上下文  
                                item.context = uni.createVideoContext(item.video_id)  
                                // 当前第一条为视频 直接播放  
                                if (index == 0) {  
                                    item.context.play()  
                                    // 获取时长 如果后台数据一开始就有时长，那就不会获取视频组件给的时长   
                                    setTimeout(() => {  
                                        if (item.duration) {  
                                            this.intervalChange(item.duration)  
                                        }  
                                    }, 1000)  
                                }  
                            }  
                        })  
                        resolve()  
                    })  
                })  
            },  

            // 监听 当前切换 为视频  
            onCurrentActiveForVideo(index) {  
                let currentSwiper = this.$data.swiperList[index]  
                if (currentSwiper.type == 'mp4') {  
                    currentSwiper.context.muted = true  
                    // 数据有总时长  
                    if (currentSwiper.duration) {  
                        this.intervalChange(currentSwiper.duration)  
                        // 播放  
                        currentSwiper.context.stop()  
                        currentSwiper.context.seek = 0  
                        currentSwiper.context.play()  
                        //////  
                    } else {  
                        // 播放  
                        currentSwiper.context.stop()  
                        currentSwiper.context.seek = 0  
                        currentSwiper.context.play()  
                        //////  
                        //获取总时长  
                        setTimeout(() => {  
                            if (currentSwiper.duration) {  
                                this.intervalChange(currentSwiper.duration)  
                            }  
                        }, 600)  
                    }  
                }  
            },  
            // 监听 当前切换 为图片  
            onCurrentActiveForImg(index) {  
                let currentSwiper = this.$data.swiperList[index]  
                // 没有type 默认img  
                if (currentSwiper.type == 'img' || !currentSwiper.type) {  
                    this.intervalChange(this.default_interval)  
                }  
            },  

            // 监听 视频时间 以及总时长  
            videoTimeupdate(ev, data, ind) {  
                // console.log('视频 detail', ev, data, ind)  
                // 已有 duration 时长 就不赋值  
                if (this.$data.swiperList[ind].duration) return  
                // 获取时长赋值  
                this.$data.swiperList[ind].duration = ev.detail.duration * 1000  
                // 播放完 视频暂停  
                if (ev.detail.currentTime == ev.detail.duration) {  
                    data.context.pause()  
                }  
            },  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .tab-view {  
        width: 750rpx;  
        height: 300rpx;  

    .swiper-item{  
        display: flex;  
        width: 750rpx;  
        height: 300rpx;  
        align-items: center;  
        justify-content: center;  
    }  
    .swiper-img,  
    .swiper-video,  
    .swiper-rectangle{  
        flex: 1;  
        width: 750rpx;  
        height: 300rpx;  
    }     

    }  

</style>