微信小程序中的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实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 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
我的群发邮件程序
2006/10/09 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
JavaScript编写一个贪吃蛇游戏
2017/03/09 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
python unittest实现api自动化测试
2018/04/04 Python
Python print不能立即打印的解决方式
2020/02/19 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
python3中数组逆序输出方法
2020/12/01 Python
Python学习之time模块的基本使用
2021/01/17 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
Parfume Klik丹麦:香水网上商店
2018/07/10 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
干部下基层实施方案
2014/03/14 职场文书
平安建设实施方案
2014/03/19 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
英语教师求职信范文
2015/03/20 职场文书