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

最新推荐文章于 2024-11-14 19:43:58 发布

原创最新推荐文章于 2024-11-14 19:43:58 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #javascript #html5

本文探讨了如何在微信浏览器中正确使用`loadedmetadata`和play/pause事件获取视频时长，以及针对iOS限制的音频策略。通过实例代码展示了在不同环境下处理音频和视频时长获取的问题与解决方法。

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