微信小程序 video 视频组件

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

视频（v2.4.0 起支持同层渲染）。相关api：wx.createVideoContext

属性	类型	默认值	必填	说明	最低版本
src	string		是	要播放视频的资源地址，支持网络路径、本地临时路径、云文件ID（2.3.0）	1.0.0
duration	number		否	指定视频时长	1.1.0
controls	boolean	true	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）	1.0.0
danmu-list	Array.		否	弹幕列表	1.0.0
danmu-btn	boolean	false	否	是否显示弹幕按钮，只在初始化时有效，不能动态变更	1.0.0
enable-danmu	boolean	false	否	是否展示弹幕，只在初始化时有效，不能动态变更	1.0.0
autoplay	boolean	false	否	是否自动播放	1.0.0
loop	boolean	false	否	是否循环播放	1.4.0
muted	boolean	false	否	是否静音播放	1.4.0
initial-time	number	0	否	指定视频初始播放位置	1.6.0
page-gesture	boolean	false	否	在非全屏模式下，是否开启亮度与音量调节手势（废弃，见 vslide-gesture）	1.6.0
direction	number		否	设置全屏时视频的方向，不指定则根据宽高比自动判断	1.7.0
show-progress	boolean	true	否	若不设置，宽度大于240时才会显示	1.9.0
show-fullscreen-btn	boolean	true	否	是否显示全屏按钮	1.9.0
show-play-btn	boolean	true	否	是否显示视频底部控制栏的播放按钮	1.9.0
show-center-play-btn	boolean	true	否	是否显示视频中间的播放按钮	1.9.0
enable-progress-gesture	boolean	true	否	是否开启控制进度的手势	1.9.0
object-fit	string	contain	否	当视频大小与 video 容器大小不一致时，视频的表现形式	1.0.0
poster	string		否	视频封面的图片网络资源地址或云文件ID（2.3.0）。若 controls 属性值为 false 则设置 poster 无效	1.0.0
show-mute-btn	boolean	false	否	是否显示静音按钮	2.4.0
title	string		否	视频的标题，全屏时在顶部展示	2.4.0
play-btn-position	string	bottom	否	播放按钮的位置	2.4.0
enable-play-gesture	boolean	false	否	是否开启播放手势，即双击切换播放/暂停	2.4.0
auto-pause-if-navigate	boolean	true	否	当跳转到本小程序的其他页面时，是否自动暂停本页面的视频播放	2.5.0
auto-pause-if-open-native	boolean	true	否	当跳转到其它微信原生页面时，是否自动暂停本页面的视频	2.5.0
vslide-gesture	boolean	false	否	在非全屏模式下，是否开启亮度与音量调节手势（同 page-gesture）	2.6.2
vslide-gesture-in-fullscreen	boolean	true	否	在全屏模式下，是否开启亮度与音量调节手势	2.6.2
ad-unit-id	string		是	视频前贴广告单元ID，更多详情可参考开放能力视频前贴广告	2.8.1
poster-for-crawler	string		是	用于给搜索等场景作为视频封面展示，建议使用无播放 icon 的视频封面图，只支持网络地址
show-casting-button	boolean	false	否	显示投屏按钮。安卓在同层渲染下生效，支持 DLNA 协议；iOS 支持 AirPlay 和 DLNA 协议	2.10.2
picture-in-picture-mode	string/Array		否	设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： [“push”, “pop”]）	2.11.0
picture-in-picture-show-progress	boolean	false	否	是否在小窗模式下显示播放进度	2.11.0
enable-auto-rotation	boolean	false	否	是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效	2.11.0
show-screen-lock-button	boolean	false	否	是否显示锁屏按钮，仅在全屏时显示，锁屏后控制栏的操作	2.11.0
show-snapshot-button	boolean	false	否	是否显示截屏按钮，仅在全屏时显示	2.13.0
show-background-playback-button	boolean	false	否	是否展示后台音频播放按钮	2.14.3
background-poster	string		否	进入后台音频播放后的通知栏图标（Android 独有）	2.14.3
bindplay	eventhandle		否	当开始/继续播放时触发play事件	1.0.0
bindpause	eventhandle		否	当暂停播放时触发 pause 事件	1.0.0
bindended	eventhandle		否	当播放到末尾时触发 ended 事件	1.0.0
bindtimeupdate	eventhandle		否	播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次	1.0.0
bindfullscreenchange	eventhandle		否	视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal	1.4.0
bindwaiting	eventhandle		否	视频出现缓冲时触发	1.7.0
binderror	eventhandle		否	视频播放出错时触发	1.7.0
bindprogress	eventhandle		否	加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比	2.4.0
bindloadedmetadata	eventhandle		否	视频元数据加载完成时触发。event.detail = {width, height, duration}	2.7.0
bindcontrolstoggle	eventhandle		否	切换 controls 显示隐藏时触发。event.detail = {show}	2.9.5
bindenterpictureinpicture	eventhandler		否	播放器进入小窗	2.11.0
bindleavepictureinpicture	eventhandler		否	播放器退出小窗	2.11.0
bindseekcomplete	eventhandler		否	seek 完成时触发 (position iOS 单位 s, Android 单位 ms)	2.12.0

