vue H5页面video 视频流自动播放，解决ios不能自动播放问题

视频组件

<videostyle="width: 100%; height: 100%;object-fit: fill"class="player"ref='player_big_box'controlspreloadautoplay     //自动播放muted			  //是否静音playsinline="true"x5-playsinline=""webkit-playsinline="true"x5-video-player-type="h5"  //启动X5内核h5播放器x-webkit-airplay="allow"><source :src="videoUrl? videoUrl : ''" type="application/x-mpegURL">
</video>

在这里插入图片描述

js 代码

//需要引用微信js
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
安装 "hls.js": "^1.4.12",
this.videoUrl = res.data.hls
if (hlsjs.isSupported()) {this.hlsjs = new hlsjs()this.hlsjs.loadSource(this.videoUrl? this.videoUrl : '');this.hlsjs.attachMedia(this.$refs.player_big_box)this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {this.$refs.player_big_box.play()})}else if(this.$refs.player_big_box.canPlayType('application/vnd.apple.mpegurl')){this.$refs.player_big_box.src = this.videoUrllet that = thisthis.$nextTick(function (){if (window.WeixinJSBridge) {WeixinJSBridge.invoke('getNetworkType', {}, function (e) {that.$refs.player_big_box.play();})} else {document.addEventListener("WeixinJSBridgeReady", function() {WeixinJSBridge.invoke('getNetworkType', {}, function (e) {that.$refs.player_big_box.play();})})}})}