安卓初始化自动播放

首先创建一个jsmpeg.js文件，代码源文件放在百度网盘了，请自行下载

百度网盘下载地址

链接: https://pan.baidu.com/s/1bDvyrEAulMy8aYeKrhPUUg 提取码: gtje

此处提供一个测试ts视频文件，具体的测试文件自行生成

具体代码

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()

}

},

}

}

.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;

}

ios 视频初始化自动播放

安装js-sdk

//vue项目中像安装其他依赖一样在命令行输入就可以，也可以script引入

npm install weixin-js-sdk--save

具体代码

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();

},

}

}