uni-app小程序video不能自动全屏问题

这篇具有很好参考价值的文章主要介绍了uni-app小程序video不能自动全屏问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在这里记录下这个大坑:
废话不多说直接上干货
重点:导致安卓全屏不了的问题就在于css样式问题文章来源地址https://www.toymoban.com/news/detail-515693.html

<template>
	<view>
		<view class="preview-full" v-if="videoUrl!=''">
	   		<video id="myVideo" :src="videoUrl" :show-fullscreen-btn="false" :autoplay="true"></video>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			videoUrl: 'xxxxx'
		};
	},
    onReady(){
        this.videoContext = uni.createVideoContext('myVideo',this);
        this.videoContext.requestFullScreen({direction:90});
    },
	methods: {
		fullscreenchange (e){
			if(!e.detail.fullScreen){
				this.videoContext.stop()
			}
		}
	}
};
</script>
<style scoped>
.preview-full {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1002;
}
.preview-full video {
	width: 100%;
	height: 100%;
	z-index: 1002;
}
</style>

到了这里,关于uni-app小程序video不能自动全屏问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uni-app nvue页面中使用video视频播放组件

    我遇到的问题是,在nvue页面引用video组件,然后啥也没显示的,显示了无法控制播放,折腾了好久,在这里记录下来!希望可以帮助到需要的人 我的代码是这样的(src换成官方的举例)  问题1:视频页面一片空白,后来去查官方文档是这样说的 我以为按照官方提示勾选 ma

    2024年02月03日
    浏览(45)
  • uni-app 开发微信小程序 自动化编译/启动项目

          最近开发一个uni-app的小程序项目,因为习惯使用vscode 而项目不得不借助hbuderx 运行,微信开发工具调试,偶尔还需要使用 ios模拟器, 8g内存的mac 就变的异常卡顿,所以就研究了下通过npm命令去编译、 运行等工程化配置, 这样就不用运行hbuderx 减少内存使用,顺便 

    2024年02月07日
    浏览(57)
  • 解决uni-app小程序原生tabbar 添加阴影问题

    下面是实现的效果  步骤1 创建一个组件  文件名和组件名要一致  步骤2  在组件中实现阴影效果 步骤3 在tabbar 页面使用  直接使用 即可 不用引入  

    2024年02月07日
    浏览(64)
  • uni-app 微信小程序CI机器人自动化部署方案

    1. 微信公众平台上,在开发设置里面小程序代码,将上传代码的服务IP地址填充下,生成一个上传秘钥下载下来 2. 将下载的秘钥文件放在uni-cli 项目的根目录下 3. npm 微信官方的miniprogram-ci模块 4. 把上面的代码写到一个js 文件放在项目根目录下 5. 在package.json里面写好打包和启

    2024年02月15日
    浏览(58)
  • uni-app 轮播图视频+图片 视频图片全屏预览 两种方法

    在做商城项目的时候,商品详情的轮播图需要同时显示视频和图片,并且能够全局预览 如果项目里有uview这个组件库,可以通过swiper轮播图的指定类型进行解决,点击这里进行跳转 也可以通过uni-app自带的swiper去解决这个问题,点击这里进行跳转 就目前的两种方案,第二种方

    2024年02月12日
    浏览(110)
  • uni-app运行微信小程序时文件查找失败的问题

    此类问题主要是文件的路径不正确导致的。 造成这种问题的一个比较坑的原因,就是HBuilderX在新建目录的时候会在pages.json中添加路径,如果你修改了路径,pages.json并不会自动更改这个路径,导致无法找到新的路径地址。所以解决这个问题也非常简单,就是在pages.json文件里,

    2024年02月11日
    浏览(50)
  • [uni-app] 微信小程序 - 组件找不到/导入报错 (分包问题导致)

    切换了个路径下的组件, 导入失败, 尝试了清缓存重启删项目等一些列操作均无效 上面两个路径中, 都存在一模一样的 videItem.vue Main 路径是可以导入的 Main 路径是无法导入的 后来发现, 是 分包 的问题导致. 我们先来假设一个场景,如果小程序进行了分包操作, 其中有个公共组

    2024年02月16日
    浏览(55)
  • uni-app的h5/小程序/app 网络请求,解决本地环境和生产环境网络请求问题

    本篇的重点在于解决h5/小程序/app这三端在本地和生产环境的网络请求问题 全部代码贴在了全文最后 首先要理解这三个端的特性,h5会有跨域问题需要反向代理,小程序和app不需要反向代理,同时小程序还得用https域名。 一般会跨域需要反向代理。所以要在mainifest.json设置反向

    2024年02月10日
    浏览(56)
  • uni-app开发微信小程序,H5 关于压缩上传图片的问题

    文章目录 前言 一、为什么要压缩图片 二、图片压缩方式 1. 微信小程序​​​​​​​ 2. H5 总结 关于微信小程序、H5兼容性问题,今天就压缩以及上传图片做一个可实现方法的简要阐述。 在使用uni-app开发小程序及H5的具体业务中,我们会遇到需要让用户上传本地图片的场景

    2024年02月02日
    浏览(70)
  • uni-app开发微信小程序经常遇到的一些问题及解决方案

       可以使用uni.getUserInfo接口获取用户信息。需要用户授权。   可以使用uni-app提供的页面组件内置下拉刷新功能,也可以自定义下拉刷新组件。   可以在页面onReachBottom方法中监听上拉事件,当触发上拉事件时,触发加载更多数据的操作。     可以使用uni.uploadFile接口实现图

    2024年02月14日
    浏览(62)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包