首页 前端知识 微信浏览器h5 loadedmetadata 兼容性问题

微信浏览器h5 loadedmetadata 兼容性问题

2024-04-07 08:04:00 前端知识 前端哥 733 247 我要收藏

需求:h5页面需要做一个上传视频并且获取视频的时长

1,使用loadedmetadata这个是函数,当指定的音频/视频的元数据已加载时,会发生 loadedmetadata 事件

``

let audioElement = new Audio(url), self = this,result;
audioElement.addEventListener("loadedmetadata", function() {
result = audioElement.duration
let time = parseInt(result)
});
复制

这种获取视频的时长在其他浏览器都可以获取到视频的时长,但是在微信浏览器打开就不行
2.由于ios对audio和video的一系列限制,包括提前load和自动播放等,所以只有当audio的play触发事件,才可以监听到duration,所以我们需要默认触发play事件,播放音频,但是注意的需要及时暂停

let audioElement = new Audio(url), self = this,result;
audioElement.muted = true
audioElement.play().then(()=>audioElement.pause())
audioElement.addEventListener("loadedmetadata", function() {
result = audioElement.duration
let time = parseInt(result)
audioElement.muted = false
self.$emit('getFilesData',o,time)
});
复制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4534.html
评论
还可以输入200
共0条数据,当前/页
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!