关于H5 video Audio标签微信内不能自动播放的问题 vue

最新推荐文章于 2025-05-27 11:58:44 发布

小鱼儿_张

最新推荐文章于 2025-05-27 11:58:44 发布

阅读量3.6k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： video audio 文章标签： html5

本文链接：https://blog.csdn.net/qq_35559000/article/details/115000989

在微信中，Vue应用中的video和audio标签常遇到无法自动播放的问题，尤其是iOS。为解决这个问题，可以尝试在HTML中添加muted属性，并在JS部分进行相应处理。对于Android，由于更严格的限制，通常需要用户交互才能播放，如点击蒙版或监听touchstart事件。同时，引入微信JS-SDK能帮助解决audio的自动播放问题，实现在iOS和Android上都能自动播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文链接 vue-player或TcPlayer在微信内自动播放video和audio

不管是IOS和Android，当video和audio初始src为空，根据点击不同的媒体源（非播放器控件），比如多个章节的视频列表，动态给src赋值并执行play()方法时，大多数的机器并不会执行自动播放的动作，特别是在微信浏览器内。这是因为浏览器内核鉴于节省用户在不知情的情况下一进入页面时造成不必要的流量损失。

1、IOS在微信内video 不能自动播放问题

在Ios微信内部是可以实现video自动播放的由于微信禁止了自动播放换个思路解决自动播放问题 (亲测基本可以自动播放)
##html部分
1、建议video 静音 muted 属性

<video :ref="`video${item.uuid}`" @touchstart.once="parentVideoPlay" muted autoplay="autoplay" playsinline="true" preload="auto" webkit-playsinline="true"
 x-webkit-airplay="true" x5-video-player-fullscreen="true" x5-video-player-type="h5" :poster="item.cover" :src="item.playbackUri"></video>

##js部分

//首先引入微信jsdk
import WeixinJSBridge from 'weixin-js-sdk';
//this.$nextTick是为了保证DOM加载完毕
this.$nextTick(function() {
			this.videoIndex = i ? i :

最低0.47元/天解锁文章

200万优质内容无限畅学