实习快要结束，想把实习项目的一部分记录一下
（项目创建就略过了）
一、 播放器基本实现
采用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标签下需要用到播放器的位置写入播放器标签
<div class="video-wrapper">
<video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
</div>
5. 在data中写入基本参数
播放器基本参数
6. 打开页面之后效果图
效果图（内部接口~打个码所以~直播源是找的中央一套的）
二、切换视频源/视频类型（也可以播放音频）
在想要的按钮上绑定一个点击事件即可，以下是我写的点击事件（用了封装过的axios向后端发起请求得到数据）
直播（hls直播流）的type就用 application/x-mpegURL
点播的type就用 video/mp4
以上就是实习项目中关于移动端播放器的一部分内容
如有错误请各位大大指点一下 欢迎质疑
网友评论
地址是https://github.com/yrZhaoweb/LS-mobile
内部接口 你直接给写死看看会不会出问题