Html5 Video 實現方案

來源：http://ask.dcloud.net.cn/article/569

源碼下載

前言: 最近項目中須要用到html5 視頻播放功能,因而稍微研究瞭解了下,遇到了不少坑,特此記錄下.

1、 Html5 Video
參考來源: http://www.xuanfengge.com/html5-video-play.html
(這篇博文確實幫助很大)

1.一、 目的
將Html5 Video功能應用到實際項目中,針對不一樣的平臺和環境,進行個性化處理。
基本只考慮webkit瀏覽器兼容問題

1.二、 Html5 Video支持格式
只支持: .mp4後綴(.h264編碼格式),和.webm後綴(專用web視頻格式),以及.ogg後綴(音頻文件)
注意: Html5 Video 能夠添加多個source源來進行兼容適配,這樣,當第一個源讀取出問題時會自動讀取下一個源. 好比能夠同時在前面加上.webm和.mp4源,這樣一個出錯時會自動讀取另外一個可用源(由於不一樣瀏覽器,支持的格式是不同的)
可是,Hybird模式的 Android 下,有些機型只能讀取第一個source來源(測試華爲和聯想都是),因此也就是說在這種狀況下,要確保第一個source源是正確的
各大瀏覽器兼容如圖所示:
見圖1

1.三、 不一樣平臺環境和對應實現方案
說明: 這裏分爲兩大塊,普通瀏覽器環境(pc和手機,主要是移動端,pc不作特別處理)和Hybird模式的APP環境(Android和iOS).
注: Html5 video能夠播放本地視頻或者網絡視頻
1.3.一、 普通瀏覽器環境
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統一處理方法處理後,點擊圖片手動隱藏圖片,設置視頻大小,手動播放視頻.
注: 播放效果則由各大瀏覽器自行實現

手機端瀏覽器實現的不一樣效果,好比: 
QQ瀏覽器(包括QQ客戶端內置的瀏覽器):播放時會自動進入全屏
華爲自帶瀏覽器: 正常小窗口播放

1.3.二、 Hybird App環境
說明: 內聯播放是指直接在video標籤中播放視頻,沒有必要進入全屏

1.3.2.一、 Android內聯播放
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統一處理方法處理後,點擊圖片手動隱藏圖片,設置視頻大小,手動播放視頻.
*Android內聯播放須要注意,必須開啓硬件加速,因爲有些Android手機 webview是默認關閉硬件加速的,因此必須在建立這個帶視頻播放的webview時手動添加 硬件加速屬性才行.(詳情見plus建立webview的style)

style.hardwareAccelerated = true;

1.3.2.二、 iOS內聯播放
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統一處理方法處理後,點擊圖片手動隱藏圖片,設置視頻大小,手動播放視頻.
*內聯播放注意要點,因爲iOS下默認是全屏播放的,因此須要通過設置才能正常內聯播放
第一步:在項目的manifest裏面配置容許webview內聯播放

