微信video全屏问题

做微信扫码打开链接播放视频的同志们注意了,使用video播放会全屏,这是一个很另人苦恼的事,,心理对张小龙xxx,但又有什么用呢,下面来介绍下解决方案

方案一加私有属性

<video
  id="videoALL" 
  src="video/01.mp4" 
  poster="images/1.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放,也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置,设置为 true 是防止横屏*/
  x5-video-orientation="portraint" /*播放器支付的方向,landscape横屏,portraint竖屏,默认值为竖屏*/
  style="object-fit:fill">
</video>

可以试一下。。。

接下来要思考了,为什么腾讯视频不会全屏呢,只能说明自家人使用要那么多限制干嘛,但细心的同学会发现,如要我们要把视频上传到腾讯视频然后复制链接不就行了吗,嗯,不错,可以一试。。

所以方案二就是上传到腾讯视频后再用

至于方案三,相信很少有人能发现,那就是视频格式问题,这个视频格式一定要是立体声的
图片描述

所以做之前最好要对照一下。。。如果不对要使用视频格式转换器了。。

### 微信小程序 `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]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值