小程序的video控件如何使用

这篇文章主要介绍“小程序的video控件如何使用”，在日常操作中，相信很多人在小程序的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。||

　　|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起支持)

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

到此，关于“小程序的video控件如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！