微信小程序> 微信小程序视频视频背景与控制处理(笔记)

微信小程序视频视频背景与控制处理(笔记)

浏览量:4194 时间: 来源:iwh_冬

想用一个全屏的视频当做小程序背景,然后呢,更坑爹啊,上传单个素材2M限制。

注意:

1:用video组件时候,原生组件z-index无论如何都不会比他更高的,要用新的cover-view

2:视频格式MP4支持AVC(H264)把你的视频拖到chrome试试,就知道了。

不然你会看到: The element has no supported sources.

3:视频控制,实现全屏,用css就好了,如果视频和组件有填充,video中有个属性objectFit='fill'填充。

这里有一个坑点:控制器按照文档上的controls=‘false’,是无效的,用controls="{{flase}}"

<view class='bg_box'>    <video binderror="videoErrorCallback" id="myVideo" src="https://xxx.mp4" objectFit='fill' autoplay='true' loop='true' enable-progress-gesture="{{false}}"  show-play-btn="{{false}}" show-fullscreen-btn="{{false}}" controls="{{false}}">    </video></view>

贴上全屏背景CSS

.bg_box{    width: 100%;    position: fixed;    top: 0;    left: 0;    bottom: 0;}.bg_box video{    width: 100%;   height: 100%;}

继续去除上部标题栏在app.json里面,但是右侧按钮官方不允许去除。

"navigationStyle": "custom"

未完待续...

微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