關(guān)于解決 Vue video 在微信瀏覽器 iOS 和安卓不展示封面圖的問(wèn)題

1. 解決 video 再 safari 瀏覽器中默認(rèn)大屏播放,不小屏播放問(wèn)題? 設(shè)置:

?x5-video-player-type="h5"?

? x5-playsinline? playsinline? webkit-playsinline="true"

2. safari 瀏覽器第一幀沒(méi)有加載出來(lái)

<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"

? ? ? >此視頻暫無(wú)法播放,請(qǐng)稍后再試</video>

//請(qǐng)求數(shù)據(jù)后調(diào)用

?handleLoadData() {

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

? //這一步可以解決 安卓微信中封面圖的問(wèn)題? 但是iOS微信打開封面圖還是加載不出來(lái)

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

// 解決 iOS 問(wèn)題

const u = navigator.userAgent;

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

if (isiOS) {

? console.log('is iOS ')

? //解決iOS 微信 poster不展示的問(wèn)題

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

? ? },

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容