微信小程序中的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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
Javascript中typeof 用法小结
May 12 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
JavaScript实现简单的星星评分效果
May 18 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 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新手上路(七)
2006/10/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
处理(php-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
基于JavaScript实现的插入排序算法分析
2017/04/14 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
小程序转发探索示例
2019/02/19 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
javascript实现时钟动画
2020/12/03 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
介绍java中初始化块的使用
2012/09/11 面试题
托管代码(Managed Code)和非托管代码(Unmanaged Code)有什么区别
2014/09/29 面试题
医学专业五年以上个人求职信
2013/12/03 职场文书
英语专业学生个人求职信
2014/01/28 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
班组长安全工作职责
2014/07/15 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
税务会计岗位职责
2015/04/02 职场文书
母亲节感言
2015/08/03 职场文书
导游词之大雁塔景区
2019/09/17 职场文书