ios上uiwebview的一些實用技巧

時間 2019-11-20

標籤 ios uiwebview 一些實用技巧欄目 iOS 简体版

原文原文鏈接

前幾個星期接到公司一個項目，要用webview在客戶端上播視頻，做爲一個前端實習生，這種需求真是蛋疼……一不知webview是何方神聖，二不知咋調試……css

下面就是蛋疼的開始：html

　 尋找調試工具：好，非weinre莫屬了，又是node的，又是npm的……且行且珍惜（雖然UC瀏覽器有個開發者版本，但調試麻煩，沒有weinre靈活。）前端

　　項目的視頻抓取自新浪和優酷node

　　①抓來的優酷視頻是個flash（下面順便把優酷這個坑爹的也說了吧，最後想了下，仍是在另一片隨筆發吧），直接嵌到(ui)webview裏播放就行（已有client_id了）ios

　　②抓來的新浪視頻是個mp4文件（或者說視頻源連接吧），這裏直接用h5標籤video進行播放，這就是蛋疼的開始。web

　　webview在安卓上問題仍是不大的，除了三星，小米2等有一些小問題外，其餘安卓端視頻播放都沒有問題。npm

　　下面要解決的就是ios的問題了！由於點擊視頻播放的時候，ios中uiwebview把video或者flash調用了native播放器，叫什麼我不記得了，好像有兩種吧，額，這不是重點。瀏覽器

一路上的坑：網絡

一、遇到的第一個坑！app

需求是這樣的：產品說要在用戶點擊視頻的時候，彈出一個框提示用戶當前網絡狀態（wifi下不提示），這個用js是無法作的吧（我是作不了了）。

而後ios客戶端那邊給了我一個答覆，我能夠在網頁發一個跳轉連接，客戶端能夠捕捉到，我就直接用window.location.href作了跳轉，客戶端也收到了信息，也給出了網絡提示。

看到這裏，也許你會說，問題解決了！！我也想……

問題在這裏，給出了提示後，視頻同時也開始播放了啊啊，那這提示有毛用

好，這時候首先想到了一個解決方案，就是給video加一個遮罩層，是用戶單擊webview時，首先單擊的是這個遮罩層，而不是video標籤。看似這個方法是解決了問題，剛開始遮罩層是佔滿webview的，看不到video標籤的播放按鈕，可是uiwebview卻徹底忽視了這個遮罩層！！！爲何？我也不知道……

下面是個人解決方案：

首先，用戶單擊視頻的時候，我用js發了一個跳轉，客戶端截取了這個跳轉連接並給出提示，而後提示的同時視頻也開始播放了，有遮罩的狀況同樣。猜想當webview發如今頁面中有video時，默認單擊調用native播放器進行播放

在video已經被遮罩的狀況下，個人作法是，將video的css屬性visibility設置爲hidden，當用戶在彈出的網絡提示中選擇播放，客戶端再用js函數來改變這個屬性值。這樣算是蹩腳的解決了問題，下面是代碼。

 1 <!doctype html>
 2 <html lang="zn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
 6     <meta name="HandheldFriendly" content="true" /> 
 7     <style>
 8  html,body{
 9  width: 100%;
10  height: 100%;
11  margin: auto;
12  background: black;
13  overflow: hidden;
14         }
15  #wrap-v {
16  width: 100%;
17  height: 100%;
18  visibility: hidden;
19  margin: auto;
20  position: absolute;
21  top: 0;
22  right: 0;
23  bottom: 0;
24  left: 0;
25         }
26  #video {
27  width: 100%;
28  height: 100%;
29  margin: auto;
30  position: absolute;
31  top: 0;
32  right: 0;
33  bottom: 0;
34  left: 0;
35         }
36  .shade-v {
37  position: relative;
38  width: 100%;
39  height: 100%;
40  z-index:100;
41         }
42  span{
43  height:70px; 
44  width:70px; 
45  display:block; 
46  position: absolute;
47  margin: auto;
48  top: 0;
49  right: 0;
50  bottom: 0;
51  left: 0;
52         } 
53 
54  .play-b{
55  background: #CACACA; 
56  border-radius:40px;
57         }
58  .play-b:before{
59  content: '';
60  height: 0;
61  width: 0;
62  display: block;
63  border: 20px transparent solid;
64  border-right-width: 0;
65  border-left: 33px #747474 solid;
66  position: absolute;
67  top: 15px;
68  left: 24px;
69         }
70     </style>
71 </head>
72 <body>
73 <div id="wrap-v">
74     <video id="video" controls="controls">
75         <source type="video/mp4" src="#">
76     </video>
77 </div>
78 <div id="shade-v" class="shade-v">
79     <span class="play-b"></span>
80 </div>
81 </body>
82 </html>

