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() ...
随机推荐
- react中处理后台接口返回存在html标签的字符串
render{ return( <div> <div>接下来是例子</div> <div dangerouslySetInnerHTML={{__html:& ...
- 生成器send方法、递归、匿名函数、内置函数
今日内容 1.生成器的send方法. 2.递归:函数自己调用自己 3.匿名函数 4.内置函数 生成器send方法 send的工作原理 1.send发生信息给当前停止的yield 2.再去调用__nex ...
- 【坑】不要使用各种框架提供的内部List
为了代码简洁有时我们会使用一些框架提供的工具类.如 import org.apache.commons.collections.ListUtils; package java.util.Collect ...
- [转帖]JVM总结--JVM体系结构
JVM总结--JVM体系结构 https://blog.csdn.net/samjustin1/article/details/52215274 需要不断的学习才可以. 2016年08月15日 22: ...
- Centos8 重启网卡方法
问题情况: 1.虚机centos8 修改为静态ip后,由于网卡网段变更,无法上网 2.最小化安装,没有ifconfig 3.firewalld,selinux关闭 4.ping 不通物理机 根本原因: ...
- centos7安装activemq5.15
1. 官网下载 http://activemq.apache.org/components/classic/download/ 上传到服务器 2. 安装 tar zxf apache-activemq ...
- Amoeba 实现MySQL读写分离
Amoeba是一个以MySQL为底层数据存储,并对应用提供MySQL协议接口的proxy,它集中地响应应用的请求,依据用户事先设置的规则,将SQL请求发送到特定的数据库上执行.基于此可以实现负载均衡. ...
- leecode刷题(26)-- 用栈实现队列
leecode刷题(26)-- 用栈实现队列 用栈实现队列 使用栈实现队列的下列操作: push(x) -- 将一个元素放入队列的尾部. pop() -- 从队列首部移除元素. peek() -- 返 ...
- SQL学习(二)之四大查询语句以及标准写法
SQL四大查询语句——增删改查 增-INSERT INSERT INTO 表 (字段列表) VALUES(值列表) INSERT INTO `user_table` (`ID`, `username` ...
- python读写txt文件
整理平常经常用到的文件对象方法: f.readline() 逐行读取数据方法一: >>> f = open('/tmp/test.txt') >>> f.rea ...