vue移動端webview視頻輕應用

標籤：技術   com   github   比較   初始化   isp   後端   移動端   c#   

頁面：列表頁，詳情頁。

使用的技術：vue，vue-resource，vue-router。

依賴包：video.js

後端：三個介面（修改及新增）

遇到的問題：

1，列表進入詳情，視頻不初始化，直接在詳情重新整理初始化。

2，列表上划下劃元素空白。

過程：

比較簡單的輕應用，只有列表頁詳情頁，地址後台配置，原生入口。

第一次開發視頻相關的頁面，過程中遇到一個問題，列表進入詳情頁面，視頻沒有渲染，斷點分析，在非同步擷取到視頻地址之前，video標籤已經渲染了，新擷取的值沒有成功渲染。所以這裡加了一個watch監控vue定義在data裡的資料，改變的時候賦值並初始化video賦值在一個data資料。

由於是需要開啟緩衝的，所以在watch裡加了判斷，watch觸發的時候判斷是否存在初始化的video，如果存在則登出並將data資料賦值為null。由於登出會將video節點也刪除，所以需要重新createElement並插入到html裡。然後再初始化video。

列表布局的時候使用了css3 transform來垂直置中，架構中有一條backface-visibility:hidden;，這樣會使得列表下划上劃的時候元素空白，所以需要設定為backface-visibility:visible;

<代碼圖片後補>

參考：
video.js
vue-video-player   參考了dispose方法

vue移動端webview視頻輕應用