h5微信浏览器里退出视频全屏模式

本文提供了一种在微信端项目中实现视频播放全屏退出的有效方法。通过使用JavaScript监听视频结束事件并调用webkitExitFullScreen()方法,可以确保视频全屏播放后能够顺利退出全屏状态。

手里有个项目,微信端,有需要视频播放。

退出全屏视频:

var myVideo = document.getElementById('video');
myVideo.addEventListener('ended', function () {
    this.webkitExitFullScreen();
});

亲测有效,完美解决。

### 微信小程序 `video` 组件全屏适配解决方案 #### 设置视图容器尺寸 对于微信小程序中的 `<video>` 组件,直接设置其父级 `view` 容器的宽度和高度可能不会对其产生预期效果。为了使视频能够正确响应这些样式属性,应当直接针对 `<video>` 标签应用 CSS 类来定义宽高: ```css /* 在 .wxss 文件中 */ .video-class { width: 100%; height: 100%; } ``` 并将其应用于页面上的 `<video>` 元素[^2]。 #### 处理安卓设备上可能出现的黑边问题 当在安卓手机浏览器内嵌模式下播放视频时可能会遇到显示区域周围存在黑色边缘的情况。为了避免这种情况发生,可以在 `<video>` 标签内部指定特定属性以确保视频内容完全铺满整个屏幕而不留空白边界: ```html <video class="video-class" id="myVideo" controls x5-video-player-type="h5" object-fit="fill"></video> ``` 这的关键在于设置了 `object-fit="fill"` 属性,这会强制视频拉伸至填充满整个可见区而忽略原始比例关系;同时配合 `x5-video-player-type="h5"` 参数可以改善某些 Android 浏览器下的兼容性表现[^3]。 #### 实现全屏功能 为了让用户能够在观看过程中方便地切换到全屏模式,除了上述调整外还需要考虑如何优化用户体验。通常做法是在界面上提供一个明显的按钮让用户点击进入或退出全屏状态,并监听相应事件来进行处理。此外还可以利用 WeChat Mini Program 提供的相关 API 来增强控制力。 下面是一个简单的例子展示怎样创建这样一个按钮并与之关联操作逻辑: ```javascript // 在对应的 JS 文件中 Page({ data: { isFullScreen: false, }, toggleFullscreen() { const context = wx.createSelectorQuery().select('#myVideo'); if (!this.data.isFullScreen) { context.requestFullScreen({ direction: 90 }); } else { context.exitFullScreen(); } this.setData({ isFullScreen: !this.data.isFullScreen, }); }, }); ``` 此代码片段展示了如何通过 JavaScript 控制视频元素进出全屏模式的方法。注意这的 `direction: 90` 表示横向旋转后的方向,可以根据实际需求修改为其他角度值[^1]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值