uni-app video组件在iOS上vslide-gesture-in-fullscreen属性动态设置无效,安卓可以

发布于 1周前 作者 eggper 来自 Uni-App

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属性动态设置无效,安卓可以


6 回复

一样遇到这个问题


IOS18.1.1也是这样

回复 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报告,以便他们能够在未来的版本中修复这个问题。

回到顶部