direction 的合法值

值	说明	最低版本
0	正常竖向
90	屏幕逆时针90度
-90	屏幕顺时针90度

object-fit 的合法值

值	说明	最低版本
contain	包含
fill	填充
cover	覆盖

play-btn-position 的合法值

值	说明	最低版本
bottom	controls bar上
center	视频中间

picture-in-picture-mode 的合法值

值	说明	最低版本
[]	取消小窗
push	路由 push 时触发小窗
pop	路由 pop 时触发小窗

Bug & Tip

tip：`video 默认宽度 300px、高度 225px，可通过 wxss 设置宽高。
tip：从 2.4.0 起 video 支持同层渲染，更多请参考原生组件使用限制

支持的格式

格式	iOS	Android
mp4	√	√
mov	√	x
m4v	√	x
3gp	√	√
avi	√	x
m3u8	√	√
webm	x	√

支持的编码格式

格式	iOS	Android
H.264	√	√
HEVC	√	√
MPEG-4	√	√
VP9	x	√

小窗特性说明

video 小窗支持以下三种触发模式（在组件上设置 picture-in-picture-mode 属性）：

push 模式，即从当前页跳转至下一页时出现小窗（页面栈push）
pop 模式，即离开当前页面时触发（页面栈pop）
以上两种路由行为均触发小窗

此外，小窗还支持以下特性：

小窗容器尺寸会根据原组件尺寸自动判断
点击小窗，用户会被导航回小窗对应的播放器页面
小窗出现后，用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗

当播放器进入小窗模式后，播放器所在页面处于 hide 状态(触发 onHide 生命周期)，该页面不会被销毁。当小窗被关闭时，播放器所在页面会被 unload (触发 onUnload 生命周期)。

示例代码

在开发者工具中预览效果

index.wxml

<view class="page-body"><view class="page-section tc"><video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video><view class="weui-cells"><view class="weui-cell weui-cell_input"><view class="weui-cell__hd"><view class="weui-label">弹幕内容</view></view><view class="weui-cell__bd"><input bindblur="bindInputBlur" class="weui-input" type="text" placeholder="在此处输入弹幕内容" /></view></view></view><view class="btn-area"><button bindtap="bindSendDanmu" class="page-body-button" type="primary" formType="submit">发送弹幕</button><button bindtap="bindPlay" class="page-body-button" type="primary">播放</button><button bindtap="bindPause" class="page-body-button" type="primary">暂停</button></view></view>
</view>

index.js

function getRandomColor () {const rgb = []for (let i = 0 ; i < 3; ++i){let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')
}Page({onReady: function (res) {this.videoContext = wx.createVideoContext('myVideo')},inputValue: '',data: {src: '',danmuList:[{text: '第 1s 出现的弹幕',color: '#ff0000',time: 1},{text: '第 3s 出现的弹幕',color: '#ff00ff',time: 3}]},bindInputBlur: function(e) {this.inputValue = e.detail.value},bindSendDanmu: function () {this.videoContext.sendDanmu({text: this.inputValue,color: getRandomColor()})},bindPlay: function() {this.videoContext.play()},bindPause: function() {this.videoContext.pause()},videoErrorCallback: function(e) {console.log('视频错误信息:')console.log(e.detail.errMsg)}
})

运行效果：

微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

微信小程序 video 视频组件相关推荐

微信小程序——video视频组件
video视频组件 video.wxml文件 <view><video src="{{src}}" binderror="videoErrorCallb ...
微信小程序 Video 视频太小怎么办
加上属性可以完美自适应 objectFit='cover' 欢迎交流微信小程序的各种疑难杂症 wx: jiaweri
微信小程序——video视频全屏展示
object-fit 当视频大小与 video 容器大小不一致时,视频的表现形式合法值说明 contain 包含 fill 填充 cover 覆盖 <video object-fit=&qu ...
微信小程序——video视频全屏播放
object-fit 属性 <video src="../demo.mp4" object-fit="cover"></video>
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
微信浏览器video标签没有封面_织梦百度小程序微信小程序video标签不支持视频封面，autoplay等问题修复方法...
在现有的百度小程序富文本组件bdParse,以及微信小程序富文本组件wxParse,对于video的标签解析仅仅只是有个video而已,其他的属性几乎都过滤掉了,所以就需要我们假设对于属性(由于H5的 ...
腾讯技术分享：微信小程序音视频技术背后的故事
1.引言微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
A095_day01_微信小程序入门与组件
目录微信小程序入门与组件 - Day01 1.内容介绍 2.微信小程序简介(了解) 2.1.什么是小程序 2.2.微信小程序与app的区别 2.3.小程序在入口 2.4.微信小程序的工作原理 2.5 ...

微信小程序 video 视频组件

微信小程序 video 视频组件相关推荐

最新文章

热门文章

微信小程序 video 视频 组件

微信小程序 video 视频 组件相关推荐

最新文章

热门文章

微信小程序 video 视频组件

微信小程序 video 视频组件相关推荐