vue3+vant+van-swipe 实现短视频播放的功能(一)

作者:青山常在人不老   阅读 (1901)  |  收藏 (0)  |  点赞 (0)

摘要

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


原文链接:vue3+vant+van-swipe 实现短视频播放的功能(一)

在网上翻阅了很多通过vue3+vant+van-swipe 实现短视频播放的功能,但是收获很少,即使有这样的文章,内容也是残缺不全或者根本就是做广告的(严肃的投诉某课网,起的标题很诱人,但其实没有一点实际的内容:vue3.0+vant3仿快手/抖音短视频)。

于是打算自己实现一个短视频播放的小页面,简单但是不简陋,开始播放、暂停、上下滑动切换视频、点赞、分享、评论功能都有。 结果图如下

页面展示:

封面页

image.png


取消点赞

image.png

评论列表:

image.png

追加评论:

image.png

分享:

image.png


代码实现

<template>
    <div class="small-videl-detail">
        <div class="van_swipe">
            <!--vant van-swipe 滑动组件 -->
            <van-swipe :autoplay="400000" :show-indicators="false" @change="onChange" vertical>
                <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
                    <div class="video_container">
                        <!--video属性
                            webkit-playsinline ios 小窗播放,使视频不脱离文本流,安卓则无效
                            微信内置x5内核,
                            x5-video-player-type="h5" 启用H5播放器,是wechat安卓版特性,添加此属性,微信浏览器会自动将视频置为全屏
                            x5-video-player-fullscreen="true" 全屏设置,设置为 true 是防止横屏
                            x5-video-orientation 控制横竖屏 landscape 横屏,portrain竖屏; 默认portrain
                            x5-playsinline="" 使安卓实现h5同层播放,实现与ios同样效果,但兼容部分机型
                            poster:封面
                            src:播放地址
                          -->
                        <video class="video_box" width="100%" height="100%" webkit-playsinline="true" x5-playsinline=""
                               playsinline preload="auto" :poster="item.url" :src="item.cover" :playOrPause="playOrPause"
                               x-webkit-airplay="allow" x5-video-orientation="portrait" @click="pauseVideo" @ended="onPlayerEnded($event)"
                               loop="loop">
                        </video>
                        <!-- 封面 -->
                        <img v-show="isVideoShow" class="play" @click="playvideo" :src="item.url" />
                        <!-- 播放暂停按钮 -->
                        <van-icon name="pause-circle-o" color="white" v-show="iconPauseShow" size="90" class="icon_play" @click="pauseVideo"/>
                        <van-icon name="play-circle-o" color="white"  v-show="iconPlayShow" size="90" class="icon_play" @click="playvideo"/>
                    </div>
                </van-swipe-item>
            </van-swipe>
            <!--  右侧标签 -->
            <div class="right_tabs">
                <div>
                    <van-icon :name="likeName" color="#ee0a24"  size="40" badge="100+" @click="likeIt"/>
                    <p></p>
                    <van-icon name="chat" size="40" color="white"   badge="48" @click="show = true"/>
                    <p></p>
                    <van-icon name="share" color="white"  size="40" @click="share = true"/>
                </div>

            </div>

            <!--  下部信息 -->
            <div class="botton_tabs">
                <p class="video_info_title">
                    @张先生
                </p>
                <p class="video_info_content">
                    这车性能真的不错,底盘低,加速快,开车体验真好啊,高速上开车平稳,超车也很容易!
                </p>
            </div>

        </div>
        <!-- 评论面板 -->
        <van-action-sheet v-model:show="show" @select="onSelectPingLun" >
            <div class="pinglun_content" id="pinglun_content" ref="pinglun_content">
                <van-cell-group>
                    <van-cell title="热门评论" class="article-title">
                        <!-- 展示五条 -->
                        <template #label>
                            <van-cell title="徐女士"  >
                                <!-- 使用 icon 插槽来自定义左侧图标 -->
                                <template #icon>
                                    <div class="" style="margin-right: .23rem">
                                        <van-image
                                                width="2rem"
                                                height="2rem"
                                                fit="fill"
                                                round
                                                src="https://img.yzcdn.cn/vant/cat.jpeg"
                                        />
                                    </div>
                                </template>
                                <template #label>
                                    <div class="ping_lun_info">
                                        <div class="pin_lun_detail">
                                            这仅仅是规定,还是出台一个法律保护企业微妙,否则一旦出现问题,肯定第一就找企业。
                                        </div>
                                        <div class="ping_lun_other">
                                            <span class="pnglun_date">3天前-发布</span>
                                            <van-icon name="good-job-o" class="pinglun_label" size="1.2rem" badge="99+"  color="#ee0a24"/>
                                            <van-tag plain class="pinglun_label" round color="#7232dd"  @click="detailShow = true">评论 12</van-tag>
                                        </div>
                                    </div>
                                </template>
                            </van-cell>
                            <van-cell title="徐女士"  >
                                <!-- 使用 icon 插槽来自定义左侧图标 -->
                                <template #icon>
                                    <div class="" style="margin-right: .23rem">
                                        <van-image
                                                width="2rem"
                                                height="2rem"
                                                fit="fill"
                                                round
                                                src="https://img.yzcdn.cn/vant/cat.jpeg"
                                        />
                                    </div>
                                </template>
                                <template #label>
                                    <div class="ping_lun_info">
                                        <div class="pin_lun_detail">
                                            这仅仅是规定,还是出台一个法律保护企业微妙,否则一旦出现问题,肯定第一就找企业。
                                        </div>
                                        <div class="ping_lun_other">
                                            <span class="pnglun_date">3天前-发布</span>
                                            <van-icon name="good-job-o" class="pinglun_label" size="1.2rem" badge="99+"  color="#ee0a24"/>
                                            <van-tag plain class="pinglun_label" round color="#7232dd"  @click="detailShow = true">评论 12</van-tag>
                                        </div>
                                    </div>
                                </template>
                            </van-cell>
                            <van-cell title="徐女士"  >
                                <!-- 使用 icon 插槽来自定义左侧图标 -->
                                <template #icon>
                                    <div class="" style="margin-right: .23rem">
                                        <van-image
                                                width="2rem"
                                                height="2rem"
                                                fit="fill"
                                                round
                                                src="https://img.yzcdn.cn/vant/cat.jpeg"
                                        />
                                    </div>
                                </template>
                                <template #label>
                                    <div class="ping_lun_info">
                                        <div class="pin_lun_detail">
                                            这仅仅是规定,还是出台一个法律保护企业微妙,否则一旦出现问题,肯定第一就找企业。
                                        </div>
                                        <div class="ping_lun_other">
                                            <span class="pnglun_date">3天前-发布</span>
                                            <van-icon name="good-job-o" class="pinglun_label" size="1.2rem" badge="99+"  color="#ee0a24"/>
                                            <van-tag plain class="pinglun_label" round color="#7232dd"  @click="detailShow = true">评论 12</van-tag>
                                        </div>
                                    </div>
                                </template>
                            </van-cell>
                        </template>
                    </van-cell>
                    <van-cell title="最新评论" class="article-title">
                        <template #label>
                            <van-cell title="徐女士"  >
                                <!-- 使用 icon 插槽来自定义左侧图标 -->
                                <template #icon>
                                    <div class="" style="margin-right: .23rem">
                                        <van-image
                                                width="2rem"
                                                height="2rem"
                                                fit="fill"
                                                round
                                                src="https://img.yzcdn.cn/vant/cat.jpeg"
                                        />
                                    </div>
                                </template>
                                <template #label>
                                    <div class="ping_lun_info">
                                        <div class="pin_lun_detail">
                                            这仅仅是规定,还是出台一个法律保护企业微妙,否则一旦出现问题,肯定第一就找企业。
                                        </div>
                                        <div class="ping_lun_other">
                                            <span class="pnglun_date">3天前-发布</span>
                                            <van-icon name="good-job-o" class="pinglun_label" size="1.2rem" badge="99+"  color="#ee0a24"/>
                                            <van-tag plain class="pinglun_label" round color="#7232dd"  @click="detailShow = true">评论 12</van-tag>
                                        </div>
                                    </div>
                                </template>
                            </van-cell>
                            <van-cell title="徐女士"  >
                                <!-- 使用 icon 插槽来自定义左侧图标 -->
                                <template #icon>
                                    <div class="" style="margin-right: .23rem">
                                        <van-image
                                                width="2rem"
                                                height="2rem"
                                                fit="fill"
                                                round
                                                src="https://img.yzcdn.cn/vant/cat.jpeg"
                                        />
                                    </div>
                                </template>
                                <template #label>
                                    <div class="ping_lun_info">
                                        <div class="pin_lun_detail">
                                            这仅仅是规定,还是出台一个法律保护企业微妙,否则一旦出现问题,肯定第一就找企业。
                                        </div>
                                        <div class="ping_lun_other">
                                            <span class="pnglun_date">3天前-发布</span>
                                            <van-icon name="good-job-o" class="pinglun_label" size="1.2rem" badge="99+"  color="#ee0a24"/>
                                            <van-tag plain class="pinglun_label" round color="#7232dd"  @click="detailShow = true">评论 12</van-tag>
                                        </div>
                                    </div>
                                </template>
                            </van-cell>
                            <van-cell title="徐女士"  >
                                <!-- 使用 icon 插槽来自定义左侧图标 -->
                                <template #icon>
                                    <div class="" style="margin-right: .23rem">
                                        <van-image
                                                width="2rem"
                                                height="2rem"
                                                fit="fill"
                                                round
                                                src="https://img.yzcdn.cn/vant/cat.jpeg"
                                        />
                                    </div>
                                </template>
                                <template #label>
                                    <div class="ping_lun_info">
                                        <div class="pin_lun_detail">
                                            这仅仅是规定,还是出台一个法律保护企业微妙,否则一旦出现问题,肯定第一就找企业。
                                        </div>
                                        <div class="ping_lun_other">
                                            <span class="pnglun_date">3天前-发布</span>
                                            <van-icon name="good-job-o" class="pinglun_label" size="1.2rem" badge="99+"  color="#ee0a24"/>
                                            <van-tag plain class="pinglun_label" round color="#7232dd"  @click="detailShow = true">评论 12</van-tag>
                                        </div>
                                    </div>
                                </template>
                            </van-cell>
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
        </van-action-sheet>

        <!-- 评论框 -->
        <van-action-sheet v-model:show="detailShow" @select="onSelectPingLun" >
            <div class="content">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field
                                v-model="message"
                                rows="8"
                                size="large"
                                type="textarea"
                                maxlength="100"
                                placeholder="您的评论..."
                                show-word-limit
                        />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block color="linear-gradient(to right, #7232dd, #ee0a24)" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-action-sheet>

       <!-- 分享面板 -->
        <van-share-sheet
                v-model:show="share"
                title="立即分享给好友"
                :options="options"
                @select="onSelect"
        />
    </div>
</template>

博客文章字数超限制,下篇文章继续:js+css代码

图片和视频资源可以自己去网上找个,替换成自己的就可以了。

分类   前端配置
字数   14769

博客标签    vue3 模仿火山小视频   vant + vue 模仿抖音小视频   vue+vant 短视频  

评论