微信小程序隐藏video标签的进度条组件

Cheng Lucky

已于 2022-07-04 15:04:07 修改

阅读量1.1k

点赞数 1

文章标签： javascript 微信小程序

于 2022-07-04 15:02:21 首次发布

本文链接：https://blog.csdn.net/weixin_44255044/article/details/125600375

版权

微信小程序隐藏video标签的进度条组件

直接上代码

  <video 
  direction="0" 
  show-fullscreen-btn="{{false}}" 
  show-play-btn="{{false}}" 
  controls="{{false}}" 	
  src="****" 
  objectFit="cover" //全屏铺满
  autoplay 
  loop>
  </video>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Cheng Lucky

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序隐藏video标签的进度条组件

微信小程序隐藏video标签的进度条组件
复制链接

扫一扫

解决小程序video控件在真机黑屏问题

01-05

解决小程序video控件在真机播放时视频黑屏问题，下载后执行如下命令： mp4box.exe -inter 500 -isma -hint 123.mp4

微信下程序视频隐藏进度条

qq_38835219的博客

05-28

1619

show-progress=’{{false}}’ controls=’{{true}}’

参与评论您还未登录，请先登录后发表或查看评论

vue3项目中video视频中进度条不要显示，隐藏

最新发布

阿吉太懒的博客

06-19

215

【代码】vue3项目中video视频中进度条不要显示，隐藏。

微信小程序隐藏video进度条

qq_41956361的博客

04-27

1254

想隐藏微信小程序的进度条兼容。

小程序video播放器隐藏进度条无效问题

小怪獸丶的糖的专栏

12-19

1468

微信小程序video播放m3u8格式监控，进度条隐藏无效解决办法

微信小程序 video标签隐藏控件神坑

一只快乐的小猴子的博客

04-06

2268

<video direction="0" src="" controls="{{false}}" objectFit="cover" autoplay show-fullscreen-btn="{{false}}" show-play-btn="{{false}}"...

微信小程序使用video组件播放视频功能示例【附源码下载】

08-28

在微信小程序中，开发者可以利用`video`组件来实现视频播放功能，这为用户提供了丰富的媒体体验。本文将深入探讨如何使用`video`组件播放本地mp4格式的视频，并提供了一个简单的实例，以及源码供读者参考。 1、**...

微信小程序 video组件详解

09-01

微信小程序的`video`组件是用于在小程序页面中嵌入视频播放功能的关键元素。通过`video`组件，开发者可以方便地实现在线视频和本地视频的播放，并且可以通过各种属性进行自定义配置，以满足不同场景的需求。下面我们...

微信小程序（十二）text组件详细介绍

09-01