"plus": {
        "splashscreen": {
            "autoclose": true,/*是否自動關閉程序啓動界面，true表示應用加載應用入口頁面後自動關閉；false則需調plus.navigator.closeSplashscreen()關閉*/
            "waiting": true/*是否在程序啓動界面顯示等待雪花，true表示顯示，false表示不顯示。*/
        },
        "allowsInlineMediaPlayback": true,/*設置ios下容許內聯播放*/
        "popGesture": "close"

第二步: 建立video標籤時,手動加上內聯播放的屬性(iOS不支持preload)

<!--
                    讓ios支持內聯播放,必須添加 webkit-playsinline 標籤
                -->
                <video webkit-playsinline id="videoMedia" controls="controls" preload>

這樣iOS手機在播放的時候纔會採用內聯播放

1.3.2.三、 Android非內聯播放
*經過NJS使用原生播放器來播放視頻,傳入的url能夠是本地的或網絡的地址
*用 Video 視頻統一處理方法處理後,點擊圖片以後,圖片保持不變(因此沒有必要隱藏圖片),直接獲取視頻的資源地址,傳給原生播放器播放
注: 這種模式下,性能要比直接html5自帶播放器播放高

1.3.2.四、 iOS非內聯播放
*用Html5 Video 自帶的播放欄控件(非內聯播放須要去除特定內聯屬性」webkit-playsinline」,這樣才能全屏播放)

if(!isInlinePlay){
                    //若是是非內斂,ios須要去除內聯樣式
                    mediaTarget.removeAttribute('webkit-playsinline');
                }

*用 Video 視頻統一處理方法處理後,點擊圖片以後,圖片保持不變(因此沒有必要隱藏圖片),直接調用video.play()播放視頻(這時候會用一個全屏播放器來播放視頻)

1.3.三、 注意要點
若是採用NJS經過Android原生播放器播放視頻,目前沒法監聽到視頻的一些自定義事件.(以下載中,播放完畢,暫停,播放時間等)
而若是採用Html5 Video自帶播放,這些是能夠經過腳本控制的.
因此選定方案時須要進行衡量
*另外,在Html5 Video播放時,沒法監聽到規定的結束事件seeked,只能在timeUpdate裏面判斷,若是ended爲true就表明結束了.
*在NJS經過Android原生播放器播放時,能夠經過document監聽resume和pause事件判斷是否進入播放和退出播放

1.四、 Tips

1.4.一、 關於Video 視頻統一處理的方案
說明: 因爲將一個<Video>直接顯示在頁面中,會有各類五花八門的播放器效果,如圖:
(這裏引用了參考來源的圖)
見圖2

顯然,體驗效果並很差,因此如今的作法是用一張模擬播放的圖片來替代<Video>所在的地方,而將Video元素設置爲1*1像素大小.而後給圖片設置點擊監聽,監聽到點擊時,播放視頻.
注意: 
*這裏不要用{display: none}或者{width:0;height:0;}的方式，由於這樣視頻元素會處於未激活的狀態，給後續的處理帶來麻煩.
*這裏沒有考慮ios<6和一些低版本的Android的兼容性問題了(這些版本里,沒法直接經過video.play()來播放),由於項目環境基本上要求Android>4.0 iOS 7.0以上的.
*關於點擊圖片播放視頻後,若是是內聯播放模式下(或者是普通瀏覽器),就應該將圖片隱藏,而後將視頻大小設置爲原本的大小(通常爲圖片大小)；若是是非內聯播放模式(全屏模式),就沒有必要隱藏圖片了,由於iOS下會自動打開一個全屏播放器來播放視頻,Android下考慮到Html5 video較卡,因此也會經過NJS使用原生播放器來全屏播放視頻.

1.4.二、 Android NJS播放視屏的實現代碼
說明: 這個是Dcloud論壇中有人分享的

//非內聯模式下的plus下的android纔用到
                var Intent = plus.android.importClass("android.content.Intent");
                var Uri = plus.android.importClass("android.net.Uri");
                var main = plus.android.runtimeMainActivity();
                var intent = new Intent(Intent.ACTION_VIEW);
                var uri = Uri.parse(url);
                intent.setDataAndType(uri, "video/*");
                main.startActivity(intent);

1.4.三、 如何讀取元素的寬高
*在獲取視頻的寬度時,發現用 video.style.width沒法獲取到寬度.
後來查了資料,發現dom.style.width(height)只能獲取在stye直接賦予的值.而若是是經過css樣式表賦予的值是沒法直接獲取的,只能經過dom.offsetWidth(offsetHeight)獲取.
*設置元素寬和高是不要直接在style裏設置,而是最好經過css樣式表賦予
*讀取元素寬和高時,用offsetWidth(offsetHeight)

1.4.四、 關於全屏播放的問題
在PC端webkit瀏覽器下,全屏代碼以下:
進入全屏: videoContainer(對應的dom).webkitRequestFullscreen();
退出全屏: document.webkitCancelFullScreen();
*可是經測試,在手機瀏覽器和Hybird模式下的手機環境中都沒法使用,
應該是手機瀏覽器中video 播放器的全屏模式和pc端的有區別,已經脫離了webkit的全屏組件,而是用原生本身實現的.

1.五、 遇到問題及解決方法

1.5.一、 Video.currentTime 設置值時設置無效,或者變爲0
緣由分析: 
與測試的服務器和端口有關,測試環境是放在hbuild本地瀏覽器的,沒有處理好視頻快進問題,因此會致使每次快進後,視頻都會重置-在某些測試服務器上,則出現快進無效,但不會重置
解決方法:
將網頁用其它正式服務器打開都可正常,如tomcat,wampserver,甚至直接在本地打開也行.

1.5.二、 沒法經過代碼Video.src獲取資源路徑
緣由分析: 
本實例中,Video是經過source添加src的,沒法直接讀取video的src
解決方法:
能夠經過讀取到第一個source的標籤,再獲取source的src
注:原本這個方法有一個缺點就是有可能第一個source的src不可用.可是因爲Android中第一個source必須有用才行.不然沒法正常播放.因此在確保第一個source正確的狀況下能這樣用.

1.5.三、 部分Android機型沒法退出全屏描述:在使用Html5 Video自帶播放器播放時,部分Android機型(如聯想K860點擊全屏按鈕進入全屏後,沒法退出全屏-由於進入全屏後,全屏按鈕不見了)緣由分析: 多是手機廠商擅自劫持了瀏覽器或者篡改了瀏覽器實現方式解決方法:目前沒法解決,在這類機型中,建議直接採用非內聯模式播放或者是儘可能不要手動進入全屏