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);
},
网友评论