前幾個星期接到公司一個專案，要用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函式來改變這個屬性值。這樣算是蹩腳的解決了問題，下面是程式碼。
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="HandheldFriendly" content="true" />
<style>
html,body{
width: 100%;
height: 100%;
margin: auto;
background: black;
overflow: hidden;
}
#wrap-v {
width: 100%;
height: 100%;
visibility: hidden;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#video {
width: 100%;
height: 100%;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.shade-v {
position: relative;
width: 100%;
height: 100%;
z-index:100;
}
span{
height:70px;
width:70px;
display:block;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
} .play-b{
background: #CACACA;
border-radius:40px;
}
.play-b:before{
content: '';
height: 0;
width: 0;
display: block;
border: 20px transparent solid;
border-right-width: 0;
border-left: 33px #747474 solid;
position: absolute;
top: 15px;
left: 24px;
}
</style>
</head>
<body>
<div id="wrap-v">
<video id="video" controls="controls">
<source type="video/mp4" src="#">
</video>
</div>
<div id="shade-v" class="shade-v">
<span class="play-b"></span>
</div>
</body>
</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、最後一個坑：
當用戶點選完成後時，也就是退出全屏，視訊縮小，問題就在於當視訊縮小時，停止的位置不是視訊原本的位置！上圖說明：
這個問題現在也沒有解決，因為只有在一些手機上會，有些又很正常。如果你有解決方案，歡迎分享！！
這裡就不貼全部程式碼了，寫得也比較渣~~大神路過，文章可能寫得很一般，小弟求指點。
各位有更好的方式可以實現，不妨分享下！！