在使用HTML5 video來進行網頁視頻播放遇到的一些問題，總結記錄下。
1.在layer彈出層中使用video標簽無法最大化全屏播放
layer彈出層是一個jQuery插件，提供了一系列的web彈框/層的解決方案 。
但是在layer中使用H5的video標簽作為彈出層來播放視頻，在谷歌中最大化的時候就會出現問題，無法全屏播放。原因是彈出層的“.layer-anim”class樣式影響了元素尺寸的計算。
處理方法即在彈窗時清除layer層中的layer-anim樣式屬性：
layer.open({
type: 2,
title: false,
shadeClose: true,
area: ['500px', '550px'],
content: url,
success: function(layero){
console.log(layero);
//處理layer層中video播放器全屏樣式問題
setTimeout(function() {
$(layero).removeClass('layer-anim');
}, 0);
}
});
具體參考：魚人碼頭的博客
2.layer捕獲頁，捕獲頁面上的video標簽全屏播放異常
layer的捕活頁是將頁面上區域元素進行捕獲，置於彈出層中探出的功能實現方式。具體代碼如下：
//捕獲頁
layer.open({
type: 1,
shade: false,
title: false, //不顯示標題
content: $('.layer_notice'), //捕獲的元素，注意：最好該指定的元素要存放在body最外層，否則可能被其它的相對元素所影響
cancel: function(){
layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', {time: 5000, icon:6});
}
});
當我們使用layer的捕獲頁獲取頁面上的video標簽來實現一個窗口播放的功能，但是 當我們最大化video標簽的時候，發現最大化后的video並不在layer彈框里面，也沒有全屏播放，而是在原始頁面上放大播放了。
解決方案和 1中一樣，去除“.layer-anim”class樣式即可。
3.video 進度條無法拖動
當我們在本地使用video進行網頁播放視頻的時候，視頻的進度條是可以拖動的。然而為什么放在項目中，通過URL播放服務器上的視頻資源時進度條卻無法拖動了呢？ （audio有同樣的問題)。
原因分析：
video有個自帶的屬性currentTime，來設置當前播放位置。進度條無法拖動大有可能是這個 currentTime屬性沒有獲取的到 。為什么currentTime沒有獲取得到呢？原因在於我們服務器上的視頻鏈接返回的Content-Type有問題。
因為我們video src屬性http鏈接需要的Content-Type是 ：video/mpeg4
關於Content-Type參考：
因此解決這樣的問題，我們需要先設置URL
URL realUrl = new URL(url);
// 打開和URL之間的連接
URLConnection conn = realUrl.openConnection();
// 設置文件類型:
conn.setRequestProperty("Content-Type","video/mpeg4");
當然，我們可以考慮下為什么會出現URL的Content-Type不是mp4類型的呢？
是不是使用了Nginx，一般我們關於文件上傳、預覽、下載等的操作都會在一個單獨放在一個服務上。如果使用了Nginx的話，URL發的Content-Type的類型就可能是“application/xxx”。
我們需要在Nginx中將資源路徑配置成真實路徑：
location /resource {
proxy_pass http://localhost:8081/resource/;
}
關於Nginx參考： Nginx中文文檔
4.視頻加載緩慢
一般來說，使用video，除非網絡原因不會出現視頻加載緩慢的問題。若使用了Nginx導致。同3中一樣將資源路徑配置為真實路徑即可。