摘要
简单实现了移动端播放短视频的功能，支持上下滑动切换短视频，模仿快手和抖音短视频页面。
vue3+vant+van-swipe 实现短视频播放的功能（一）
• 阅读 (2938) | 收藏 (0) | 点赞 (0)
在网上翻阅了很多通过vue3+vant+van-swipe 实现短视频播放的功能，但是收获很少，即使有这样的文章，内容也是残缺不全或者根本就是做广告的（严肃的投诉某课网，起的标题很诱人，但其实没有一点实际的内容：vue3.0+vant3仿快手/抖音短视频）。
于是打算自己实现一个短视频播放的小页面，简单但是不简陋，开始播放、暂停、上下滑动切换视频、点赞、分享、评论功能都有。 结果图如下
页面展示：
封面页
取消点赞
评论列表：
追加评论：
分享：
代码实现
<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
留言
QQ讨论群
返回顶部