微信小程序还提供了许多其他组件，如`icon`图标组件、`switch`开关组件、`progress`进度条组件、`action-sheet`操作菜单、`modal`模态对话框、`checkbox`复选框、`toast`提示框、`form`表单组件、`picker`选择器、`...

微信小程序 video详解及简单实例

11-29

在众多功能中，`video`组件是微信小程序用来处理视频播放的关键元素，尤其适合多媒体内容展示和互动。一、微信小程序 `video` 组件详解 `<video>` 组件用于在小程序中嵌入视频内容，它支持多种属性和事件，以满足...

videoUI视频切换播放和全屏播放微信小程序

08-10

综上所述，`videoUI 视频切换播放和全屏播放 微信小程序` 主题涵盖了微信小程序的基础知识、`<video>` 组件的使用、自定义组件开发、全屏播放实现以及相关 JavaScript 技术。通过深入学习和实践，开发者能够构建出...

微信小程序（原生）——video视频禁止拖动进度条、可全屏观看等视频播放结束事件、数据监听、显示播放时长、固定倍速、视频去除黑边等

努力、拼搏、奋进

11-05

4142

微信小程序——video视频禁止拖动进度条、可全屏观看等视频播放结束事件、数据监听、显示播放时长、固定倍速、视频去除黑边等

微信小程序video控件的使用

热门推荐

hacjy

03-19

4万+

微信小程序video控件的使用 微信小程序video控件的使用一、简介二、属性三、相关实现api 1、wx.createVideoContext 2、videoContext对象四、代码实现实现效果，如下图实现原理：一、简介 video控件是微信小程序提供的系统组件之一，用于实现播放视频的功能。二、属性 | 属性名 | 类型...

微信小程序，视频播放，隐藏默认播放控件

qq_43628847的博客

10-15

917

微信原生写 <video src="" autoplay="{{true}}" controls="{{false}}" loop="{{true}}" enable-progress-gesture="{{false}}" object-fit="cover"> </video> 一定要加两个花括号！！！不然不生效！！！！用uni-app的话 <video id="tvcVideo" class="tvcVideo" src="" loop :auto

微信环境下video的 autoplay 和 controls 解决方法？

qq_41851047的博客

08-28

1223

客户想要实现在微信环境下用户查看视频播放，并且不能快进看完，只能让视频自动播放完毕后，才能领取奖励。。。。。现在遇到下面几个问题，实在是找不到合适的解决方法！！！！！！！！！！！！！！！！！！ 1：微信环境下安卓系统的视频无法自动播放？ 2：video的视频控制器controls 设置成false，但是还是显示出来了？ 3：controls 无法隐藏，于是就想到加一层蒙...

小程序video组件神坑

qq_38698753的博客

09-30

868

1、微信小程序之video组件中controls show-play-btn show-fullscreen-btn show-center-play-btn show-progress等属性你设置false怎么也无法隐藏，后面还是看到官方解决卡顿时说设置属性：custom-cache="{{false}}"，看到没有false竟然有大括号，于是把controls的属性设置成controls=...

小程序开发之组件video（视频）

M.Siebel

01-16

4912

video 视频。该组件是原生组件，使用时请注意相关限制。默认宽度300px、高度225px，可通过wxss设置宽高。例如：效果展示代码 index.wxml <!-- src 要播放视频的资源地址，支持云文件ID initial-time 指定视频初始播放位置 duration 指定视频时长 controls:true 是否显示默认播放控件...

微信video播放视频不全屏，去掉进度条

FiveBigNiu

05-18

1万+

微信内置浏览器简直了解决办法参照文档主要看的这个文档 https://x5.tencent.com/tbs/guide/web/x5-video.htmlhttps://segmentfault.com/a/1190000008782550https://zhuanlan.zhihu.com/p/27559167https://www.cnblogs.com/baiyygynui/p/632...

小程序video隐藏控件

Mr_wuying的博客

06-04

5587

wxml页面里我直接写controls=’true‘效果没显示对所以写在了js里 <video id="myVideo" src="{{videoUrl}}" loop='true' controls='{{controls}}' show-fullscreen-btn='{{controls}}' autoplay="true" ...

微信小程序video模拟实现进度条功能可拖拽

05-17

要实现微信小程序video组件的进度条可拖拽功能，可以使用以下步骤： 1. 在.wxml文件中，使用video组件，并加上一个view容器作为进度条的背景，再加上一个view作为进度条的滑块，代码如下： ```html <video src="{{src}}" poster="{{poster}}" bindtimeupdate="timeUpdate"></video> <view class="progress-bar"> <view class="progress" style="width: {{progress}}%;"></view> <view class="progress-btn" style="left: {{btnLeft}}px;"></view> </view> ``` 2. 在.wxss文件中，设置进度条和滑块的样式： ```css .progress-bar { position: relative; height: 6px; background-color: #ddd; } .progress { position: absolute; top: 0; left: 0; height: 6px; background-color: #f00; } .progress-btn { position: absolute; top: -5px; left: 0; width: 10px; height: 16px; border-radius: 50%; background-color: #fff; border: 2px solid #f00; box-shadow: 0 0 2px #f00; transform: translateX(-50%); } ``` 3. 在.js文件中，定义一个data对象，包含视频的总时长、当前播放时间、进度条长度和滑块位置等信息： ```javascript data: { src: 'http://www.example.com/video.mp4', poster: 'http://www.example.com/poster.jpg', duration: 0, currentTime: 0, progress: 0, btnLeft: 0, } ``` 4. 在onLoad生命周期函数中，获取视频的总时长： ```javascript onLoad: function() { var that = this; wx.createVideoContext('myVideo', that).requestFullScreen(); wx.createVideoContext('myVideo', that).play(); wx.createVideoContext('myVideo', that).pause(); wx.createVideoContext('myVideo', that).seek(0); wx.createVideoContext('myVideo', that).play(); wx.createVideoContext('myVideo', that).on('loadedmetadata', function(res) { that.setData({ duration: res.duration }); }); }, ``` 5. 在timeUpdate事件回调函数中，更新当前播放时间和进度条长度以及滑块位置： ```javascript timeUpdate: function(e) { var that = this; var currentTime = e.detail.currentTime; var duration = that.data.duration; var progress = Math.floor(currentTime / duration * 100); var btnLeft = progress * 3.4 - 7; that.setData({ currentTime: currentTime, progress: progress, btnLeft: btnLeft }); }, ``` 6. 在进度条的view容器上，绑定touchstart、touchmove和touchend事件，实现滑动改变进度条长度和滑块位置： ```javascript touchstart: function(e) { var that = this; that.setData({ startX: e.touches[0].pageX, }); }, touchmove: function(e) { var that = this; var startX = that.data.startX; var moveX = e.touches[0].pageX; var distance = moveX - startX; var duration = that.data.duration; var progress = that.data.progress + distance / 340 * 100; if (progress < 0) { progress = 0; } else if (progress > 100) { progress = 100; } var currentTime = progress / 100 * duration; var btnLeft = progress * 3.4 - 7; that.setData({ progress: progress, currentTime: currentTime, btnLeft: btnLeft, startX: moveX, }); }, touchend: function(e) { var that = this; wx.createVideoContext('myVideo', that).seek(that.data.currentTime); }, ``` 通过以上步骤，就可以实现微信小程序video组件的进度条可拖拽功能。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交