vue3+vant+van-swipe 实现短视频播放的功能（二）

摘要

简单实现了移动端播放短视频的功能，支持上下滑动切换短视频，模仿快手和抖音短视频页面。

书接上文vue3+vant+van-swipe 实现短视频播放的功能（一）：继续js和css部分内容：

<script>

    import { Toast } from 'vant';
    export default {
        name: "SmallVideoDetail",
        data() {
            return {
                share: false,
                show: false,
                detailShow: false,
                dianzhan: false,
                likeName: 'like',
                current: 0,
                options: [
                    [
                        { name: '微信', icon: 'wechat' },
                        { name: '朋友圈', icon: 'wechat-moments' },
                    ],
                    [
                        { name: '复制链接', icon: 'link' },
                        { name: '二维码', icon: 'qrcode' },
                        { name: '小程序码', icon: 'weapp-qrcode' },
                    ],
                ],
                videoList: [{
                    url: require('@/assets/video/video-fengmian-3.jpg'),
                    cover: require('@/assets/video/video-1.mp4'),
                }, {
                    url: require('@/assets/video/video-fengmian-2.jpg'),
                    cover: require('@/assets/video/video-2.mp4'),

                }, {
                    url: require('@/assets/video/video-fengmian-1.jpg'),
                    cover: require('@/assets/video/video-3.mp4'),
                }, {
                    url: require('@/assets/video/video-fengmian-5.jpg'),
                    cover: require('@/assets/video/video-4.mp4'),
                }, {
                    url: require('@/assets/video/video-fengmian-2.jpg'),
                    cover: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',
                }, {
                    url: require('@/assets/video/video-fengmian-1.jpg'),
                    cover: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',
                }],
                isVideoShow: true,
                playOrPause: true,
                video: null,
                iconPlayShow: true,
                iconPauseShow: false
            }
        },
        methods: {
            onSelect (option) {
                this.share = false;
            },
            likeIt(event) {
              if (this.dianzhan) {
                  Toast.success('点赞成功');
                  this.dianzhan = false;
                  this.likeName = 'like'
              }  else {
                  Toast.success('取消成功');
                  this.dianzhan = true;
                  this.likeName = 'like-o'
              }
            },
            onChange(index) {
                //改变的时候 暂停当前播放的视频
                let video = document.querySelectorAll('video')[this.current];
                video.pause();
                this.playOrPause = false;
                this.current = index;
                //重置显示封面。图标等
                this.isVideoShow = true;
                this.iconPlayShow = true
                this.iconPauseShow = false
            },
            playvideo(event) {
                let video = document.querySelectorAll('video')[this.current];
                console.log("playvideo：" + this.current);
                this.isVideoShow = false;
                this.iconPlayShow = false
                this.iconPauseShow = true
                video.play();
                this.displayBtn()
            },
            pauseVideo(event) { //暂停\播放
                let video = document.querySelectorAll('video')[this.current]
                console.log("pauseVideo" + this.current)
                if (this.playOrPause) {
                    video.pause()
                    this.iconPlayShow = true
                    this.iconPauseShow = false
                } else {
                    video.play()
                    this.iconPlayShow = false
                    this.iconPauseShow = true
                }
                this.playOrPause = !this.playOrPause
                this.displayBtn()
            },
            displayBtn() {
                const secounds = 1
                let num = 0
                const timer = setInterval(() => {
                    if(num < secounds) {
                        num++
                    }else {
                        clearInterval(timer)
                        this.iconPlayShow = false
                        this.iconPauseShow = false
                    }
                }, 1000)// 这里的时间不要忘记，否则没有效果
            },
            onPlayerEnded(player) { //视频结束
                this.isVideoShow = true
                this.current += this.current
            },
        }
    }
</script>
<style scoped>
    .botton_tabs {
        margin-left: .6rem;
        position: absolute;
        bottom: 5%;
        left: 0%;
        width: 83%;
        z-index: 999;
    }
    .botton_tabs .video_info_title {
        font-size: 1.03rem;
        font-weight: 600;
        color: white;
    }
    .botton_tabs .video_info_content {
        color: white;
        font-size: .8rem;
    }

/*    /deep/.van-cell-group {
        background-color: transparent;
    }
    /deep/.van-cell-group .van-cell {
        background-color: transparent;
    }
    /deep/.van-cell__title span {
        font-size: 1.03rem;
        font-weight: 600;
        color: white;
    }
    /deep/.van-cell__title .van-cell__label {
        color: white;
        font-weight: 600;
    }*/
    .hide {
        display: none;
    }
    .show{
        display: block;
    }

    .video-player {
        height: 100vh;
        width: 100vw;
    }

    .product_swiper{
        width: 100vw;
        height: 100vh;
    }

    .van_swipe {
        width: 100vw;
        height: 100vh;
    }

    .van-swipe {
        width: 100%;
        height: 100%;
    }

    .container_box {
        width: 100vw;
        height: 100vh;
    }

    .video_box {
        object-fit: fill !important;
        z-index: 999;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    video {
        object-position: 0 0;
    }

    .icon_play {
        position: absolute;
        top: 44%;
        right: 40%;
        z-index: 999;
    }

    .right_tabs {
        position: absolute;
        top: 62%;
        right: 6%;
        z-index: 999;
    }
    .play,
    .platStart {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
    }
    /*评论*/
    .ping_lun_info {

    }
    .article-other {
        margin-top: .75rem;
    }
    .ping_lun_info .ping_lun_other {
        margin-top: .5rem;
    }
    .ping_lun_info .ping_lun_other .pnglun_date {
        font-weight: 600;
    }
    .ping_lun_info .ping_lun_other .pinglun_label {
        margin-left: 1.5rem;
    }
</style>

 收藏 ( 0 )  赞 ( 0 )