介绍
小编给大家分享一下vue-video-player如何实现实时视频播放的案例,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
监控设备播放效果如下
1, vue项目安装vue-video-player
npm安装vue-video-player——保存
2,编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources [0]。src赋值就可以播放了,具体操作有注释)
注:风格样式部分用了lang=scss,如果自己的项目没用他请用自己的方式改一下样式部分避免报错
& lt; template>
& lt; div类=皏ideo-js"祝辞
& lt; div v=皏ideoSrc=https://www.yisu.com/zixun/==" class="没有视频">
暂未播放视频
<视频播放器v-else class="视频播放器vjs-custom-skin”
ref="放像机"
:playsinline=" true "
:选项=" playerOptions ">
<>脚本
从“video.js”进口videojs
进口的video.js/dist/video-js.css '
进口的vue-video-player/src/custom-theme.css '
从“vue-video-player”进口{放像机}
导入“videojs-flash”
从“进口SWF_URL videojs-swf/dist/video-js.swf '
videojs.options.flash。swf=SWF_URL//设置闪光灯路径,Video.js会在不支持html5的浏览中使用flash播放视频文件
出口默认{
名称:“videojs”,
组件:{
放像机
},
数据(){
返回{
videoSrc:”,
playerOptions: {
生活:没错,
播放:真的,//如果如此,浏览器准备好时开始播放
低调:假的,//默认情况下将会消除任何音频
循环:假的,//是否视频一结束就重新开始
预加载:'汽车',//建议浏览器在<视频>加载元素后是否应该开始下载视频数据翻浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
aspectRatio: 16:9的,//将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例——用冒号分隔的两个数字(例如“16:9的”或“4:3”)
液体:真的,//当真实时,视频。js球员将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
controlBar: {
timeDivider:假的,
durationDisplay:假的,
remainingTimeDisplay:假的,
currentTimeDisplay:假的,//当前时间
volumeControl:假的,//声音控制键
playToggle:假的,//暂停和播放键
progressControl:假的,//进度条
fullscreenToggle:真//全屏按钮
},
techOrder (“flash”)://兼容顺序
闪光:{
hls: {
withCredentials:假
},
主权财富基金:SWF_URL
},
来源:[{
类型:“rtmp/flv”,
src://视频地址——改变它的值播放的视频会改变
}),
notSupportedMessage:“此视频暂无法播放,请稍后再试”//允许覆盖Video.js无法播放媒体源时显示的默认信息。
}
}
}
}>
.video-js {
宽度:100%;
高度:100%;
.no-video {
显示:flex;
高度:100%;
字体大小:14 px;
text-align:中心;
justify-content:中心;
对齐项目:中心;
}
}> 3,父组件调用视频播放组件,点击“播放视频”替换组件里的视频流地址播放实时视频
& lt; template>
& lt; div类=癮bout"祝辞
& lt;视频播放器ref=皃layerObj"祝辞& lt;/video-player>
& lt; @click=皃layVideo"祝辞播放视频& lt;/a>
& lt;/div>
& lt;/template>
& lt; script>
从& # 39;进口放像机。/. ./. ./组件/放像机# 39;
出口默认{
名称:& # 39;关于# 39;
组件:{
放像机
},
数据(){
返回{}
},
方法:{
playVideo () {
美元。参考文献[& # 39;playerObj& # 39;]。videoSrc=https://www.yisu.com/zixun/皉tmp://xxxxxxxx”
美元。参考文献[' playerObj '] .playerOptions.sources [0]。src=' rtmp://xxxxxxxx '
}
}
}
4, vue.config。js文件如下:需要加入的是chainwebpack配置
//vue.config.js
const path=需要()& # 39;path & # 39;
const webpack=要求(& # 39;webpack& # 39;)
模块。出口={
baseUrl: process.env。NODE_ENV===& # 39;生产# 39;,# 63;& # 39;/bcmp-web & # 39;:& # 39;/& # 39;
outputDir: process.env。NODE_ENV===& # 39;生产# 39;,# 63;& # 39;bcmp-web& # 39;:& # 39;经销# 39;
lintOnSave:没错,
productionSourceMap:假的,
devServer: {
开放:没错,
主持人:& # 39;0.0.0.0 # 39;
端口:9005
https:假的,
紧随:假的,
代理:零
},
configureWebpack: {
插件:[
新webpack.ProvidePlugin ({
jQuery: & # 39; jQuery # 39;
美元:& # 39;jquery # 39;
& # 39;windows.jQuery& # 39;: & # 39; jquery # 39;
}）
]
},
chainWebpack:配置=比;{
config.module
.rule (& # 39; swf # 39;)
test (/\ . swf/美元)
.use (& # 39; url-loader& # 39;)
.loader (& # 39; url-loader& # 39;)
.options ({
限制:10000
}）
},
pluginOptions: {
& # 39;style-resources-loader& # 39;: {
预处理:& # 39;scss # 39;
模式:[
路径。解决(__dirname & # 39;。/src/资产/baseStyle/var.scss& # 39;),
路径。解决(__dirname & # 39;。/src/资产/baseStyle/mixin.scss& # 39;)
]
}
}
}
