uniapp视频禁止用户推拽进度条并保留进度条显示的解决方法——方案一

在uniapp项目中，使用<video>组件播放视频非常方便。默认情况下，视频组件会显示进度条，用户可以随意拖动进度条来控制视频播放进度。然而，在某些特定场景，如在线教育、广告宣传等，我们希望禁止用户拖动进度条，以保持内容的连贯性。那么，如何实现这一功能呢？

今天给大家分享一个在uniapp中播放视频时的小技巧之一：如何禁止用户推拽进度条，同时又不隐藏进度条。

实现步骤：

1、引入视频组件

首先，在页面的.vue文件中引入<video>组件，并设置相关属性。

html 复制代码

<template>
  <view>
    <video
      id="myVideo"
      src="https://example.com/video.mp4"
      controls
      :disable-progress-gesture="true"
      @timeupdate="onTimeUpdate"
    ></video>
  </view>
</template>

2、禁止用户拖动进度条

通过设置<video>组件的disable-progress-gesture属性为true，即可禁止用户拖动进度条。但此时进度条会消失，接下来我们需要解决这个问题。

3、保留进度条显示

为了保留进度条，我们可以自定义一个进度条组件，并通过监听视频播放时间来更新进度条。

以下是自定义进度条的代码：

html 复制代码

<template>
  <view class="progress-bar">
    <view class="progress" :style="{ width: progress + '%' }"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      progress: 0, // 当前播放进度
    };
  },
  methods: {
    onTimeUpdate(e) {
      const currentTime = e.detail.currentTime;
      const duration = e.detail.duration;
      this.progress = (currentTime / duration) * 100;
    },
  },
};
</script>

<style scoped>
.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #ccc;
  position: relative;
}
.progress {
  height: 4px;
  background-color: #ffcc00;
  position: absolute;
  left: 0;
  top: 0;
}
</style>

4、将自定义进度条与视频组件结合

将自定义进度条组件添加到页面中，并确保它与视频组件的播放进度同步。

javascript 复制代码

<template>
  <view>
    <video
      id="myVideo"
      src="https://example.com/video.mp4"
      controls
      :disable-progress-gesture="true"
      @timeupdate="onTimeUpdate"
    ></video>
    <custom-progress-bar :progress="progress"></custom-progress-bar>
  </view>
</template>

<script>
import CustomProgressBar from '@/components/CustomProgressBar.vue';

export default {
  components: {
    CustomProgressBar,
  },
  data() {
    return {
      progress: 0, // 当前播放进度
    };
  },
  methods: {
    onTimeUpdate(e) {
      const currentTime = e.detail.currentTime;
      const duration = e.detail.duration;
      this.progress = (currentTime / duration) * 100;
    },
  },
};
</script>

通过以上步骤，我们实现了在uniapp中播放视频时禁止用户推拽进度条，同时保留进度条显示的功能。这样既保证了内容的连贯性，又让用户能够了解视频播放进度。

该方法主要是通过隐藏进度条并自定义进度条的方式实现的，还可以通过监听用户拖拽进度条动作，并将被拖拽的进度条自动修正到当前位置的方法实现，该方法在下一篇文章讲解。

希望本文对大家有所帮助！