Uniapp自定义video播放按钮并结合swiper图片

淘宝中商品详情页都是视频和图片结合，我们这个demo实现的效果如下

话不多说，直接上代码了

先说html布局

<swiper :indicator-dots="dots" :interval="3000" :duration="1000" :circular="true" indicator-color="rgba(216, 216, 216)"
indicator-active-color="#7a7a7a" @change="bannerfun"><block v-for="(iteming,index) in imagetext[0].media" :key="index"><swiper-item class="swiper-video" v-if="iteming.video != '' "><view class="video-btn"><video id="myVideo" ref="myVideo" :src="iteming.video" controls :show-center-play-btn="false" :controls="contimg"object-fit="cover" @play="playFun()" @pause="pauseFun()" @ended="endedFun()"></video><view class="video-img" @tap="videoPlay()" v-show="startVideo"><image src="../../static/details/bofang.svg" mode=""></image></view></view></swiper-item><block v-for="(item,indexing) in iteming.imgArray" :key="indexing"><swiper-item><image :src="item" mode="aspectFill" class="imageurl"></image></swiper-item></block></block>
</swiper>

解析:

1.   第一个swiper-item是包裹我们的视频的，第二个swiper-item是包裹我们的图片
2.  swiper中change事件是，current 改变时会触发 change 事件，也就是当我们滑动的时候触发
3.  video中的:controls="contimg"是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
4.  @play是当开始/继续播放时触发play事件
5.  @pause当暂停播放时触发 pause 事件
6.  @ended当播放到末尾时触发 ended 事件

这是我的数据结构，所以布局才这样写，你可以根据你的数据结构自行发挥

data中

data() {return {// 是否显示指示点dots: false,//video对象videoplay: {},//中间播放按钮startVideo: true,//是否显示下方的播放，暂停等contimg: false,// 请求的商品图片imagetext: [],// 是否有视频truevideo:'',}},

methods里面

网络请求，我这个网络请求使用class封装的

async detRequest(id) {let introduce = new this.Request(this.Urls.m().introduceurl + '?id=' + id).modeget()try {let res = await Promise.all([introduce])console.log(res)//图片视频的数据this.imagetext = res[0].datalet mendata = res[0].data[0]//如果有视频，就不显示面板指示点this.truevideo = mendata.media[0].videothis.dots = this.truevideo == '' ? true : false} catch (e) {console.log(e)}
},

然后是当我们滑动时候触发

//滑块滑动时触发bannerfun(e) {// 出现指示点let inx = e.detail.current// 没有视频要显示指示点if (this.truevideo != '') {this.dots = inx == 0 ? false :  true,// 滑动时暂停视频播放this.videoplay.pause()} else {this.dots = true}},

视频播放时触发

playFun() {this.startVideo = falsethis.contimg = true},

视频暂停时触发

pauseFun() {this.startVideo = truethis.contimg = false
},

播放到末尾触发

endedFun() {this.startVideo = truethis.contimg = false
},

手动触发视频播放

videoPlay() {setTimeout(() => {this.videoplay.play()}, 200)
},

获取video对象

mounted() {this.videoplay = wx.createVideoContext('myVideo')
}

//获取商品数据

onLoad() {this.detRequest(传id)
}

github上有详细的教程

github项目地址:https://github.com/lsh555/TmUniapp

Uniapp自定义video播放按钮并结合swiper图片相关推荐

H5 实现自定义video播放器,快来点我吧
效果要实现自定义video播放器需要熟悉video的相关操作视频播放它有哪些操作 1. 播放 play() 2. 暂停 pause() 3. 判断当 ...
JS 用CANVAS自定义VIDEO播放器
JS 用CANVAS自定义VIDEO播放器概述 CANVAS绘制核心代码播放器代码使用页面HTML代码使用页面JS代码使用示例概述 HTML5用规范的VIDEO标签取代了以往需要借助外部控 ...
jquery设置video的宽度_jQ效果：jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
html5+video手机样式修改,如何自定义video播放器样式？
本篇文章给大家分享了关于如何自定义video播放器样式,内容很详细,希望可以帮助到大家. DIY 本文基于HTML5 Video API,自定义Web视频播放器样式. 其实吧,原生的video 标签样 ...
微信小程序 - 实现＜video＞视频组件自定义封面及播放按钮，给 video 视频播放组件加上封面图、封面标题、封面描述文字、自定义的播放按钮、DIY 封面等（详细示例源码）
前言网上的教程都太乱了,根本无法进行改造,本文做优质的教程. 本文实现了微信小程序项目中,给 <video> 视频播放组件增加自定义封面.播放按钮.描述等一切 DIY! 您直接一键复制 ...
html5 video播放按钮放在中间,在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area)...
在html5视频控制区跟踪点击播放按钮(Track clicks to play button in html5 video control area) 我点击了一张HTML5视频播放海报,并点击了控 ...
html自定义video播放器
本章的css可以说约等于没有,全是逻辑,仅供参考 html <!DOCTYPE html> <html lang="en"> <head>< ...
H5自定义video播放控件，播放暂停使用图标
大家都知道vedio的contorls属性可以将video的控件显示出来,包括播放.暂停.进度条.声量控制.全屏显示等.但是出于需求,往往需要将某些控件外形变成我们想要图标(但功能一样),而不是全部使 ...
自定义video播放器的常用的事件。
window.onresize 这个事件主要用于当浏览器窗口发生改变时,实时获取video的width和height: 代码示例: window.onresize=function() {// 控制窗 ...

Uniapp自定义video播放按钮并结合swiper图片

Uniapp自定义video播放按钮并结合swiper图片相关推荐

最新文章

热门文章