ue3+vant+van-swipe 实现短视频播放的功能（一）
原文链接：vue3+vant+van-swipe 实现短视频播放的功能（一）在网上翻阅了很多通过vue3+vant+van-swipe 实现短视频播放的功能，但是收获很少，即使有这样的文章，内容也是残缺不全或者根本就是做广告的（严肃的投诉某课网，起的标题很诱人，但其实没有一点实际的内容：vue3.0+vant3仿快手/抖音短视频）。于是打算自己实现一个短视频播放的小页面，简单但是不简陋，开始播放、
·
原文链接：vue3+vant+van-swipe 实现短视频播放的功能（一）
在网上翻阅了很多通过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代码
图片和视频资源可以自己去网上找个，替换成自己的就可以了。
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)