【微信小程序/uniapp】视频如何在pad端可以横屏播放

这篇具有很好参考价值的文章主要介绍了【微信小程序/uniapp】视频如何在pad端可以横屏播放。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

相信做视频类小程序的伙伴们一定会遇到视频在【pad】系列上播放的问题,我们会发现,当在pad端点击全屏播放的时候,他是竖屏的全屏(如图1),即便我们旋转屏幕,他依旧是竖屏类型的全屏(如图2)

微信小程序ipad端怎么适配,uniapp,小程序,uni-app,微信小程序(图1)

微信小程序ipad端怎么适配,uniapp,小程序,uni-app,微信小程序(图2)

而我们想要的效果是全屏【横屏】播放

那么如何能实现这个需求呢?

我们需要使用到的是小程序app.json中的【pageOrientation】属性

微信小程序ipad端怎么适配,uniapp,小程序,uni-app,微信小程序

将这个属性设置为auto,他就会随着屏幕的翻转自动识别合适的长宽比,也就能够实现视频的横屏播放了

那么这里随之又会出现一个问题,就是其他页面的【横屏适配】问题,有的页面横屏显示会被放大拉伸,这种情况下,如果我们只需要【单页面】可以随着屏幕auto,那么我们只要需要改变单页面的json文件,设置为auto,这样就会只有我们设置的页面会随着屏幕的旋转改变。

【延伸】

这里顺便说一下uniapp中如何修改这个属于

--全局修改:

pages.json文件中

"globalStyle": {

		"pageOrientation": "auto"
	},

--单个页面修改:

pages.json文件

 {
      "path": "pages/viedoLook/viedoLook",//单独某个页面
      "style": {
		"pageOrientation":"auto"
      }
    },

【题外话】

这个问题着实让我审判了很久,突发奇想尝试了这种方法,没想到真的实现了,看社区讨论发现到现在还有人在提这个问题,不知道官方大大关于pad的视频适配是怎么考虑的,难道是觉得pad小程序用户比较少嘛

 文章来源地址https://www.toymoban.com/news/detail-636412.html

 

 

到了这里,关于【微信小程序/uniapp】视频如何在pad端可以横屏播放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 将流转化为视频并播放 微信小程序

    该问题最关键的一步是将后端传回来的流,转化成视频,并播放。 1、从服务器请求数据流到前端 2、新建一个临时文件,将数据流写入这个文件里面,并自定义路径+命名。 3、可以将该文件保存到相册(这一步也可以不保存) 4、直接用video播放这个临时文件路径即可。 直接

    2024年02月06日
    浏览(47)
  • uniapp小程序(原生微信小程序也可以使用),获取接口二进制流数据上传文件到服务器

    需求:通过接口返回的二进制流数据,这个流数据他是一个xlsx文档,需要给到用户一个文档线上连接。 下面是具体代码,注意只针对二进制的文件数据,如果图片上传直接调用uploadFile就可以,并且兼容原生微信小程序。  

    2024年02月16日
    浏览(52)
  • 【微信小程序】如何上传uniApp开发的微信小程序?

    微信开发者工具下载链接 Hbuilder X下载链接 扫码 选中账号 登录成功: ps: 如果之前没有权限但是已经登录此账号,需要在获取到权限后重新登录一次❗❗ ps: 不选中 运行时是否压缩代码 有可能代码包不包含插件大小过大,导致上传失败❗❗ 小程序性能优化指南 操作1 操作

    2024年02月09日
    浏览(217)
  • uniApp移动端-H5-微信小程序上传文件(图片,文档和视频等)

    封装了一个插件可直接使用: 插件地址:uniApp移动端-H5-小程序上传文件(图片,文档和视频等),插件可直接用Hbuilderx导入示例项目查看, 实现方法: H5内部是使用uni-app官方内部方法uni.chooseFile 小程序端因hybrid不能使用本地HTML,所以插件提供的是uni-app官方内部方法wx.cho

    2024年02月12日
    浏览(60)
  • uniapp微信小程序 页面跳转传参(uni.switchTab传参无法获取,uni.reLaunch传参可以获取)

      因为是tab页面,我首先想到的就是通过:uni.switchTab进行页面跳转。 代码如下: 然后在首页的onShow生命周期函数中进行监听路由参数。 代码如下: 结果uni.switchTab跳转的页面是不能够将路由参数传递到页面中的。  这样就可以拿到路由中的参数了。  这样问题就解决了。

    2024年02月10日
    浏览(63)
  • 微信小程序错误码:“errcode“:40163和微信小程序-pad block corrupted 问题

    场景:服务端调用 auth.code2Session 接口 请求连接:https://api.weixin.qq.com/sns/jscode2session?appid=secret=js_code=grant_type=authorization_code 服务端报错,报错信息:\\\"pad block corrupted \\\",打印返回值为: {“errcode”:40163,“errmsg”:“code been used, hints: [ req_id: 0IbF07aLRa-KW5Oua ]”} 40163 :临时登录凭证重

    2024年02月09日
    浏览(314)
  • uni微信小程序 map 添加padding

    规划驾车线路的时候,使用uni的 include-points 指定可视范围的时候,会很极限。导致marker不能完全显示。 给地图显示范围添加padding (推荐) 或者获取并修改缩放地图(记得设置中心点) uni文档:点击这里 1的效果图:

    2024年02月04日
    浏览(41)
  • uniapp微信小程序如何创建树形组件

    目录   1:前言 2:最终效果: 2.1一级菜单 2.2二级菜单 2.3三级菜单 3:实现方法 3.1:创建一级菜单  3.2创建二级三级菜单 4:完整代码如下 树形组件应用很广,应用于一些分层次的内容。vue有树形组件,但是uniapp没有树形组件,想要在uniapp使用树形组件,必须要自己写个树形

    2024年02月16日
    浏览(49)
  • uniapp开发的微信小程序如何上传至微信小程序平台-完整简单步骤

    这个id请登录微信小程序号   设置中查看 成功上传。 message:Error: 系统错误,错误码:80051,source size 3743KB exceed max limit 2MB  如果这样报错可以尝试分包或者减至2M以内。 分包方法参考此博文 uniapp如何分包 分包配置后无法读取static文件夹_谨言不言的博客-CSDN博客_uniapp 分包

    2024年02月16日
    浏览(122)
  • 【uniapp】微信小程序,取视频第一帧,前提是 图片是在 阿里云的oss上

    上传视频等,默认为黑色,无法用视频的第一帧作为封面,以及视频的video为原生组件,层级很高无法覆盖问题,虽然有cover-view,但很多场景还是不灵活 自己服务器是不支持的 ,可以用canvas截图 方法 ,将 图片组件image 替换成 视频video 组件 视频组件video 重点 将video组件更换

    2024年02月08日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包