//js代碼
function playVideoApp(){ // ios客戶端調用該函數
        shade_v.style.display = 'none'; document.getElementById('wrap-v').style.visibility = 'visible'; video.play(); // 自動進入全屏
 } var shade_v = document.getElementById('shade-v'); shade_v.onclick = function () { if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ // ios設備
            window.location.href = 'xxxx://playingVideo'; } };

二、遇到的第二個坑！

坑的描述：用戶看到一半不想再看了，而後點擊了完成，退出了全屏播放。用戶尚未離開該文章頁面，這時當用戶再次點擊進入播放的時候，就不會自動播放了！！並且要點擊播放按鈕兩次纔會播放視頻！！

這個問題實在是太蛋疼了！！先是直接問了客戶端的同事能不能控制播放？不能……好吧，只能硬着頭皮搜啊搜，搜啊搜，搜出來都是objectC的代碼……完全無助，不過仍是找到了，最後仍是讓我找到了一篇日語文章，呵呵……果斷點進原文，英文文檔啊！上！

原來是safari開發者文檔，好吧我孤陋寡聞了

//原文描述：
Full-Screen Event and Properties OS X and iOS behave differently in terms of detecting which HTML elements can be brought full-screen. On iOS, you can take any video full-screen. On OS X, you can take any HTML element full-screen. Although they share the same webkitRequestFullscreen and webkitExitFullscreen methods, the two platforms have different event listeners: OS X: the webkitfullscreenchange event fires when an element enters or exits full-screen mode. iOS: the webkitbeginfullscreen and webkitendfullscreen events fire when a video enters and exits full-screen mode, respectively. Listen for these events to detect changes in screen presentation. Take a look at the HTML5VideoEventFlow sample code project to get an interactive understanding of the order in which these and other video playback events happen. The document.webkitFullscreenElement property contains the element that is in full-screen mode. Check if this property is defined to determine if the user is currently in full-screen mode. The document.fullscreenEnabled property detects whether the browser supports the full-screen API, not whether an element is currently full-screen.

英語渣就不翻譯了，上面有兩個事件webkitbeginfullscreen和webkitendfullscreen是關鍵處，這兩個事件觸發的時間爲：webkitbeginfullscreen是在視頻全屏後觸發，webkitendfullscreen是在視頻退出全屏後觸發（也就是點擊完成按鈕後觸發）

下面是個人解決方案：

用js綁定webkitbeginfullscreen事件，當再次用戶點擊視頻播放時，在事件回調函數中執行video的play函數，問題解決。代碼看起來像這樣子：

video.addEventListener('webkitbeginfullscreen', function () { video.play(); }, false);

三、第三個坑：

這個坑就是ios7和ios8上webview的區別，ios7叫uiwebview，ios8上更名叫webview了！！項目的app爲了兼容ios7用了uiwebview來弄的，ios7和ios8下面對css樣式解析也有所不一樣，這個問題沒有把代碼保留下來，由於當時也沒有去刨根問底的找問題（如今估計是渲染內核的問題），直接用weinre調試好了。

四、最後一個坑：

當用戶點擊完成後時，也就是退出全屏，視頻縮小，問題就在於當視頻縮小時，中止的位置不是視頻本來的位置！上圖說明：

這個問題如今也沒有解決，由於只有在一些手機上會，有些又很正常。若是你有解決方案，歡迎分享！！

這裏就不貼所有代碼了，寫得也比較渣~~大神路過，文章可能寫得很通常，小弟求指點。

各位有更好的方式能夠實現，不妨分享下！！