微信小程序video poster属性撑满

### 微信小程序 `video` 组件使用教程 #### 1. 基本属性配置 在微信小程序中，`<video>` 是一个非常常用的多媒体组件。它支持多种属性来控制视频的播放行为、样式以及交互方式。 以下是 `<video>` 的基本结构和常用属性： ```html <view> <video id="myVideo" src="{{videoSrc}}" controls="{{true}}" autoplay="{{false}}" loop="{{false}}" muted="{{false}}" poster="{{posterImage}}" objectFit="contain"> </video> </view> ``` - **id**: 设置视频组件的唯一标识符[^2]。 - **src**: 视频资源地址，可以是本地路径或者网络 URL。 - **controls**: 是否显示默认控件（如播放/暂停按钮），布尔值，默认为 true。 - **autoplay**: 页面加载完成后是否自动播放视频，布尔值，默认为 false。 - **loop**: 视频结束后是否会重新播放，布尔值，默认为 false。 - **muted**: 是否静音播放，布尔值，默认为 false。 - **poster**: 当视频未开始播放时展示的封面图片地址。 - **objectFit**: 定义视频如何适应其容器框，可选值有 `"fill"` (拉伸填充), `"contain"` (保持宽高比例并缩放至完全可见)，`"cover"` (覆盖整个容器)。 #### 2. 解决全屏亮度问题 当使用 uni-app 开发的小程序，在 Android 设备上可能会遇到如下情况：如果用户通过手势调整了视频全屏模式下的屏幕亮度，并随后退出应用再返回，则会发现全局页面亮度被锁定到了之前设置的最低水平。这种现象可以通过监听特定事件来进行修复。 解决方案包括但不限于以下几种方法之一: - 方法一: 调整 API 来重置设备屏幕亮度。可以在 App 生命周期函数里加入逻辑处理代码片段以恢复初始状态[^1]: ```javascript // app.js 中定义 globalData 存储原始亮度值 App({ onLaunch() { this.globalData = { originalBrightness: null }; const systemInfo = wx.getSystemInfoSync(); if (systemInfo.platform === 'android') { try { let brightnessLevel = wx.getBrightness({ success(res) => res.brightness }); this.globalData.originalBrightness = brightnessLevel; // 添加卸载前回调操作 wx.onBackground(() => { setTimeout(() => { wx.setBrightness({ brightness: this.globalData.originalBrightness || 1 }); }, 0); }); } catch(e){ console.error('获取或设置亮度失败', e.message); } } }, }); ``` 上述脚本利用了 WeChat Mini Program Framework 提供的一些底层接口实现功能需求。 #### 3. 封装自定义 Video 组件 为了提高代码复用性和维护便利性，开发者通常会选择将复杂的功能模块封装成独立组件形式调用。下面给出一个简单的例子说明如何创建自己的 video player 控制器[^3]: ```html <!-- components/custom-video/custom-video.wxml --> <view class='custom-player'> <button bindtap='togglePlay'>{{isPlaying ? 'Pause' : 'Play'}} </button> <slider min='0' max='100' value='{{currentTime}}' step='1'/> <!-- 实际嵌入的 media element --> <video hidden="{{!showPlayer}}" id="playerElement" src="{{sourceUrl}}"> </video> </view> ``` 配合对应的 JS 文件完成业务流程管理即可满足大多数场景下对于个性化定制的要求. --- ###

微信小程序的video组件用于在小程序中播放视频，具有以下特点： 1. 支持多种格式：MP4、M3U8、FLV等。 2. 可以设置视频的封面图、控制栏等样式。 3. 可以设置自动播放、循环播放等属性。 4. 支持全屏播放和小窗口播放。 5. 支持播放器事件的监听，例如播放、暂停、结束等。 下面是一个简单的video组件的使用示例： ``` <video src="{{src}}" poster="{{poster}}" controls></video> ``` 其中，src是视频的地址，poster是视频的封面图，controls表示显示控制栏。你可以根据自己的需要设置其他属性。