uni-app video 多个视频循环播放 全屏自动播放 退出自动暂停功能

这段代码展示了如何在移动端使用uni-app进行视频播放和全屏切换的处理。当退出全屏时,视频会暂停并重置播放状态。点击视频可以播放,并在已播放状态下请求全屏。使用了uni.createVideoContext进行视频操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<view class="video_item">
	<video  v-for="(item,index) in video_url"
	 :key="index"     
	 :id="'myVideo'+index"
	 :src="item.name"
     @fullscreenchange="fullscreenchange"
	@play="saveplay(index)"
	class="classvideo"
	@click="videoPlay(index)"
	:show-fullscreen-btn='false'
	object-fit="contain"
	></video>
				   </view>
fullscreenchange (e){
			if(!e.detail.fullScreen){ //退出全屏
				console.log("感受到了3")
	            uni.createVideoContext(`myVideo${this.videoindex}`).stop() //暂停播放
			    this.videoPlays = false
			    this.videoindex = -1
			}
			
        },
		videoPlay(index){
		 if(this.videoPlays==false){
			  this.videoindex = index
              uni.createVideoContext(`myVideo${index}`).requestFullScreen()
			  uni.createVideoContext(`myVideo${index}`).play()
			  this.videoPlays = true
		 }

有几个没有的api 我没删 根据方法里面的哪些用到了 就用哪个就好 因为id是唯一的 所以id要循环出来

Uni-app中,要在App.vue中处理视频全屏自动横屏,你需要在`<app></app>`组件内监听视频全屏事件,并根据设备的orientation属性调整屏幕方向。首先,你需要确保在全局样式或某个合适的模块中开启自动横屏: ```html <template> <view class="app"> <uni-video :onfullscreen="handleFullscreen" ...>...</uni-video> <!-- 其他内容 --> </view> </template> <script> export default { data() { return { isFullScreen: false, }; }, methods: { handleFullscreen(e) { this.isFullScreen = e.fullscreen; if (this.isFullScreen && window.orientation === 'portrait') { // 设备是竖屏但已进入全屏模式,尝试切换到横屏 uni.switchTo横屏(); } }, }, onReady() { // 可以在这里主动检测设备初始方向并做相应调整 let initialOrientation = window.orientation; if (initialOrientation === 'portrait') { uni.switchTo横屏(); // 如果初始就是竖屏,则强制横屏 } }, }; </script> <style scoped> .app { @media screen and (orientation: landscape) { /* 当屏幕为横屏时应用的样式 */ } } </style> ``` 在这个例子中,`handleFullscreen`函数会在视频全屏状态改变时被触发。如果设备从竖屏变为全屏并且是竖屏显示(window.orientation == 'portrait'),则会调用`uni.switchTo横屏()`来切换屏幕方向。 注意:`uni.switchTo横屏()`这个API需要在uni-app的运行环境中支持,如果你的项目还没有适配这个功能,需要查阅相关文档或确认是否可用。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端代码の搬运工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值