小程序video隐藏控件

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
上面很多功能都有说明。

猜你喜欢

转载自blog.csdn.net/j244233138/article/details/90796313
今日推荐