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中播放视频时禁止用户推拽进度条,同时保留进度条显示的功能。这样既保证了内容的连贯性,又让用户能够了解视频播放进度。

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

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

相关推荐
拉不动的猪8 分钟前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy1 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom1 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom1 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua3 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI3 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端