前幾個星期接到公司一個項目，要用webview在客戶端上播視頻，作為一個前端實習生，這種需求真是蛋疼……一不知webview是何方神聖，二不知咋調試……
下面就是蛋疼的開始：
尋找調試工具：好，非weinre莫屬了，又是node的，又是npm的……且行且珍惜（雖然UC瀏覽器有個開發者版本，但調試麻煩，沒有weinre靈活。）
項目的視頻抓取自新浪和優酷
①抓來的優酷視頻是個flash（下面順便把優酷這個坑爹的也說了吧，最后想了下，還是在另外一片隨筆發吧），直接嵌到(ui)webview里播放就行（已有client_id了）
②抓來的新浪視頻是個mp4文件（或者說視頻源鏈接吧），這里直接用h5標簽video進行播放，這就是蛋疼的開始。
webview在安卓上問題還是不大的，除了三星，小米2等有一些小問題外，其他安卓端視頻播放都沒有問題。
下面要解決的就是ios的問題了！因為點擊視頻播放的時候，ios中uiwebview把video或者flash調用了native播放器，叫什么我不記得了，好像有兩種吧，額，這不是重點。
一路上的坑：
1、遇到的第一個坑！
需求是這樣的：產品說要在用戶點擊視頻的時候，彈出一個框提示用戶當前網絡狀態（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'; } };
2、遇到的第二個坑！
坑的描述：用戶看到一半不想再看了，然后點擊了完成，退出了全屏播放。用戶還沒有離開該文章頁面，這時當用戶再次點擊進入播放的時候，就不會自動播放了！！而且要點擊播放按鈕兩次才會播放視頻！！
這個問題實在是太蛋疼了！！先是直接問了客戶端的同事能不能控制播放？不能……好吧，只能硬着頭皮搜啊搜，搜啊搜，搜出來都是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);
3、第三個坑：
這個坑就是ios7和ios8上webview的區別，ios7叫uiwebview，ios8上改名叫webview了！！項目的app為了兼容ios7用了uiwebview來弄的，ios7和ios8下面對css樣式解析也有所不同，這個問題沒有把代碼保留下來，因為當時也沒有去刨根問底的找問題（現在估計是渲染內核的問題），直接用weinre調試好了。
4、最后一個坑：
當用戶點擊完成后時，也就是退出全屏，視頻縮小，問題就在於當視頻縮小時，停止的位置不是視頻原本的位置！上圖說明：
這個問題現在也沒有解決，因為只有在一些手機上會，有些又很正常。如果你有解決方案，歡迎分享！！
這里就不貼全部代碼了，寫得也比較渣~~大神路過，文章可能寫得很一般，小弟求指點。
各位有更好的方式可以實現，不妨分享下！！