h5音频播放问题

最新推荐文章于 2024-09-14 17:54:00 发布

爱上彗星的尾巴

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量274

点赞数

分类专栏：前端文章标签： js html5

本文链接：https://blog.csdn.net/qq_38698753/article/details/104051799

版权

前端专栏收录该内容

140 篇文章 0 订阅

订阅专栏

1,使用$event可以获取元素在页面上的位置,

2,如何让h5音乐自动播放

autoPlayAudio (id) {
      var video = document.getElementById(id)// video标签id=media
      if (window.WeixinJSBridge) {
        // eslint-disable-next-line no-undef
        WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
          video.play()
          console.log('1bofangle ma ??')
        }, false)
      } else {
        document.addEventListener('WeixinJSBridgeReady', function () {
          // eslint-disable-next-line no-undef
          WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
            console.log('2bofangle ma ??')
            video.play()
          })
        }, false)
      }
      video.play()
      return false
    },

3,需要监听h5页面的显示与隐藏做一些义务逻辑处理

document.addEventListener('visibilitychange', function () {
      // 用户离开了当前页面
      if (document.visibilityState === 'hidden') {
        console.log('visibilitychange1', this)
        let music = document.getElementById('music')
        music.pause()
      }
      if (document.visibilityState === 'visible') {
        console.log(document.visibilityState, 'isvisible')
        console.log(that.isPlay, this)
        if (that.isPlay) {
          that.autoPlayAudio('music')
        }
      }
    })