文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序的video控件如何使用

2023-06-26 08:15

关注

这篇文章主要介绍“小程序的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控件如何使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