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

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

2024-04-07 08:04:00 前端知识 前端哥 672 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
评论
发布的文章

java解析超大json文件数据

2024-04-19 21:04:10

头歌-JavaScript基础

2024-04-19 21:04:54

C#Json序列化及反序列化

2024-04-19 21:04:40

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