vue-video-player⽂档_vue-video-player实现实时视频播放⽅
式代码⽰例
本篇⽂章⼩编给⼤家分享⼀下vue-video-player实现实时视频播放⽅式代码⽰例，⽂章代码介绍的很详细，⼩编觉得挺不错的，现在分享给⼤家供⼤家参考，有需要的⼩伙伴们可以来看看。
监控设备播放效果如下
1、vue项⽬安装vue-video-player
npm install vue-video-player --save
2、编写视频播放组件(放上完整的组件例⼦，⽗组件调⽤时给videoSrc和playerOptions.sources[0].src赋值就可以播放了，具体操作有注释)
注：style样式部分⽤了lang=scss，如果⾃⼰的项⽬没⽤他请⽤⾃⼰的⽅式改⼀下样式部分避免报错
暂未播放视频
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'
videojs.options.flash.swf = SWF_URL // 设置flash路径，Video.js会在不⽀持html5的浏览中使⽤flash播放视频⽂件
export default {
name: 'videojs',
components: {
videoPlayer
},
data () {
return {
videoSrc: '',
playerOptions: {
live: true,
autoplay: true, // 如果true，浏览器准备好时开始播放
muted: false, // 默认情况下将会消除任何⾳频
jquery ajax例子loop: false, // 是否视频⼀结束就重新开始
preload: 'auto', // 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳⾏为,⽴即开始加载视频(如果浏览器⽀持)
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态⼤⼩时使⽤该值。值应该代表⼀个⽐例 - ⽤冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时，Video.js player将拥有流体⼤⼩。换句话说，它将按⽐例缩放以适应其容器。controlBar: {
timeDivider: false,
durationDisplay: false,
remainingTimeDisplay: false,
currentTimeDisplay: false, // 当前时间
volumeControl: false, // 声⾳控制键
playToggle: false, // 暂停和播放键
progressControl: false, // 进度条
fullscreenToggle: true // 全屏按钮
},
techOrder: ['flash'], // 兼容顺序
flash: {
hls: {
withCredentials: false
},
swf: SWF_URL
},
sources: [{
type: 'rtmp/flv',
src: '' // 视频地址-改变它的值播放的视频会改变
}],
notSupportedMessage: '此视频暂⽆法播放，请稍后再试' // 允许覆盖Video.js⽆法播放媒体源时显⽰的默认信息。}
}
}
}
3、⽗组件调⽤视频播放组件，点击“播放视频”替换组件⾥的视频流地址播放实时视频
4、fig.js⽂件如下：需要加⼊的是chainwebpack配置
// fig.js
const path = require('path')
const webpack = require('webpack')
baseUrl: v.NODE_ENV === 'production' ? '/bcmp-web/' : '/',
outputDir: v.NODE_ENV === 'production' ? 'bcmp-web' : 'dist', lintOnSave: true,
productionSourceMap: false,
devServer: {
open: true,
host: '0.0.0.0',
port: 9005,
https: false,
hotOnly: false,
proxy: null
},
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
'windows.jQuery': 'jquery'
})
]
},
chainWebpack: config => {
.rule('swf')
.test(/\.swf$/)
.
use('url-loader')
.loader('url-loader')
.options({
limit: 10000
})
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
}
}
}
⽬前vue-video-player版本5.0.2，测试可⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。