微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案

效果图展示：

实现方法：

在video中添加一个cover-view，在cover-view写两个cover-image，一个用来存储封面图、一个用来存放播放按钮，同级写一个cover-view用来完成封面上的文字，设置绝对定位，水平垂直居中，在播放按钮上添加点击事件，点击之后隐藏cover-view，最后在监听视频结束事件，重新填充封面跟播放按钮就可以了。

代码：

<video id="myVideo" src="{{videoSrc}}" enable-danmu controls show-fullscreen-btn show-center-play-btn="{{false}}" auto-pause-if-navigate auto-pause-if-open-native show-play-btn object-fit="fill" bindpause="bindpause" bindended="bindended" ><cover-view class="video_cover" wx:if="{{isShow}}" bindtap="bindplay"><cover-image src="{{videoCoverImg}}" mode="widthFix"></cover-image><cover-image src="{{videoPlayIcon}}" mode="widthFix" class="video_play_icon"></cover-image><cover-view class="video_bg_black"><cover-view class="video_cover_txt"><cover-view><cover-view class="video_txt">1天1元，开通VIP</cover-view><cover-view class="video_txt">更多优质视频等你来解锁</cover-view></cover-view><cover-image src="{{videoLockIcon}}" class="video_icon_lock" mode="widthFix"></cover-image></cover-view></cover-view></cover-view>
</video>

Page({data: {isShow:true,videoSrc:'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',   // 视频videoCoverImg:'http://img5.imgtn.bdimg.com/it/u=1672477765,2527992874&fm=26&gp=0.jpg',   // 视频封面图videoPlayIcon:'http://39.105.134.221:8080/test/source1.png',  // 视频播放iconvideoLockIcon:'http://39.105.134.221:8080/test/source2.png',   // 视频播放锁},onReady: function () {this.videoContext = wx.createVideoContext('myVideo')},// 点击封面自定义播放按钮时触发bindplay() {this.setData({isShow:false})this.videoContext.play();console.log('play')},// 监听播放到末尾时触发bindended(){console.log('bindended')this.setData({isShow: true})this.videoContext.ended();},// 监听暂停播放时触发bindpause(){console.log('pause')}
})


.video_cover{width:100%;height:100%;position:relative;
}
.video_play_icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:40px;height:40px;z-index:5
}
.video_bg_black{position:absolute;left:0;top:0;bottom:0;right:0;background:rgba(0,0,0,.5);
}
.video_cover_txt{display:flex;justify-content: flex-end;align-items: center;text-align:right;color: #fff;font-size: 28rpx;margin-top: 35rpx;height: 90rpx;
}
.video_icon_lock{width:30rpx;height: auto;margin:0 30rpx;
}
.video_txt{margin:10rpx auto;
}

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案相关推荐

微信小程序中使用video组件
文章目录前情提要搭建视频服务器小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js ...
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签
微信小程序中播放海康萤石云HLS '.m3u8'视频 video标签前言萤石云开放平台微信开发者工具前言因为项目需要在微信小程序上展示实时视频流信息,以下内容是我将萤石云平台官方文档和自己实 ...
教你如何用手机下载视频号[微信小程序]中的视频
** 如何下载微信视频号**[微信小程序]**中的视频 ** 事情是这样的,因为近期所在工作单位要迎接检查,老板发了几个小程序视频给我,需要我把他下下来,我最初找了一下,并不能够找到下载按钮,就打算改 ...
使用Filler4提取微信小程序中的视频
因为需要做防范电信网络诈骗的宣传,但是相关视频网站的内容都不适合宣传使用,最后在微信小程序搜索到一些合适的内容,但是微信小程序的视频不能直接下载,就考虑通过获得文件地址直接下载. 1.机器环境系统: ...
微信开发上传视频到服务器,微信小程序中实现上传视频的开发代码
微信小程序中实现上传视频的开发代码,视频,接口,上传,代码,服务器微信小程序中实现上传视频的开发代码易采站长站,站长之家为您整理了微信小程序中实现上传视频的开发代码的相关内容. 本篇文章给大家带来 ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
浅谈高大上的微信小程序中渲染html内容—技术分享
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxP ...
微信小程序中的页面文件和组件
页面文件页面构造器 JS文件页面的JS文件,用于书写当前页面所需要的脚本代码以及生命周期函数. Page() : 注册了一个页面接收一个对象,该对象用于配置当前页面所需内容. 该对象拥有的属性: ...
在微信小程序中渲染HTML内容
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxP ...

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案相关推荐

最新文章

热门文章

微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案

微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案相关推荐

最新文章

热门文章

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案

微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案相关推荐