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

最新推荐文章于 2025-03-11 16:51:32 发布

weixin_45191052

最新推荐文章于 2025-03-11 16:51:32 发布

阅读量2.1k

点赞数 1

文章标签：微信浏览器 video时长 loadedmetadata iOS限制音频播放策略

本文链接：https://blog.csdn.net/weixin_45191052/article/details/125291663

版权

需求：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)
          });