swiper里面插入的video无法拖动

使用 vue-awesome-swiper (v3.1.3) 做了一个轮播图片,需要实现的功能,遇到了如下问题:
1、滑动视频和图片都可以切换(如果只是图片没问题,但是视频在暂停状态下却无法滑动?)
2、轮播图正方形,但是视频是长方形,默认视频一直顶部对其,怎么让视频垂直居中对其呢?

swiper组件(基于vue-awesome-swiper (v3.1.3) 封装):

<template>
    <div class="wrapper">
        <swiper ref="mySwiper" :options="swiperOption" v-if="list.length > 0">
            <swiper-slide v-for="(item, idx) in list" :key="idx">
                <img v-if="item.mediaType == 'img'" class="swiper-img" :src="item.src" alt="">
                <video ref="myvideo" name='myvideo' v-if="item.mediaType == 'video'" :src="item.src" controls="controls" :poster="item.poster"></video>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>

export default {
    name: 'DetailSwiper',
    props:{
        list: Array
    },
    watch: {
        currentIdx (newval, oldval) {
            let videoList = $('.wrapper video').toArray()
            if(videoList.length > 0){
                if(videoList.some(item => !item.paused) && videoList.some(item => !item.ended)){
                    videoList.forEach(element => {
                        element.pause()
                        element.currentTime=0
                    });
                }
            }
        }
    },
    data(){
        let self = this;
        return {
            currentIdx: 0,
            swiperOption: {
                //页码
                pagination: '.swiper-pagination',
                // autoplay: 3000,
                loop: true,
                paginationClickable: true,
                on:{
                    transitionEnd: function() {
                        self.currentIdx = this.realIndex
                        // console.log(self.currentIdx)
                    }
                },  
            },
        }
    },
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff
.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 100% 
    background: #eee
    .swiper-img
        width: 100%
</style>

阅读 6.4k
1 个回答
新手上路,请多包涵

楼主解决了吗?我也遇到了同样的问题,swiper中的视频不能滑动。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题