h5 audio播放问题,audio获取缓存进度条
<!--全局 audio -->
<audio
id="audio"
@playing="audioReady"
@timeupdate="audioUpdateTime"
@pause="audioPaused"
@ended="audioEnd"
@error="audioError"/> // 监听微信端页面加载 触发音频load
document.addEventListener('DOMContentLoaded', () => {
const audio = document.getElementById('audio')
audio.load()
document.addEventListener('WeixinJSBridgeReady', () => {
audio.load()
}, false)
})
audioUpdateTime(e) {
// 更新时间和进度条 (默认一秒会执行多次 需要处理一秒只执行一次更新)
let time = 0
if (parseInt(e.target.currentTime) !== Number(time)) {
time = parseInt(e.target.currentTime)
const audio = document.getElementById('audio')
const timeRanges = audio.buffered
// 获取已缓存的时间 timeRanges.end(timeRanges.length - 1)
// 计算百分比 展示进度
}
h5 audio播放问题,audio获取缓存进度条的更多相关文章
- iOS适配UIViewView/WKWebView,H5生成长图,仿微信进度条
前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...
- 阿里播放器踩坑记录 进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...
- html5 vedio 播放器,禁掉进度条快进快退事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 模仿迅L看看<音频播放器> 实现点击进度条,跳转播放
<Style x:Key="btnFallback" TargetType="{x:Type Button}"> <Setter Proper ...
- 手机 简易浏览器 WebView的基本使用 返回 缓存 进度条
public class MainActivity extends AppCompatActivity { private WebView webView; private String url = ...
- H5音乐播放器
前段时间无聊用JavaScript基于H5的audio写一个音乐播放器.误喷,技术有限,文笔不好之处希望各位大神海涵. 1.HTML代码: <div id="music" c ...
- 自制 h5 音乐播放器 可搜索
闲言碎语: 有好几天没有发表博客了,这也是因为一直开发音乐和完善我的博客项目,好不容易抽出时间总结一下这几天所做的东西,笔试又不断通知,实则匆忙 今天难得逃了一次课,就趁这时间,该写写就写写吧~~ 进 ...
- 自动适配H5容器(UIViewView/WKWebView),生成长图,防微信进度条
前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...
- PureBasic—数控编辑框与调节块和进度条
三个有关上下限问题的控件,它们也是主要控件的组成部分,分别为:SpinGadget() 数控编辑框TrackBarGadget() 调节块控件ProgressBarGadget() ...
随机推荐
- python-Web-django-邮箱登陆
setting: # 发送邮箱 EMAIL_HOST = 'smtp.163.com' EMAIL_PORT = 465 EMAIL_HOST_USER = '666666@163.com' #EMA ...
- 使用现代 C++ 技术增强多核优化
在本文中,读者将了解如何使用现代 C++ 技术跨内核并行处理数据.通过研究示例代码,下载应用和学习技术,开发人员将更好地了解英特尔® 架构和多核技术.通过学习如何处理潜在的性能瓶颈和并发性问题,可以使 ...
- meta viewport移动端自适应
参考链接:https://www.jianshu.com/p/561357d7cd7b
- 基于vs插件的abp代码生成器
工作了这么多年,一直都在小公司摸爬滚打,对于小公司而言,开发人员少,代码风格五花八门.要想用更少的人,更快的速度,开发更规范的代码,那自然离不开代码生成器.之前用过动软的,也用过T4,后面又接触了力软 ...
- 在C语言中函数及其调用过程
目录 函数 C语言中的变参函数 函数的本质是什么 内存区域的区分技巧 函数的调用过程 栈帧的概念 调用过程细节 按照约定传参 函数 如果一个函数有声明没实现,那么就会出现链接错误: 以上代码会出现链接 ...
- HDU 1260 Tickets (动态规划)
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- 小记---------spark优化之更优分配资源
spark优化:在一定范围之内,增加资源与性能的提升是成正比的. 因此, 一个cpu core 执行一个task线程. task数: 若有 cpu core 2个.num-execu ...
- FFmpeg4.0笔记:采集桌面
Github https://github.com/gongluck/FFmpeg4.0-study/tree/master/Cff // 采集桌面 void test_desktop() { boo ...
- Android Monkey测试入门<1>
第一步:搭建环境:主要是安装和搭建java和sdk环境,说白了,对我们安卓开发来说,只要搭建好了Android开发环境,Monkey测试环境基本就是OK的了.可以参考:http://www.cnblo ...
- Hive 教程(六)-Hive Cli
hive 有两种启动方式,一种是 bin/hive,一种是 hiveserver2, bin/hive 是 hive 的 shell 模式,所有任务在 shell 中完成,shell 就相当于 hiv ...