vue移动端webview视频轻应用

页面：列表页，详情页。

使用的技术：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方法