视频组件

<video
    style="width: 100%; height: 100%;object-fit: fill"
    class="player"
    ref='player_big_box'
    controls
    preload
    autoplay     //自动播放
    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.videoUrl
     let that = this
     this.$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();
           })
         })
       }
     })
   }