今天在各終端做兼容性測(cè)試時(shí)本以為可以安全通過(guò)呢苇瓣，結(jié)果測(cè)試給到反饋說(shuō)Android手機(jī)外鏈的url里面的視頻盡然不能全屏播放尉间。于是乎吧啦吧啦代碼看看。
代碼大致這樣，帶有video標(biāo)簽的頁(yè)面是我的另一個(gè)項(xiàng)目哲嘲，并且這個(gè)項(xiàng)目自行單獨(dú)運(yùn)行完全沒(méi)毛病贪薪，快進(jìn)、全屏等功能都是可以正常使用眠副。但是呢一引入這個(gè)項(xiàng)目呢画切，雖然能改正常播放但是全屏效果沒(méi)了。在這個(gè)使用uniapp開發(fā)的項(xiàng)目?jī)?nèi)囱怕，我是使用webview標(biāo)簽作為容器直接給src賦值跳轉(zhuǎn)第三方頁(yè)面的霍弹，之前也是用這種方式跳過(guò)完全沒(méi)問(wèn)題的呀。
問(wèn)題分析：
我覺(jué)得是webview跳轉(zhuǎn)在中間轉(zhuǎn)換出現(xiàn)了問(wèn)題光涂，因?yàn)樵?xiàng)目是可以正常的全屏觀看的庞萍。
于是乎我隨意找了兩個(gè)替代方案試試：
1.采用了iframe嵌入鏈接試了下，頁(yè)面是正常出來(lái)了沒(méi)錯(cuò)忘闻，但是還是不能全屏呀钝计，故舍棄這個(gè)方案。
2.采用原生的方式齐佳，使用window.open()這種方式私恬，頁(yè)面可以出來(lái)，全屏也是可以的炼吴，正當(dāng)滿心歡喜時(shí)問(wèn)題又來(lái)了本鸣。由于我使用uniapp開發(fā)的這個(gè)項(xiàng)目實(shí)質(zhì)上也只是當(dāng)H5在用內(nèi)嵌到app里的，由于項(xiàng)目需要（主要是UI設(shè)計(jì)的原因）導(dǎo)航和狀態(tài)欄都是H5自定義的硅蹦，這就導(dǎo)致window.open()這種方式打開的頁(yè)面會(huì)直接頂?shù)狡聊坏捻敳咳俚拢a(chǎn)品直呼不能接受。童芹。故放棄涮瞻！
至此呢，可能已經(jīng)耗費(fèi)數(shù)小時(shí)時(shí)間了假褪，正當(dāng)一籌莫展的時(shí)候呢署咽，用F12在控制臺(tái)看到了一個(gè)另我比較敏感的信息。如下圖：
這是uniapp 使用了webview標(biāo)簽后轉(zhuǎn)換后的頁(yè)面生音，赫然看見video標(biāo)簽竟然被一層iframe標(biāo)簽包裹著宁否。立馬聯(lián)想到我的替代方案不也是使用了iframe導(dǎo)致功能不好使么？缀遍！所以基本可以斷定是iframe的問(wèn)題慕匠。。
于是乎看看官網(wǎng)域醇，有這么一句也不是特別明顯：
進(jìn)到特征策略基本上就會(huì)明白為什么了台谊。
事實(shí)證明我分析的還是正確的冤寿，雖然配置起來(lái)超簡(jiǎn)單。當(dāng)然這一過(guò)程也鍛煉了自己解決問(wèn)題的思路青伤，最后完美解決。
<template>
<view>
<u-navbar :fixed="true" :autoBack="true" ></u-navbar>
<!-- 設(shè)置 allow="fullscreen" 設(shè)置為true時(shí)殴瘦，可以通過(guò)調(diào)用 <iframe> 的 requestFullscreen() 方法激活全屏模式 -->
<web-view :class="getClassList()" allow="fullscreen" :src="thridLink"></web-view>
</view>
</template>
其實(shí)也就這一句：allow="fullscreen"狠角，弄了半天，自嘲下順帶記錄over~
