Vue2-接入H5直播点播播放器(flv\mp4)

简单介绍两个可以在H5上播放视频流的播放器

一、LivePlayer H5直播|点播播放器

H5直播/点播播放器，使用简单，功能强大，支持WebRTC、MP4、m3u8/HLS、HTTP-FLV/WS-FLV、RTMP播放等；支持直播和点播播放，自动检测IE浏览器兼容播放；具体详见官方文档。

1.0、第一步接入SDK（我使用的是Vue2 cli)

npm install @liveqing/liveplayer

Vue2 cli创建.png

按照上面命令集成.png

1.1、第二步，这一步很关键(非常重要，已踩坑)

这一步很关键(非常重要，已踩坑).png

这一步很关键.png

这一步很关键01.png

以上截图我怕文字表达不清，只能截图描述细致一些，都是坑，踩的很平了。接下来在这个public目录下的index.html里面加入刚才粘贴的文件路径

加入刚才粘贴的文件路径.png

加入刚才粘贴的文件路径01.png

完成这些基本就没问题了，纳爱斯！

1.2、第三步，就是使用它了

引入@liveqing/liveplayer

页面展示代码

CSS代码

以上代码均是全部(代码里所含链接发布时全改为无效链接)

flv视频直播展示.png

点播演示.png

这是实现的第一个播放器效果实现。上面例子代码

二、EasyPlayer.js播放器

集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大；EasyPlayer.js文档地址

2.0、第一步接入SDK（我使用的是Vue2 cli-同上)

npm install @easydarwin/easyplayer --save

npm install @easydarwin/easyplayer --save.png

2.1、第二步，这一步很同样很关键不要马虎，要细致

不要马虎，要细致.png

public文件夹下.png

接下来操作index.html

引入复制文件路径.png

到这里最重要的步骤完成，接下里就不会出错了

2.2、第三步，同样就是使用它了

直接上代码

上效果展示一下

上效果展示一下.png

截止到今天只用了这两个播放器，其他的播放器没用过了，示例01LivePlaye的播放器相对于示例02EasyPlayer播放器会有延时1秒钟，EasyPlayer看文档说是很好用的，没有延时，比LivePlaye好用，值得推荐！！！EasyPlayer示例代码