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

小程序使用video播放m3u8格式的监控
期望实现的效果:只有全屏按钮,不显示进度条
在这里插入图片描述
最开始使用的属性是: show-bottom-progress,但是发现此属性值只针对ios有效,android还是无效
在这里插入图片描述
设置代码如下

<video src="{{model.playUrl}}"
 binderror="videoError" 
 enable-danmu 
 show-center-play-btn='{{true}}' 
 autoplay="{{true}}"
 style="width:100%;height:400rpx" 
 id="videPlayer"
 direction="{{90}}" 
 show-fullscreen-btn="{{true}}"
 enable-progress-gesture="{{false}}" 
 show-bottom-progress="{{false}}"
 show-play-btn="{{false}}">
</video>

解决办法
将show-progress设置为false即可

show-progress="{{false}}"

在这里插入图片描述

### 微信小程序 `video` 标签自定义进度条实现 在微信小程序中,通过组合使用 `<video>` 和其他组件可以创建带有自定义进度条播放器。具体来说: 对于视频控件部分,官方提供了丰富的 API 来支持开发者定制化需求[^2]。为了构建一个具有自定义进度条效果的小程序页面,在 HTML 结构上除了放置标准的 `<video>` 组件外还需要额外引入用于表示进度条样式的元素。 #### 创建基础布局结构 ```html <view class="custom-video-container"> <!-- 视频区域 --> <video id="myVideo" src="{{src}}" controls></video> <!-- 自定义进度条容器 --> <slider block-size="8" activeColor="#E94057" backgroundColor="#EBEEF3" min="0" max="{{maxTime}}" value="{{currentTime}}" bindchange="onSliderChange"></slider> </view> ``` 这里采用了一个滑动条 (`<slider>`) 来模拟传统意义上的进度条行为,并将其外观样式调整得更贴近实际应用中的视觉感受;同时设置了一些属性来控制其范围以及初始状态等参数。 #### 数据绑定与事件处理逻辑 ```javascript Page({ data: { src: 'your_video_url_here', // 替换成真实的视频地址 currentTime: 0, // 当前时间戳,默认从零秒开始 maxTime: 1 // 总时长,初始化为任意正值即可 }, onLoad() { const videoContext = wx.createSelectorQuery().select('#myVideo'); this.videoCtx = videoContext; // 获取总时长并更新到data里 this.videoCtx.duration((res) => { console.log('Total Duration:', res.duration); this.setData({ maxTime: Math.floor(res.duration)}); }); }, onSliderChange(e){ let seekToSecond = e.detail.value; this.videoCtx.seek(seekToSecond); // 调整当前播放位置 this.setData({ currentTime: seekToSecond // 同步显示新的进度值 }) } }) ``` 上述 JavaScript 代码片段展示了如何监听用户的交互操作并将这些变化反映给底层媒体资源。每当用户改变滑块的位置时都会触发相应的回调函数执行跳转动作,从而达到同步调节的目的。 此外,还可以进一步优化用户体验,比如当视频自然播放过程中也应实时刷新进度指示器的状态,这可以通过周期性轮询或者利用 Web Components 提供的相关钩子机制完成。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值