uni-app video组件在iOS上vslide-gesture-in-fullscreen属性动态设置无效,安卓可以
uni-app video组件在iOS上vslide-gesture-in-fullscreen属性动态设置无效,安卓可以
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
PC开发环境 | Windows | HBuilderX |
手机系统 | iOS | |
手机系统版本号 | iOS 17 | |
vue版本 | vue2 |
示例代码:
<video
class="video"
id="myVideo"
ref="myVideo"
vslide-gesture-in-fullscreen="!is_lock"
show-play-btn="false"
object-fit="object_fit"
@play="playChange"
@pause="pauseChange"
@ended="endedChange"
@timeupdate="timeupdateChange"
@fullscreenchange="fullscreenChange"
@controlstoggle="controlstoggle"
@tap="video_change"
操作步骤:
<video
class="video"
id="myVideo"
ref="myVideo"
vslide-gesture-in-fullscreen="!is_lock"
show-play-btn="false"
object-fit="object_fit"
@play="playChange"
@pause="pauseChange"
@ended="endedChange"
@timeupdate="timeupdateChange"
@fullscreenchange="fullscreenChange"
@controlstoggle="controlstoggle"
@tap="video_change"
预期结果:
希望可以动态设置
实际结果:
不可以动态设置
bug描述:
video组件在iOS上的vslide-gesture-in-fullscreen属性动态设置无效,安卓可以
一样遇到这个问题
回复 1***@qq.com: Vue3.2.33
我也是,解决了吗?
没解决
在uni-app中,video
组件的 vslide-gesture-in-fullscreen
属性用于控制全屏播放时是否允许上下滑动调节音量。如果发现在iOS平台上动态设置该属性无效,而安卓平台上则可以正常工作,这可能是由于iOS平台的一些特定限制或bug导致的。
首先,确认你的uni-app版本和相关的依赖库是否是最新的,因为这类问题有时会在新版本中得到修复。然后,可以尝试通过编程方式在组件挂载和更新时动态设置属性,虽然iOS可能不支持动态修改,但可以通过条件渲染或重新加载组件来尝试解决。
以下是一个尝试通过条件渲染来动态设置vslide-gesture-in-fullscreen
属性的代码示例:
<template>
<view>
<button @click="toggleGesture">Toggle Gesture</button>
<view v-if="showVideo">
<video
id="myVideo"
src="your-video-url.mp4"
:vslide-gesture-in-fullscreen="isGestureEnabled"
controls
autoplay
></video>
</view>
</view>
</template>
<script>
export default {
data() {
return {
showVideo: true, // 控制视频组件的显示与隐藏
isGestureEnabled: true, // 控制是否启用滑动调节音量
};
},
methods: {
toggleGesture() {
this.isGestureEnabled = !this.isGestureEnabled;
// 由于iOS可能不支持动态修改,这里尝试通过重新渲染组件来更新设置
this.showVideo = false;
this.$nextTick(() => {
this.showVideo = true;
});
},
},
};
</script>
<style scoped>
/* 样式根据需求调整 */
</style>
在这个例子中,我们通过点击按钮来切换isGestureEnabled
的值,并通过改变showVideo
的值来重新渲染video
组件,尝试让iOS系统重新应用vslide-gesture-in-fullscreen
属性的值。然而,需要注意的是,这种方法并不能保证在所有iOS版本和设备上都能有效工作,因为iOS对web组件的控制有时会比较严格。
如果上述方法仍然无法解决问题,建议查阅uni-app的官方文档或社区论坛,看看是否有其他开发者遇到并解决了类似的问题。同时,也可以考虑向uni-app的开发者团队提交一个bug报告,以便他们能够在未来的版本中修复这个问题。