uni-app踩坑三--视频全屏后，退出全屏

最新推荐文章于 2024-06-20 17:46:27 发布
最新推荐文章于 2024-06-20 17:46:27 发布
阅读量4.7k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34530330/article/details/105809846
版权

直接上代码

<video class="content" id="myVideo" ref="myVideo"></video> 

const ctx = this.$refs.myVideo

ctx.exitFullScreen()

不要问我为啥这么点代码，还写上来，因为一开始没有好好看文档，给自己个惩罚

 

demi_meng
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
uni-app-video(支持后台播放音频)
02-24
uni-app-video(支持后台播放音频) demo实现思路： 正常唤起video组件播放，支持倍速等操作，全屏时提供开启后台播放音频； page hide时，后台播放audio标签，倍速恢复1.0正常播放；
uni-app-video(支持后台播放音频的视频播放器).zip
10-16
【uni-app-video】是一款专为uni-app框架设计的视频播放组件，它支持在后台持续播放音频，这在开发音乐播放应用或有音频背景需求的项目中尤其重要。uni-app作为一个多端开发框架，允许开发者使用一套代码实现跨平台...
uni-app中隐藏进度条后，进入全屏和退出全屏的方法
Stitch_xiao的博客
01-14 3692
项目中需要这样一个功能，需要隐藏video原生的进度条，并且还能进入全屏，进入全屏后还能退出全屏。由于原生的video组件在隐藏进度条后就没有进入全屏和退出全屏按钮，此时我们必须要用js去控制进入和退出全屏。 html: <video id="myVideo" v-if="liveDetails.attachmentUrl" class="myVideo" :src="getImageUrl + liveDetails.attachmentUrl" :autoplay="false"
uni-app小程序video不能自动全屏问题
nelly521的博客
09-22 1615
重点：导致安卓全屏不了的问题就在于css样式问题。废话不多说直接上干货。
uniapp ios viedo 全屏样式错乱问题
最新发布
weixin_44097668的博客
06-20 351
2.为video组件添加fullscreenchange监听事件，我们还可以为video组件添加fullscreenchange监听事件。当视频退出全屏播放时，通过监听事件手动设置屏幕方向为竖屏。1.在manifest.json文件中加入以下代码。3.切记需要重新打基座，必须！
uniapp 中 H5端 使用 video 使其全屏横屏播放
leaf的博客
09-13 1万+
起因： H5端 uniapp 提供的 video 组件，在点击其全屏按钮后，进入全屏状态，视频显示部分仍然为竖屏显示，无法转换成横屏，查阅了大量的资料。 官方人员说 H5端不支持 了解详情 但是客户提出来了就要想办法解决 解决方案： 自定义 video 组件，不使用官方组件 使用 css 进行样式修改强制 横屏 就有了第一版 获取video标签，对齐进行css样式修改… 简单粗暴 需要把video原生带的全屏隐藏掉(有这个属性show-fullscreen-btn改成false就可以了)，自己再写一个
uni-app开发遇到的问题
weixin_39500710的博客
11-30 426
uni-app开发遇到的问题 H5+下载文件转移下载失败问题解决；（moveTo方法有时会下载失败，可改为copyTo方法） cavans生成图片时，图片涉及到跨域，解决方案：将图片转为base64； 问题：canvas.canvasToTempFilePath导出图片会卡、慢 解决：导出时，添加上destWidth和destHeight属性 上传图片出现问题：h5中上传成功但app上传失败问题（原因：app中上传链接必须是完整链接需要加上前面的域名） app视频controls=false后无法退出全屏
PC端页面全屏展示
CH-EN.的博客
10-20 1119
功能描述： 实现点击一个按钮，全屏展示，再点击退出全屏； html <div class="userImg userImg1"> <span v-if="!isFullScreen" class="fullScreenBtn" @click="handleFullScreen" > <svg-icon icon-class="full-screen-line">
uni-app 自定义组件展示html富文本内容，可实现富文本html内容中 图片展示、视频播放、音频播放。
06-10
2. 视频播放：对于视频，可以使用uni-app的组件来播放。自定义组件需要解析JSON中的视频源URL和其他属性，如controls、autoplay等，并结合组件的API实现播放、暂停、全屏等控制。 3. 音频播放：类似视频，音频播放...
基于uni-app的仿抖音小程序完整源码
01-10
5. **视频播放功能**：项目中实现了抖音式的视频播放功能，这可能涉及到视频流加载、播放控制、全屏切换等功能，开发者可以通过源码学习如何在小程序中实现流畅的视频播放体验。 6. **视频评论和点赞**：这部分源码...
全网豆瓣影视剧高分榜小程序源码uni-app-video-master.zip
07-30
5. **视频播放组件**：在"video-master"分支中，可能有专门优化过的视频播放组件，用于支持流畅的视频预览和播放，可能涉及到的API包括uni.createVideoContext，视频的加载、暂停、播放、全屏等控制。 6. **UI设计...
uniapp微信小程序 ios上 video组件全屏播放结束后，无法返回？
小蜗牛的博客
06-21 1687
官网是没找看解决办法，我想到两种思路 1，全屏按钮直接隐藏掉，干脆利落 <video :show-fullscreen-btn="false"></video> 2，全屏之后，播放结束，退出全屏不就可以拉 <video id="myVideo" @ended="endedFun()"> </video> onReady() { this.videoplay = uni.createVideoContext('myVideo') }, methods:{
uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放
qq_24518001的博客
04-08 2187
【代码】uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放。
js全屏事件fullscreenchange，进入全屏，退出全屏操作
热门推荐
@必意玲
06-26 1万+
1.进入全屏 function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen() } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen() } else ...
uniapp中video视频手动控制播放和暂停
qq_40591925的博客
03-16 1万+
html: <video id="myVideo" :src="liveBackplay_url"></video> js: this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video 使用： this.videoContext.play(); 播放 this.videoContext.pause(); 暂停
uni-app中swiper组件加入视频后无法全屏显示方案解决
li22356的博客
07-21 2796
今天，在写uni-app的代码过程中，发现swiper组件里面的视频不能占全屏，出不来效果，虽然官网也说 自动设置了100%是没错，但是，再次设置宽高100%，不起作用，同时还会导致swiper组件不显示。这问题真是让人搞到头皮发麻。 问题如下： 解决方案： 代码如下： <template> <view class="videoList"> <view class="swiper-box"> <swiper class="swiper"
uniapp的苹果全屏播放再退出会导致页面字体变大解决方法
l_z__的博客
06-25 635
添加样式 .text{ -webkit-text-size-adjust: none; } 意思就是 禁用Webkit内核浏览器的文字大小调整功能。 1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;} 2、-webkit-text-size-adjust放在body上会导致页面缩放失效 3、body会继承定义在html的样式 4、用-webkit-text-size-ad
uniapp 横屏之后自定义的tab导航栏样式错乱，字体变大
wangongchao的博客
12-28 1003
意思就是 禁用Webkit内核浏览器的文字大小调整功能。 1、当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px，这时可以用 html{-webkit-text-size-adjust:none;} 2、-webkit-text-size-adjust放在body上会导致页面缩放失效 3、body会继承定义在html的样式 4、用-webkit-text-size-adjust不要定义成可继承的或全局的 添加样式 .text{ -webkit-text-size
uni-app设置template全屏
06-11
要设置uni-app中的template全屏，可以通过以下步骤实现： 1. 在template标签中，添加一个样式类名：full-screen。 2. 在页面的样式文件中，添加以下代码： ``` .full-screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; } ``` 3. 在template中使用该样式类名： ``` <template> <div class="full-screen"> <!-- 此处为模板内容 --> </div> </template> ``` 通过以上步骤，就可以实现uni-app中的template全屏了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值