DCloud-Video：Html5 Video 實現方案

ylbtech-DCloud-Video：Html5 Video 實現方案

 

1.返回頂部

1.一、

http://ask.dcloud.net.cn/article/569

1.二、

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點擊全屏按鈕進入全屏後,沒法退出全屏-由於進入全屏後,全屏按鈕不見了)
緣由分析: 多是手機廠商擅自劫持了瀏覽器或者篡改了瀏覽器實現方式
解決方法:
目前沒法解決,在這類機型中,建議直接採用非內聯模式播放或者是儘可能不要手動進入全屏

1.六、 示例Demo
注: 示例視頻也可本身更改成本身的網絡視頻或者本地視頻,因爲視頻文件太大,因此上傳時就刪掉了

見源碼附件

• project.dcloud_.html5Video_.rar

二、

2.返回頂部

 

3.返回頂部

 

4.返回頂部

 

5.返回頂部

 

 

6.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。