Vue-rideo-player视频播放插件的使用

git项目地址
参考文章
今天项目中遇到了需要能够查看实时监控视视频的功能，再查阅并摸索下完成实现了此功能，现在此记录一下

使用

1. 安装：

npm install vue-video-player --save

1. 在main.js入口文件中引入

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

这里需要注意，我们如果按照官网上的方式如上代码所示引入，可能会报错找不到
video.js/dist/video-js.css（反正我用的时候没有报错）
这里我们只需要将引入video-js.css的路径改为vue-video-player/node_modules/video.js/dist/video-js.css。
如：require(‘vue-video-player/node_modules/video.js/dist/video-js.css’)。

1. 在页面中引用

<video-player class="video-player"
ref="videoPlayer"
:playsliline="true"
:options="playerOptions">
</video-player>

1. 数据配置项

playerOptions: {
playbackRates: [0.7,1.0,1.5,2.0], //播放速度
autoplay： false，//如果true，浏览器准备好时自动开始播放
muted： flase，//默认情况下将会消除任何音频
loop： false，//导致视频一结束就重新开始
preload： 'auto', //自动播放
language：'zh-CN',
aspectRatio: '16:9', //将播放器至于流畅模式，并在计算播放器动态大小时使用该值
fluid： true， //当true时，Video.js player将拥有流体大小，按比例适应其容器
//实时视频
flash: {
hls: {
withCredentials: false
},
},
source： [{
type: "",  //播放视频种类： 基本视频格式、直播、流媒体等
src： "http://www.html5videoplayer.net/videos/madagascar3.mp4", //视频的url地址
//实时视频流
//type:'rtmp/mp4',
//src: "rtmp://58.200.131.2:1935/livetv/hunantv" //url地址
}]
poster: "../../static/images/test.jpg", //你的封面地址
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,  //进度条
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true  //全屏按钮
}
}}

1. 可以对视屏的播放按钮样式进行调整

如：
// 调整播放器样式
.video-js .vjs-icon-placeholder {
width: 100%;
height: 100%;
display: block;
}

1. 效果图
   视频播放效果图
   
   实时流监控视频效果图（湖南卫视）