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

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

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

相关推荐
IT瘾君21 分钟前
JavaWeb:Html&Css
前端·html
264玫瑰资源库1 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端1 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED1 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
EasyDSS1 小时前
视频监控从安装到优化的技术指南,视频汇聚系统EasyCVR智能安防系统构建之道
大数据·网络·网络协议·音视频
拉不动的猪1 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程2 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常2 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴2 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中2 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss