最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
vue-video-player实现实时视频播放方式代码示例
时间:2020-08-10 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下vue-video-player实现实时视频播放方式代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。
监控设备播放效果如下
1、vue项目安装vue-video-player
npm install vue-video-player --save
2、编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了,具体操作有注释)
注:style样式部分用了lang=scss,如果自己的项目没用他请用自己的方式改一下样式部分避免报错
暂未播放视频
3、父组件调用视频播放组件,点击“播放视频”替换组件里的视频流地址播放实时视频
4、vue.config.js文件如下:需要加入的是chainwebpack配置
// vue.config.js const path = require('path') const webpack = require('webpack') module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/bcmp-web/' : '/', outputDir: process.env.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 => { config.module .rule('swf') .test(/.swf$/) .use('url-loader') .loader('url-loader') .options({ limit: 10000 }) }, pluginOptions: { 'style-resources-loader': { preProcessor: 'scss', patterns: [ path.resolve(__dirname, './src/assets/baseStyle/var.scss'), path.resolve(__dirname, './src/assets/baseStyle/mixin.scss') ] } } }
目前vue-video-player版本5.0.2,测试可用
相关文章
- SpringBoot测试配置属性与web启动环境解析 10-24
- SpringBoot常用计量与bean属性校验和进制数据转换规则解析 10-24
- 工厂方法在Spring框架中的运用介绍 10-24
- SpringBoot热部署设置详解 10-24
- JavaScript二叉搜索树构建操作解析 10-12
- JavaScript二叉树及各种遍历算法讲解 10-12