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

最新推荐文章于 2024-08-01 21:09:24 发布

yf_d

最新推荐文章于 2024-08-01 21:09:24 发布

阅读量7.5k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/u010913414/article/details/81985502

版权

本文是关于微信小程序中如何设置全屏视频作为背景的笔记，重点介绍了遇到的2M素材上传限制、video组件的z-index问题、视频格式要求（需支持AVC/H264）、视频控制及全屏显示的方法。通过使用cover-view解决z-index问题，利用objectFit='fill'属性实现视频填充，并指出controls属性需使用{{false}}来隐藏控制器。此外，还提及了如何通过CSS设置全屏背景，以及app.json中去除顶部标题栏的配置。笔记内容尚不完整。

摘要由CSDN通过智能技术生成

想用一个全屏的视频当做小程序背景，然后呢，更坑爹啊，上传单个素材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="{