小程序video控件的使用（微信小程序video组件）
- 时间:
- 来源: 网络
小程序video控件用来实现播放视频的效果，是小程序基本的系统组件，下面为大家介绍要如何使用。
一、属性
|属性名|类型|默认值|说明|最低版本|
|——–|——–|——–|——–|——–|
|src|String||要播放视频的资源地址||
|initial-time|String||指定视频初始播放位置|1.6.0|
|duration|Number||指定视频时长|1.1.0|
|controls|Boolean|true|是否显示默认播放控件(播放/暂停按钮、播放进度、时间)||
|danmu-list|ObjectArray||弹幕列表||
|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。||
|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|
微商好助手小程序工具提供多类型商城/门店小程序制作，可视化编辑1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。
更多小程序开发案例，尽在：
价值1980元火爆的0基础小程序制作开发赚钱训练营免费看