返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

小程序video控件的使用

2020-09-27 作者:黄珊

  小程序video控件的使用

  小程序video控件用来实现播放视频的效果,是小程序基本的系统组件,下面为大家介绍要如何使用。

  一、属性

  | 属性名 | 类型 | 默认值 | 说明 | 最低版本 |

  |——–|——–|——–|——–|——–|

  | src | String| | 要播放视频的资源地址 | |

  | initial-time| String | | 指定视频初始播放位置| 1.6.0 |

  | duration |Number|| 指定视频时长 | 1.1.0 |

  | controls |Boolean |true| 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)| |

  | danmu-list |Object Array||弹幕列表 | |

  | danmu-btn |Boolean|false | 是否显示弹幕按钮,只在初始化时有效,不能动态变更| |

  | enable-danmu |Boolean|false| 是否展示弹幕,只在初始化时有效,不能动态变更 | |

  |autoplay|Boolean|false|是否自动播放| |

  |loop|Boolean|false|是否循环播放| 1.4.0 |

  |muted|Boolean|false|是否静音播放| 1.4.0 |

  |page-gesture|Boolean|false|在非全屏模式下,是否开启亮度与音量调节手势|1.6.0 |

  |direction|Number||设置全屏时视频的方向,不指定则根据宽高比自动判断。有效值为 0(正常竖向), 90(屏幕逆时针90度), -90(屏幕顺时针90度)|1.7.0|

  |bindplay|EventHandle||当开始/继续播放时触发play事件| |

  |bindpause|EventHandle||当暂停播放时触发 pause 事件| |

  |bindended|EventHandle||当播放到末尾时触发 ended 事件| |

  |bindtimeupdate|EventHandle||播放进度变化时触发,event.detail = {currentTime, duration} 。触发频率 250ms 一次| |

  |bindfullscreenchange|EventHandle||当视频进入和退出全屏是触发,event.detail = {fullScreen, direction},direction取为 vertical 或 horizontal| |

  |objectFit|String|contain|当视频大小与 video 容器大小不一致时,视频的表现形式。contain:包含,fill:填充,cover:覆盖| 1.4.0|

  |poster|String||视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 poster 无效| |

  ||||||

  video 组件 默认宽度300px、高度225px,可通过wxss设置宽高。

  三、相关实现api

  1、wx.createVideoContext

  创建并返回 video 上下文 videoContext 对象。在自定义组件下,第二个参数传入组件实例this,以操作组件内 video 组件

  2、videoContext对象

  videoContext 通过 videoId 跟一个 video 组件绑定,通过它可以操作一个 video 组件。

  videoContext 对象的方法列表:

  | 方法 | 参数 | 说明 | 最低版本 |

  |——–|——–|——–|——–|

  |play | 无| 播放 | |

  |pause| 无| 暂停 | |

  |seek | position| 跳转到指定位置,单位 s| |

  |sendDanmu|danmu|发送弹幕,danmu 包含两个属性 text, color。||

小程序video控件的使用

  |sendDanmu|danmu|发送弹幕,danmu 包含两个属性 text, color。||

  |sendDanmu|danmu|发送弹幕,danmu 包含两个属性 text, color。||

  |playbackRate|rate|设置倍速播放,支持的倍率有 0.5/0.8/1.0/1.25/1.5|1.4.0|

  |requestFullScreen|无|进入全屏,可传入{direction}参数(1.7.0起支持),详见video组件文档|1.4.0|

  |exitFullScreen|无|退出全屏|1.4.0|

 HiShop小程序工具提供多类型商城/门店小程序制作,可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面,所看即所得,只需要美工就能做出精美商城。

更多小程序开发案例,尽在:http://www.hishop.com.cn/xiaocx/kaifa.html   

线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银,提升门店经营效率。

  • 进销存管理

    系统自带进销存管理,更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价
【本站声明】

1、本网站发布的该篇文章,目的在于分享电商知识及传递、交流相关电商信息,以便您学习或了解电商知识,请您不要用于其他用途;
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站,更非本网站提供,与本网站无关,系他人的商品或服务,本网站对于该类商标、标识不拥有任何权利;
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保;
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。

推荐文章

门店系统 获取报价 立即咨询 免费试用