Vue2.0+vue-video-player 开发移动端 直播/回放 系统

实习快要结束，想把实习项目的一部分记录一下

（项目创建就略过了）

一、 播放器基本实现

    采用vue-video-player  顺序依次是

    1.  安装依赖

          npm install vue-video-player --save

    2.   在main.js中引入

          import VueVideoPlayer from 'vue-video-player';

          Vue.use(VueVideoPlayer);

    3.   在播放器组件中单独添加css和hls

          import "video.js/dist/video-js.css";

          import "vue-video-player/src/custom-theme.css";

          import 'videojs-contrib-hls.js/src/videojs.hlsjs';

     4.  在template标签下需要用到播放器的位置写入播放器标签

         

                

         

      5.  在data中写入基本参数

播放器基本参数

      6.  打开页面之后效果图

效果图（内部接口~打个码所以~直播源是找的中央一套的）

二、切换视频源/视频类型（也可以播放音频）

 在想要的按钮上绑定一个点击事件即可，以下是我写的点击事件（用了封装过的axios向后端发起请求得到数据）

直播（hls直播流）的type就用 application/x-mpegURL

点播的type就用  video/mp4

以上就是实习项目中关于移动端播放器的一部分内容

如有错误请各位大大指点一下  欢迎质疑