React 前端导航

微信小程序视频全屏播放object-fit属性

最近作者开发了一个微信小程序,小程序开头要求视频全屏播放,能够竖屏占据手机屏幕全屏,在这过程中遇到了一些问题,并顺利解决,特此记录如下。

在最开始的时候代码是如下的:

<template>  <view class="rabbitBox">    <view class="end-play" @click="endPlay">跳过</view>    <!-- 视频信息 -->    <video       :src="videoSrc"       object-fit="fill"      id="mainPageVideo"       class="full-page-video-horizontal"      autoplay="true"       :controls="false"       :show-fullscreen-btn="false"       :show-center-play-btn="false"      :show-loading="false"       :enable-progress-gesture="false"       :vslide-gesture-in-fullscreen="false"      @ended="videoEnd"       @error="videoEnd">    </video>  </view></template>

此时界面出来的效果如图所示:

在图中可以看到界面两边无法填充。经过修改的代码如下:

  <!-- 视频信息 -->    <video       :src="videoSrc"       id="mainPageVideo"       class="full-page-video-horizontal"      autoplay="true"       :controls="false"       :show-fullscreen-btn="false"       :show-center-play-btn="false"      :show-loading="false"       :enable-progress-gesture="false"       :vslide-gesture-in-fullscreen="false"      @ended="videoEnd"       @error="videoEnd">    </video>

代码中的video标签主要增加了如下代码:

object-fit="fill"

此时出来的效果如图:

可以看到两边的黑边消失了。

查阅微信小程序开发文档发下有如下说明:

该属性的含义如下:

当视频大小与 video 容器大小不一致时,视频的表现形式:

加上该属性则可以使视频填充屏幕。

 

声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。邮箱:farmerlzj@163.com。 本站原创内容未经允许不得转载,或转载时需注明出处: 内容转载自: React前端网:https://qianduan.shop/blogs/detail/236

#移动端#微信小程序#object-fit

相关推荐

钉钉小程序实现水印

与PC端实现水印的思路基本一致,都是借助 canvas 生成水印图片作为背景图,全凭覆盖页面即可。

苹果手机中钉钉小程序点击input以外的元素时,input未失去焦点同时键盘也未关闭

苹果手机中钉钉小程序点击input以外的元素时,input未失去焦点同时键盘也未关闭问题解决记录