安卓初始化自動播放（最好部署在服務(wù)器上進(jìn)行播放，本地播放會出現(xiàn)奇奇怪怪的問題）

首先創(chuàng)建一個jsmpeg.js文件帘靡，代碼源文件放在百度網(wǎng)盤了知给，請自行下載
百度網(wǎng)盤下載地址
鏈接: https://pan.baidu.com/s/1EQpN9vaiWpHq7Us1qiFpGA 提取碼: i4vj
此處提供一個測試ts視頻文件，具體的測試文件自行生成
具體代碼

<template>
  <div class="page">
    <div class="videoDetails">
      <!-- 視頻播放 -->
      <div class="videoContent" @click="changeVideoType">
        <video
          :class="['videoPlay', videoHide ? 'videoHide' : '']"
          :src="videosInfo.videoHref"
          ref="video"
          autoplay
          loop="true"
          type="video/mp4"
          x-webkit-airplay="true"
          x5-video-player-type="h5"
          x5-video-orientation="portraint"
          x5-playsinline="true"
          webkit-playsinline="true"
          playsinline="true"
          controlslist="nodownload"
        ></video>
        <canvas :class="['videoPlay', canvasHide ? 'videoHide' : '']"></canvas>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import JSMpeg from '@/utils/jsmpeg'
export default {
  data() {
    return {
      videoHref: '',
      videosInfo: {
        videoCover: '',
        videoHref: '',
        videoId: '',
        videoTitle: '',
        shareImg: ''
      },
      videoHide: true,
      canvasHide: true,
      videoPause: false,
    }
  },
  mounted() {
    var isAndroid = window.navigator.userAgent.match(/android/gi)

    if (isAndroid) {
      // 安卓
      var canvas = document.querySelector('canvas')
      var src = 'https://tsvideo.lockfans.com/sv/11830349-170af71f095/11830349-170af71f095.ts'
      this.androidVideo = new JSMpeg.Player(src, {
        canvas: canvas,
        autoplay: true,
        progressive: false,
        throttled: true,
        decodeFirstFrame: false,
        // pauseWhenHidden: false,
        video: true,
        loop: false,
        onVideoDecode: () => {
          this.canvasHide = false
          this.videoLoading = true
          this.videoHide = false
          console.timeEnd('視頻加載時長')
        }
      })
    }
  },
  methods: {
    changeVideoType() {
      if (this.videoHide) {
        return false
      }
      if (this.videoPause) {
        this.videoPause = false
        this.androidVideo.play()
        
      } else {
        this.videoPause = true
        this.androidVideo.pause()
      }
    },
  }
}
</script>
<style lang="less" scoped>
.poster_item {
  width: 100%;
  height: 100vh;
}
.page {
  width: 100%;
  height: 100vh;
  background: #000;
}

.color_FB7E5E {
  color: #fb7e5e !important;
}
.hintIcon {
  width: 15px;
  height: 15px;
  margin-right: 3px;
}
.videoHide {
  display: none;
}

.videoContent {
  position: relative;
  margin-top: 35px;
  width: 100%;
  height: 229px;
  
}
.videoPauseDiv {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  width: 60px;
  height: 60px;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  // overflow: hidden;
}
.videoPauseImg {
  margin: -2px 0 0 -2px;
  width: 64px;
  height: 64px;
}
.videoCover {
  width: 100%;
  height: 100%;
}
.videoPlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
}
.videoLoading {
  width: 50px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 25px);
  z-index: 101;
}
</style>

ios 視頻初始化自動播放

安裝js-sdk

//vue項(xiàng)目中像安裝其他依賴一樣在命令行輸入就可以描姚，也可以script引入
npm install weixin-js-sdk--save

具體代碼

<template>
  <div class="page">
    <div class="videoDetails">
      <!-- 視頻播放 -->
      <div class="videoContent" @click="videoPlayType ? videoPause() : videoPlay()">
        <video
          class="videoPlay"
          :src="videoHref"
          ref="video"
          autoplay
          loop="true"
          type="video/mp4"
          x-webkit-airplay="true"
          x5-video-player-type="h5"
          x5-video-orientation="portraint"
          x5-playsinline="true"
          webkit-playsinline="true"
          playsinline="true"
          controlslist="nodownload"
        ></video>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import wx from 'weixin-js-sdk'
export default {
  data() {
    return {
      videoHref: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
      videoPlayType:true
    }
  },
  mounted() {
    document.addEventListener("WeixinJSBridgeReady",  ()=> {
      this.$nextTick(()=>{
        this.videoPlay()
      })
    }, false);
  },
  methods: {
    // 播放
    videoPlay() {
      let video = this.$refs.video;
      this.videoPlayType = true
      video.play();
    },
    // 暫停
    videoPause(type) {
      let video = this.$refs.video;
       this.videoPlayType = false
      video.pause();
    },
  }
}
</script>