UIWebView 不自動(dòng)全屏播放視頻

一、介紹：

讓 H5 里面的視頻播放變得更加優(yōu)雅！

原文在我博客： https://www.yfmingo.cn/2017/08/24/UIWebVIew-play-video/


iOS 客戶端APP里面的的H5頁(yè)面如果含有視頻，當(dāng)我們點(diǎn)擊播放時(shí)就會(huì)調(diào)用iOS原生自帶的播放器進(jìn)行播放。最可惡的是還自動(dòng)自己全屏播放了。

效果圖：

這樣的用戶體驗(yàn)總會(huì)感覺到無比的尷尬。公司產(chǎn)品往往幻想的效果是這樣：

不要自動(dòng)全屏播放。要內(nèi)嵌在網(wǎng)頁(yè)里面播放。視頻框可以跟隨網(wǎng)頁(yè)內(nèi)容上下滾動(dòng)。

理想效果圖：

二、 實(shí)現(xiàn)代碼：

（1）、H5 端要實(shí)現(xiàn)的代碼如下：

<video id="video" width="100%" autobuffer="true" x5-video-player-type='h5' x5-video-player-fullscreen='true' playsinline webkit-playsinline controls='controls' poster="http://img.nntv.cn/images/2017-6-25/5OdZ806_1498400363126_G8a72i9_1.jpg" src="http://mvod.nntv.cn/vod/local/2017/06/25/5OdZ806_1498400363126_G8a72i9_2812.mp4"
                   onclick="playVideo('http://mvod.nntv.cn/vod/local/2017/06/25/5OdZ806_1498400363126_G8a72i9_2812.mp4');">
                不支持視頻播放
            </video>

重點(diǎn)代碼如下：

x5-video-player-type='h5' x5-video-player-fullscreen='true' playsinline webkit-playsinline

說明：

• iOS10以上H5視頻不自動(dòng)全屏播放識(shí)別 playsinline這個(gè)屬性
• iOS10以下H5視頻不自動(dòng)全屏播放識(shí)別 webkit-playsinline這個(gè)屬性

（2）、iOS端要實(shí)現(xiàn)的代碼如下：

_webView.allowsInlineMediaPlayback = YES;

設(shè)置UIWebView 的allowsInlineMediaPlayback屬性為YES即可。

三、其他問題：

這樣設(shè)置了以后，你的 UIWebView 里面的視頻就已經(jīng)實(shí)現(xiàn)點(diǎn)擊播放不會(huì)自動(dòng)全屏了。

但是當(dāng)你仔細(xì)測(cè)試后發(fā)現(xiàn)。當(dāng)這個(gè)頁(yè)面消失后H5里面的視頻仍然在繼續(xù)播放。

解決當(dāng)頁(yè)面消失時(shí)H5視頻不自動(dòng)播放方法：

• 方法一 ：

    - (void)viewDidDisappear:(BOOL)animated {
        [super viewDidDisappear:animated];
        [_webView reload]; //重新加載 防止web中正在播放的視頻頁(yè)面消失后還在播放。 
    }
  

• 方法二：

     - (void)viewDidDisappear:(BOOL)animated {
      //新跳轉(zhuǎn)一個(gè)空白頁(yè) 防止web中正在播放的視頻頁(yè)面消失后還在播放。
        [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"about:blank"]]]; 
    }
  

  此方法的弊端 ：
  當(dāng)當(dāng)前H5頁(yè)面不是單純H5時(shí)，再次拿如下圖來描述：
  

  最新評(píng)論以上全部是H5 ，評(píng)論列表是原生。底部四個(gè)按鈕是原生。

  當(dāng)我們點(diǎn)擊這些原生元素進(jìn)入次級(jí)詳情頁(yè)面時(shí)，然后再返回就會(huì)發(fā)現(xiàn)H5頁(yè)面已經(jīng)變成了我們剛剛新建的空白頁(yè)了。

四、補(bǔ)充技能：

以上示例中，用H5拼接詳情頁(yè)然后下面拼接原生評(píng)論列表。這個(gè)技巧在日常開發(fā)中很實(shí)用。很可能有機(jī)會(huì)使用到。那類似這種需求怎么準(zhǔn)確拿到H5內(nèi)容的高度呢？

請(qǐng)進(jìn)入我的另外一篇文章傳送門：精確獲取 UIWebView 的高度

還一篇UIWebView實(shí)用技能：
UIWebView 加 MJRefresh 同時(shí)解決底部黑影問題

五、聯(lián)系：

• 聯(lián)系郵箱：yfmingo@163.com
• 聯(lián)系網(wǎng)站：www.yfmingo.cn