成都星联信息技术有限公司-互联网营销服务商
全国热线:19113191207 成都:028-85556952
小程序视频播放不了?如何在小程序中播放视频

作者:    浏览次数:    发布时间:2020-08-26 17:22:41

  在如何使用小程序媒体组件这篇文章中,我们简单介绍了video视频组件的使用,这篇文章中,将对视频播放做一些补充,同时介绍API的使用。

  在教程开始之前,需要搭建搭建好小程序的基础开发环境,关于如何配置,大家可以参考如何入门小程序开发这篇文章的入门教程。视频组件的使用

  我们可以直接在前端调用video组件进行视频播放,打开你的index.wxml文件,写下如下代码。

  有前端开发经验的小伙伴应该能看懂吧,src是我们视频的地址。通过这段简单的代码,我们就可以实现在小程序中播放视频。

小程序视频播放不了?如何在小程序中播放视频(图1)

  但是,有没有其他功能呢?我们可以看看官方文档中的内容。

  属性名

  类型

  默认值

  说明

  src

  String

  要播放视频的资源地址,支持云文件ID(2.2.3起)

  initial-time

  Number

  指定视频初始播放位置

  duration

  Number

  指定视频时长

  controls

  Boolean

  true

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

  danmu-list

  Object Array

  弹幕列表

  danmu-btn

  Boolean

  false

  是否显示弹幕按钮,只在初始化时有效,不能动态变更

  enable-danmu

  Boolean

  false

  是否展示弹幕,只在初始化时有效,不能动态变更

  autoplay

  Boolean

  false

  是否自动播放

  loop

  Boolean

  false

  是否循环播放

  muted

  Boolean

  false

  是否静音播放

  page-gesture

  Boolean

  false

  在非全屏模式下,是否开启亮度与音量调节手势

  direction

  Number

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

  show-progress

  Boolean

  true

  若不设置,宽度大于240时才会显示

  show-fullscreen-btn

  Boolean

  true

  是否显示全屏按钮

  show-play-btn

  Boolean

  true

  是否显示视频底部控制栏的播放按钮

  show-center-play-btn

  Boolean

  true

  是否显示视频中间的播放按钮

  enable-progress-gesture

  Boolean

  true

  是否开启控制进度的手势

  objectFit

  String

  contain

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

  poster

  String

  视频封面的图片网络资源地址或云文件ID(2.2.3起支持)如果 controls 属性值为 false 则设置 poster 无效

  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

  bindwaiting

  EventHandle

  视频出现缓冲时触发

  binderror

  EventHandle

  视频播放出错时触发

  bindprogress

  EventHandle

  加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比

  通过上表,我们可以实现一些功能,比如我想实现视频播放静音,并显示封面,打开手势控制及手势音量亮度控制,循环播放,播放时从60秒开始,并且静音播放,参考上表则可以使用下面的代码。

二维码
意见反馈
'); })();