uc浏览器触发不了audio 的play 方法

发布于 2022-09-07 21:39:32 字数 1481 浏览 24 评论 0

  1. 在开发播放器的时候真机调试发现uc浏览器不能触发audio标签的play事件 , 也不能自动播放。
  2. 测试代码
<template>
    <div class="audio-wrapper" ref="audioWrapper" @touchstart.stop="audioPlay">
        <audio @touchstart.stop @play="playing"
               src="//dl.stream.qqmusic.qq.com/C400000fcbn33tw0lQ.m4a?vkey=2287E4C8B54E21B92310DD2BE8218EF9FFDBAA41889FC74A90C23350F387C462F09AD6B9AEB411E2C7E8CBB8E5498BE09F0AB24D4A039FEB&amp;guid=4339008184&amp;uin=0&amp;fromtag=66"
               ref="audio" controls ></audio>
    </div>
</template>

<script>
  export default {
    methods: {
      audioPlay () {
        console.log(this.$refs.audio)
        console.log(this.$refs.audio.play)
        this.$refs.audio.play()
      },
      playing () {
        console.log('playing')
      }
    }
  }

</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    .audio-wrapper
        position: fixed
        width: 100%
        height: 100%
        background-color: rgba(0, 0, 0, 0.6)

</style>

3.测试结果
uc浏览器下触发touchstart事件之后,audio标签dom和play()方法都打印出来了,但是 audio标签的 play事件d调用的ready方法中的console没有执行 , 歌曲没有播放

clipboard.png

qq浏览器下触发touchstart事件后 audio标签dom , play() ,和 pinging 都打印出来了 歌曲也播放了
clipboard.png

回答的大佬们 抬头见喜低头捡钱啊!!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

卷耳 2022-09-14 21:39:32

https://zhuanlan.zhihu.com/p/...
想办法workaround吧

残月升风 2022-09-14 21:39:32

我也遇到了,郁闷
不能自动播放都没事,tmd连调用play()都播放不了

黎歌 2022-09-14 21:39:32

自动播放被取缔了。防止非法使用

離殇 2022-09-14 21:39:32

同遇... 在ios和android都不行,但是点击audio标签可以。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文