使用vue-video-player实现直播的方式

文章来源： 学习通http://www.jaxp.net/

目录

• 一、安装vue-video-player
• 二、使用 vue-video-player

课前准备：直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html

摘要：在H5页面实现观看直播+视频回放；在开发期间使用过video.js、mui-player等插件，发现这些video插件对移动端的兼容性都不友好，最后发现一个在移动端兼容不错的插件——vue-video-player

场景：

移动端H5页面，项目是vue搭建的，使用的是HLS协议以m3u8结尾的直播流

一、安装vue-video-player

播放HLS视频流需要安装 videojs-contrib-hls插件，播放RTMP视频流则安装 videojs-flash插件，hls插件与flash插件同时使用时flash插件需要在hls插件之前引入；（资料上讲安装vue-video-player时会自动安装hls插件，实际操作中并没有，还是自己手动安装吧！）

安装方式1:

CDN方式，直接在html文件头部引入文件:
　　<link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
　　<script type="text/javascript" src="path/to/video.min.js"></script>
　　<script type="text/javascript" src="path/to/vue.min.js"></script>
　　<script type="text/javascript" src="path/to/dist/vue-video-player.js">
　　</script>
　　　　<script type