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

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

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

相关推荐
太阳伞下的阿呆2 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny2 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴3 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔3 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔3 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔4 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6144 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止4 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军5 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安5 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js