Vue示例之使用视频播放

最近接手新项目，从后端变前端，有一点前端基础但是对于Vue一无所知。

一切从零开始，此次需求是项目中有一个视频播放功能。以下做一个简单示例共大家参考。

使用的插件是 vue-vedio-player

输入如下命令

在main.js里面导入并引用

视频路径写法：

1.视频上传到服务器写法（在JS中找到src更换为你的视频路径）

2.本地视频路径写法

在assets目录下新建video文件夹导入视频testVideo即可

设置视频封面: poster

图片路径在assets目录下

vue分成视频帧与声音帧对于安全要求不严格的，可以采用这种方式。因为这种全路径一般会长期有效，仅仅通过src=url，不太好做鉴权。 可以通过nginx,apache，tomcat等服务器，配置出文件的url，后端返回给前端，前端放入url直接使用。也可以后端提供一个有参get请求接口，前端拼接出该接口的url，参数在url后，根据参数不同，后端接口返回不同数据。该种方式最简单，不再上代码。

---