uni.createVideoContext 全屏
时间: 2025-03-20 14:08:58 浏览: 28
### 使用 `uni.createVideoContext` 实现视频全屏播放
在小程序开发中,`uni.createVideoContext` 是用于操作 `<video>` 组件的一个重要 API。通过该方法可以获取到视频上下文对象,并调用其内置的方法来控制视频的行为,比如播放、暂停以及进入全屏模式。
以下是实现视频全屏播放的具体方式:
#### 获取视频上下文并设置全屏
可以通过 `uni.createVideoContext(id)` 方法创建一个视频上下文实例,其中 `id` 参数对应的是 `<video>` 组件的唯一标识符(即组件上的 `id` 属性)。接着,调用上下文对象的 `.requestFullScreen()` 或者 `.enterPictureInPicture()` 方法即可让视频切换至全屏状态[^3]。
下面是一个完整的代码示例:
```javascript
// 假设 video 组件的 id 为 myVideo
const videoContext = uni.createVideoContext('myVideo');
function toggleFullscreen() {
// 判断当前是否处于全屏状态
const isFullScreen = videoContext.fullScreen;
if (isFullScreen) {
// 如果已经是全屏,则退出全屏
videoContext.exitFullScreen();
} else {
// 否则请求进入全屏
videoContext.requestFullScreen({
direction: 90 // 设置屏幕方向,可选值有 0 和 90,默认为 0 表示竖屏
});
}
}
```
需要注意的是,在某些平台上可能还需要额外配置权限或者调整参数才能正常启用全屏功能。例如 Android 平台下需确保应用具有相应的显示权限[^4]。
另外,如果希望自定义全屏按钮行为的话,可以在界面上添加一个触发器绑定上述函数逻辑:
```html
<view class="control-btn" bindtap="toggleFullscreen">全屏</view>
<video id="myVideo" src="example.mp4"></video>
```
以上就是利用 `uni.createVideoContext` 来达成视频全屏效果的主要过程。
---
阅读全文
相关推荐


















