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

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值