1. 解決 video 再 safari 瀏覽器中默認(rèn)大屏播放丑婿，不小屏播放問題? 設(shè)置：
?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>
//請求數(shù)據(jù)后調(diào)用
?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);
? ? },
