关于解决vuevideo在微信浏览器ios和安卓不展示封面图的问题

发布网友发布时间：2023-04-27 14:01

共1个回答

热心网友时间：2023-10-23 12:37

1. 解决 video 再 safari 浏览器中默认大屏播放，不小屏播放问题设置：

x5-video-player-type="h5"

x5-playsinline playsinline webkit-playsinline="true"

2. safari 浏览器第一帧没有加载出来

<video

:src="playSrc"

style="width: 100%;"

controls="controls"

preload="auto"

id="vediodiv"

x5-video-player-type="h5"

x5-playsinline playsinline webkit-playsinline="true"

@ended="handleEnd"

@loadeddata="handleLoadData"

>此视频暂无法播放，请稍后再试</video>

//请求数据后调用

handleLoadData() {

var video = document.getElementById("vediodiv");

//这一步可以解决安卓微信中封面图的问题但是iOS微信打开封面图还是加载不出来

video.setAttribute("poster", this.posterImg);

// 解决 iOS 问题

const u = navigator.userAgent;

const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

if (isiOS) {

console.log('is iOS ')

//解决iOS 微信 poster不展示的问题

if (window.WeixinJSBridge) {

WeixinJSBridge.invoke(

"getNetworkType",

{},

function (e) {

video.play();

setTimeout(() => {

video.pause();

}, 200);

},

false

);

} else {

document.addEventListener(

"WeixinJSBridgeReady",

function () {

WeixinJSBridge.invoke("getNetworkType", {}, function (e) {

video.load();

video.play();

setTimeout(() => {

video.pause();

}, 200);

});

},

false

);

}

}

},

handleGotoPlay(index) {

this.currentIndex = index;

this.currentDto = this.videoDtoList[index];

this.playSrc = this.currentDto.url;

this.imageSrc = this.currentDto.imageUrl;

this.videoName = this.currentDto.videoTitle;

this.setWxTitle();

setTimeout(() => {

var video = document.getElementById("vediodiv");

video.play();

}, 200);

},

热心网友时间：2023-10-23 12:37