微信小程序视频播放器的简易使用

主要功能

  1. 控制播放、暂停、设置视频封面图
  2. 设定初始化播放在第几秒
  3. 控制视频的播放总长度
  4. 控制是否显示弹幕功能
  5. 禁止控制进度的手势
  6. 禁止视频快进

微信小程序视频播放器的简易使用


video参数详解


  • poster 视频封面图
  • id video元素的ID值
  • src 视频的路径地址
  • duration 控制视频播放总长度
  • initial-time 视频初始播放时间
  • show-play-btn 是否显示视频底部控制栏的播放按钮
  • show-progress 是否显示播放进度条
  • bindtimeupdate 监听视频播放时的动作
  • binderror 视频播放出错时触发
  • danmu-list 弹幕列表
  • enable-progress-gesture 是否开启控制进度的手势
  • enable-danmu 是否展示弹幕
  • danmu-btn 是否显示弹幕按钮
  • controls 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
  • 微信小程序视频播放器的简易使用


    控制进度条快进功能详解

    小程序官方文档没有提供是否可以控制快进的属性,现在的需求是在观看课程的过程中不允许快进,那么如何实现这个功能呢?

    1、取消控制进度的手势,这样在操作屏幕的时候就无法进行快进(但是此时还是可以通过播放进度条来进行快进)

    2、设定一个遮罩层,将视频中的播放进度遮住,这样用户就无法进行操作,详见代码参考

    wxml

    
    

    wxss

    
    

    当播放100秒时,提供使用打卡成功 功能详解

    js

    
    

    弹幕功能详解

    1、发送弹幕

    
    

    2、弹幕列表

    
    

    微信小程序视频播放器的简易使用

    以上就是我在开发当中用到的简易视频播放器,大家有其他的需求可以在评论区留言谈论。

    有需要我这套源码的可以私信我。

    来源:小程序软件开发

    声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

    上一篇 2021年2月6日
    下一篇 2021年2月7日

    相关推荐