uni-app video视频组件双击无法暂停播放视频

sinazl 1楼•17 天前作者

没人管吗

bupafengyu 2楼•17 天前

iOS 也有返回键啊
双击暂停这个 iOS和安卓确认一下要怎么做

yibo5220 3楼•17 天前

回复 2***@qq.com: 这个文档上没有写App支持应该是两端表现不一样以后版本我们统一一下

gougou168 4楼•17 天前

回复天生DR: 好的。会在最近版本修复吗

zlyuanteng 5楼•17 天前

回复 2***@qq.com: 双击那个属性会很快修复返回按钮那个估计得等一下得和安卓一下风格

htzhanglong 6楼•17 天前

回复天生DR: 谢谢

ionicwang 7楼•17 天前

回复 2***@qq.com: enable-play-gesture 属性 iOS端在3.4.6 添加了但是由于历史遗留问题现在默认为true 与文档不符如果你想屏蔽显性设为false 另外返回按键在下个版本加

vueper 8楼•17 天前

在 uni-app 中，video 组件默认情况下不支持双击暂停播放视频的功能。如果你希望在双击视频时暂停播放，可以通过监听 video 组件的 touchend 事件，并结合计时器来实现双击的效果。

以下是一个示例代码，展示如何实现双击暂停播放视频的功能：

<template>
  <view>
    <video
      id="myVideo"
      src="https://www.example.com/sample.mp4"
      controls
      @touchend="handleTouchEnd"
    ></video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lastTapTime: 0, // 记录上次点击的时间
      tapTimeout: null, // 用于清除计时器
    };
  },
  methods: {
    handleTouchEnd() {
      const currentTime = Date.now();
      const tapInterval = currentTime - this.lastTapTime;

      if (tapInterval < 300 && tapInterval > 0) {
        // 双击事件
        this.toggleVideoPlayback();
        clearTimeout(this.tapTimeout); // 清除计时器
      } else {
        // 单击事件
        this.tapTimeout = setTimeout(() => {
          // 单击处理逻辑
        }, 300);
      }

      this.lastTapTime = currentTime;
    },
    toggleVideoPlayback() {
      const videoContext = uni.createVideoContext('myVideo', this);
      const video = videoContext;

      video.paused ? video.play() : video.pause();
    },
  },
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>