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


Posted in Javascript onJanuary 02, 2020

效果图展示:  

微信小程序中的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', // 视频播放icon
  videoLockIcon:'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视频实现 自定义播放按钮、封面图、视频封面上文案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS 对象介绍
Jan 20 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 #Javascript
Element-UI+Vue模式使用总结
Jan 02 #Javascript
JS代码触发事件代码实例
Jan 02 #Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 #Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 #Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
Vue 实现简易多行滚动&quot;弹幕&quot;效果
Jan 02 #Javascript
You might like
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
jquery+php实现搜索框自动提示
2014/11/28 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
python调用win32接口进行截图的示例
2020/11/11 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
开学典礼策划方案
2014/05/28 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
干部理论学习心得体会
2016/01/21 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python