使用Swiper插件实现视频轮播,怎么实现切换自动播放视频?


theme: scrolls-light
highlight: vs2015

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第1天

一、需求分析

这两天讨论了一个项目需求,刚开始是希望:轮播图中嵌入视频,轮播到视频自动播放,播放完毕切换下一张轮播,手动切换时暂停播放视频。后面因为自动播放没有声音,便暂时放弃了这个想法(有知道或了解的jy欢迎交流)。

后面改成像下图这样,单独用一个页面轮播视频,需求:

  • 点击下面封面图切换视频
  • 切换过去自动播放,上一个视频暂停(这个也还有bug)
  • 左上角浮动标签
  • 可以返回上一页和切换网页全屏

image-20221121224029632.png

二、需求拆解

轮播视频-swiper

视频轮播我采用了swiper插件,官网提供的组件里面正好有一个类似的样例

image-20221121224419822.png

只需要将上面部分的图片数据改成自己的视频数据就可以了,想了下数据大概长这样子:

[
    {
        id: "1",
        imgUrl: "src/assets/images/banner/g1.png", //封面图地址
        videoUrl: "https://cdn.uviewui.com/uview/resources/video.mp4", //视频地址
        text: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈", //视频描述
        play: false, //是否正在播放
    },
]
<div
     style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
     class="swiper mySwiper2"
     >
    <div class="swiper-wrapper">
        <div
             class="swiper-slide"
             v-for="item in state.videoData"
             :style="'background:url(' + item.imgUrl + ') no-repeat center/cover'"
             >
            <video
                   :src="item.videoUrl"
                   controls
                   ></video>
        </div>
    </div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div
             v-for="item in state.videoData"
             class="swiper-slide"
             >
            <p>{{ item.text }}</p>
            <img :src="item.imgUrl" />
        </div>
    </div>
</div>

页面结构差不多就是这样子,js代码就不贴出来了,倒时候重新写个demo放在GitHub上。

这个时候已经基本实现了点击封面图切换视频的效果了,下面做,当视频播放时切换自动暂停

视频播放时切换自动暂停

这个需求的话也比较简单,进入页面默认当前视频是数据的第一个,监听下面封面图的点击事件。

<div
     v-for="item in state.videoData"
     class="swiper-slide"
     @click="switchVideo(item.id)"
     >
function switchVideo(id) {
    //curVideo.value 当前视频的id
    let index = state.videoData.findIndex((item) => item.id == curVideo.value);
    if (state.videoData[index].play) {
        //当前视频暂停
        document.querySelector(`.myVideo${curVideo.value}`).pause();
        state.videoData[index].play = false;
    }
    curVideo.value = id;
}

将点击的视频id传入,判断当前视频是否正在播放,如果正在播放,通过pause()方法暂停视频,将传入的id赋值给当前视频。

现在可以切换视频时暂停视频播放了,但是还需要在视频播放、暂停和结束的时候修改数据play的状态

监听视频播放、暂停和结束

<div
     style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
     class="swiper mySwiper2"
     >
    <div class="swiper-wrapper">
        <div
             class="swiper-slide"
             v-for="item in state.videoData"
             :style="'background:url(' + item.imgUrl + ') no-repeat center/cover'"
             >
            <video
                   :class="'myVideo' + item.id"
                   :src="item.videoUrl"
                   controls
                   @play="onPlay(item.id)"
                   @pause="onPause(item.id)"
                   ></video>
        </div>
    </div>
</div>
<div thumbsSlider="" class="swiper mySwiper">
    <div class="swiper-wrapper">
        <div
             v-for="item in state.videoData"
             class="swiper-slide"
             @click="switchVideo(item.id)"
             >
            <p>{{ item.text }}</p>
            <img :src="item.imgUrl" />
        </div>
    </div>
    <tool-aside></tool-aside>
</div>
//监听视频播放
function onPlay(id) {
    state.videoData.forEach((item) => {
        if (item.id == id) {
            item.play = true;
        }
    });
}
//监听视频暂停
function onPause(id) {
    state.videoData.forEach((item) => {
        if (item.id == id) {
            item.play = false;
        }
    });
}
//监听视频播放结束
function onEnded(id) {
    state.videoData.forEach((item) => {
        if (item.id == id) {
            item.play = false;
        }
    });
}

左上角选项卡

这个也很简单,因为项目使用了 Element-plus ,所以直接使用了里面的组件

<div class="main">
    <div class="aside">
        <el-card class="box-card">
            <div class="text item">
                <el-tag @click="goBack()">返回</el-tag>
            </div>
            <div class="text item">
                <el-tag @click="toggleScreen(state.flag)">切换全屏</el-tag>
            </div>
        </el-card>
    </div>
</div>

再点击返回按钮时,触发 goBack 方法,通过路由跳转到首页

点击切换全屏时调用 toggleScreen 方法,通过 requestFullscreenexitFullscreen 方法切换全屏

const toggleScreen = () => {
    // 如果未开启就开启 如果已开启就关闭
    if (state.isScreenFull) {
        document.exitFullscreen(); // 关闭全屏
    } else {
        document.documentElement.requestFullscreen(); //开启全屏
    }
    state.isScreenFull = !state.isScreenFull;
};

总结

到目前为止需求已经完成的七七八八了,除了切换自动播放下一个视频

//切换时暂停视频播放
function switchVideo(id) {
    let index = state.videoData.findIndex((item) => item.id == curVideo.value);
    if (state.videoData[index].play) {
        ……
        //切换到的视频播放
        document.querySelector(`.myVideo${id}`).play();
        state.videoData[index].play = true;
    }
    curVideo.value = id;
}

我在上面函数中加入了注释下的两行代码,在切换视频时,当前视频如果正在播放,就会暂停自动播放下一个视频,如果当前视频没有播放,那么切换到下一个视频也不会播放。这是浏览器自带的机制吗??有没有做过的小伙伴可以交流一下,类似腾讯视频:点击一部电影,跳转后会自动播放,切换后也会自动播放。

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容