在H5+ 實現混合app的頁面中實現視頻的展示，進度條以及全屏的實現，設置窗體自定義的導航欄、以及返回返回鍵業務場景：點擊按鈕出現一個視頻播放的窗口，該窗口可以根據手機的橫豎屏來調整視頻的顯示，以及具有全屏效果，進度條展示，視頻內部有返回鍵可以取消窗口返回上一個界面，這邊我使用的是Vue的前端框框架通過打包形成混合app的方式。html標簽與 H5 api 比較：因為混合app的打包我們可以使用html通過hbuilder打包形成app的展示界面，所有之前有想過使用video標簽來實現視頻的效果，標簽對于進度的支持也是滿足的，但是標簽對于全屏以及根據重心調整的支持較差，并且重要的是樣式的修改是費事費力的。所以我們使用h5+ 提供的api來實現基本的視頻展示1

webView: Webview模塊管理應用窗口界面，實現多窗口的邏輯控制管理操作。通過plus.webview可獲取應用界面管理對象。

video:Video模塊管理多媒體視頻相關能力，可用創建視頻播放控件，直播推流控件等。

1.首先我們創建一個窗口，作為承載一個視頻的載體，代碼如圖1

行1：plus.webview.create()?設置創建一個video的窗口 方法的參數在文檔有，重要的設置窗體的配置 webviewStyle 如圖2

注意：我們想要的效果是全屏的時候視頻滿屏，有返回鍵可點擊關閉窗口，于是我們使用窗體自定義導航欄圖3 的效果只顯示物理返回鍵，將導航欄設置為透明就可以達到效果

圖3

設置titleNView的樣式參數圖4

圖4

注意：設置backButtonAutoControl 為close 這樣的話可以將窗口內部的物理返回鍵設置為點擊是關閉窗口，不然的話點擊之后設置的虛擬的物理返鍵會直接退出

圖5

圖6

2.設置視頻

行2：設置一個視頻的對象，使用的src 來實現的，videoStyle的參數可以在官網找到

行3：將video的視頻添加到設置好的窗口里面

行3：顯示窗口

圖7

圖8

總結

以上是生活随笔為你收集整理的html5 video全屏api,H5+ app使用多媒体（video、webview）API视频展示以及全屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。