微信小程序中的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 相关文章推荐
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
jsonp原理及使用
Oct 28 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
基于jquery编写分页插件
Mar 07 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
Jquery-data的三种用法
Apr 18 jQuery
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
微信小程序实现点赞业务
Feb 10 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中常用编辑器推荐
2007/01/02 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
使用PHP编写发红包程序
2015/07/22 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
Webpack按需加载打包chunk命名的方法
2019/09/22 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python实现操作文件(文件夹)
2019/10/31 Python
python实现ftp文件传输功能
2020/03/20 Python
python判断元素是否存在的实例方法
2020/09/24 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
大学生求职中的自我评价
2013/10/01 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
国际贸易系求职信
2014/08/09 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
公司处罚决定书
2015/06/24 职场文书
校园运动会广播稿
2015/08/19 职场文书