1.通过npm引入EasyPlayer(目前EasyPlayer最新版本为5.0.5):
npm install @easydarwin/easyplayer --save
将node_modules下的@easydarwin/easyplayer/dist/component/crossdomain.xml等文件复制到public目录下
![](https://i-blog.csdnimg.cn/blog_migrate/b3d9f93a9fff67180257ad4b725cae11.png)
进入到程序内配置文件
(1)在public下的index.html引入刚刚从node_modules复制过来的组件
上方的jquery需要单独添加,这里直接放到下面可以复制:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
![](https://i-blog.csdnimg.cn/blog_migrate/8e1f17f420c2f435c96ce882f7a709b5.png)
(2)配置vue文件
npm文档地址:https://www.npmjs.com/package/@easydarwin/easyplayer(详细的配置熟悉可以在这里看到)
在线测试连接地址:http://www.easydarwin.org/easyplayer/(测试视频的地址,如果在测试里面能看到视频那大概率是代码出问题了)
![](https://i-blog.csdnimg.cn/blog_migrate/32520ad26f1fa769e26478d5b9065d65.png)
(3)隐藏载入动画
EasyPlayer.js默认是有加载动画以及载入文字的,如果我们不需要,可以在CSS里面隐藏到
![](https://i-blog.csdnimg.cn/blog_migrate/f24a29c1dc4fa1592f41cfb1d0f9dca0.png)
//隐藏视频的载入动画
.easy-player-loading {
display: none !important;
}
![](https://i-blog.csdnimg.cn/blog_migrate/414ca16da4a38ecc7ae9ffa9100e721c.png)
文章来自:http://t.csdn.cn/wxsLI(基于上面的教程又补充了一些东西)