wxml页面里 我直接写controls=’true‘效果没显示对 所以写在了js里
<video
id="myVideo"
src="{{videoUrl}}"
loop='true'
controls='{{controls}}'
show-fullscreen-btn='{{controls}}'
autoplay="true"
object-fit='cover'
bindtap='videoTap'
>
</video>
js
Page({
data:{
controls:false
}
})
controls 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)
autoplay自动播放
loop 是否循环播放
src 播放地址
show-fullscreen-btn 是否显示全屏
object-fit 当视频大小与 video 容器大小不一致时,视频的表现形式
video全屏的样式
#myVideo{
position: absolute;
width: 100%;
height: 100%;
background: #cdcdcd;
overflow: hidden;
flex-direction:column;
align-items:center;/*垂直居中*/
justify-content: center;/*水平居中*/
z-index: 1;
}
微信小程序文档 https://developers.weixin.qq.com/miniprogram/dev/component/video.html
上面很多功能都有说明。