vue之使用vue-video-player实现实时视频流播放

由于这几天项目需要实时显示监控的视频，所以网上翻阅了很多资料，这里写下我从0到1的过程。

本篇博客参考了：https://blog.csdn.net/liona_koukou/article/details/84025449博客，也非常感谢此博主对我一些问题的回复和帮助。

写在最前：

推荐大家一个测试视频流是否可以播放的测试工具：点击下载，建议大家在视频流无法播放时先用此工具测试下源有没有问题，因为好多时候可能并不是你项目的问题，只是视频源的问题

接下来写我项目中如何实现以及碰到的一些问题：

安装组件：

npm install vue-video-player --save

2.将视频监控封装成一个组件，无论是父组件跳转还是直接引入使用都很方便：

<template><div class="video-js" style="width: 600px;"><video-player class="video-player vjs-custom-skin"  ref="videoPlayer"  :playsinline="true" :options="playerOptions"></video-player></div>
</template><script>import base from '../../../js/global.js'import axios from 'axios'import laydate from 'layui-laydate'import moment from 'moment'import $ from 'jquery'import crypto from 'crypto'import qs from 'qs'import _ from 'lodash'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 {userInfo: '',uthObj: '',player: '',videoSrc: '',playerOptions: {        live: true,autoplay: true, // 如果true，浏览器准备好时开始播放muted: false, // 默认情况下将会消除任何音频loop: false, // 是否视频一结束就重新开始preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。language: 'zh-CN',poster:'https://file.digitaling.com/eImg/uimages/20150907/1441607120885946.gif',controlBar: {       timeDivider: false,durationDisplay: false,remainingTimeDisplay: false,currentTimeDisplay: false, // 当前时间volumeControl: false, // 声音控制键playToggle: false, // 暂停和播放键progressControl: true, // 进度条fullscreenToggle: true // 全屏按钮},//techOrder: ['flash'], // 兼容顺序techOrder: ['flash', 'html5'],//设置顺序，flash: { hls: {withCredentials: false },swf: SWF_URL },html5: { hls: { withCredentials: false } },sources: [{          type: 'rtmp/flv',src: '' // 视频地址-改变它的值播放的视频会改变}],notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。}}},/* 定义参数回调函数 */filters: {},props: ["videoUrl"], //获取父组件的参数/* 定义上下文方法，可定义同步和异步方法 */methods: {/* 同步方法 */test01: async function() {},/* 异步方法 */test02() {},},watch: {/*test: function(val, oldVal){},*/},/* 页面初始化执行方法：此方法可写同步方法，有先后加载顺序的逻辑建议用同步方法 */mounted: function() {const localstorage = window.localStorage;const userInfo = JSON.parse(localstorage.getItem('userInfo'));this.userInfo = userInfo;const authValue = 'Bearer ' + userInfo.authorization;this.authObj = {'Authorization-Back': authValue};var that = this;console.log("父组件传值：",this.videoUrl);this.playerOptions.sources[0].src = this.videoUrl;//this.playerOptions.autoplay = true; //再次告诉是自动播放}}
</script><style lang="scss" scoped>/* 这里引入sscc */@import './monitor.scss';
</style>

注意：本页面最下面的样式引入通过lang="scss"引入，如果项目中使用其他方式请更改

3.此时一般情况下可以使用了，但是我的项目中使用报错如下：

ERROR in ./~/videojs-swf/dist/video-js.swf
Module parse failed: E:\HBuilderProject3\erp\node_modules\videojs-swf\dist\video-js.swf Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/vehicleFee/inOut/monitor.vue 19:15-80@ ./src/components/vehicleFee/inOut/monitor.vue@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/vehicleFee/inOut/inOut.vue@ ./src/components/vehicleFee/inOut/inOut.vue@ ./src/router/index.js@ ./src/app.js@ multi (webpack)-dev-server/client?http://0.0.0.0:8082 webpack/hot/dev-server babel-polyfill ./src/app.js

最后发现，vue项目中不同后缀的文件都需要在webpack.config.js中配置下才可以编译：

module: {rules: [{test: /\.vue$/,loader: 'vue-loader',options: {loaders: {'scss': 'vue-style-loader!css-loader!sass-loader','sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'}}},{test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/},{test: /\.(png|jpg|gif)$/,loader: 'url-loader?limit=1&name[hash:8].[name].[ext]',options:{publicPath:'/'}},{test: /\.css$/,loader: 'style-loader!css-loader'},// 影响字体图标，暂时注释// {//     test: /\.(woff|svg|eot|ttf)\??.*$/,//     exclude: /node_modules/,//     loader: 'url-loader?limit=8&name=fonts/[name].[md5.hash.hex:7].[ext]'// },{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: 'file-loader'},{test: /\.scss$/,exclude: /node_modules/,use: [{loader: "style-loader" // creates style nodes from JS strings}, {loader: "css-loader" // translates CSS into CommonJS}, {loader: "sass-loader" // compiles Sass to CSS}]// loader: ExtractTextPlugin.extract("style", 'css!sass') //这里用了样式分离出来的插件，如果不想分离出来，可以直接这样写 loader:'style!css!sass'},{test: /\.swf$/, //此处添加视频组件的.swf文件编译loader: 'url-loader',options:{limit: 10000}}]},

4. 附上父组件中引用的代码

效果如下：

写在最后，实际使用中发现此组件还是有问题，就是明明设置了自动播放，但是测试中发现并不是每次打开监控都是自动播放的，有时候打开后会卡着，点击暂停再播放才可以使用，这个问题在想办法处理中。

欢迎有问题和楼主交流，或者发送楼主邮箱：qi_dabin@163.com

vue之使用vue-video-player实现实时视频流播放相关推荐

python编程实例视屏-python实现实时视频流播放代码实例
这篇文章主要介绍了python实现实时视频流播放代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 @action(methods=['GET' ...
python播放视频代码_python实现实时视频流播放代码实例
这篇文章主要介绍了python实现实时视频流播放代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 @action(methods=['GET' ...
Unity播放带Alpha通道的视频【WebM+Video Player】（替代播放GIF方案）
在Unity中播放GIF或者动态效果,可以通过Video Player播放带透明通道的WebM视频来实现. 制作带Alpha的MOV视频制作带Alpha通道的MOV视频有多重方式,如AE.PR.PS ...
开源视频流服务_使用开源Video.js进行实时视频流
开源视频流服务去年,我写过有关使用Linux创建视频流服务器的文章 . 该项目使用实时消息协议(RTMP),Nginx Web服务器,Open Broadcast Studio(OBS)和VLC媒体 ...
如何在vue项目中引入video.js插件
借鉴了不少文章,照着来净报错,恼了自己给自己留一篇绝不报错的! 参考文章:https://www.jianshu.com/p/8b8023c7ed37 一.安装 $ npm install video ...
vue 动态绑定 video src，不能正常播放问题
vue 动态绑定 video src,不能正常播放问题通过 vm.$refs vm.$refs 一个对象,持有注册过 ref attribute 的所有 DOM 元素和组件实例. 核心代码 let ...
vue+websocket+express+mongodb实战项目（实时聊天）（一）
##vue+websocket+express+mongodb实战项目(实时聊天)(一) 在原来基础上增加了多个聊天室以及发送图片[vue+websocket+express+mongodb实战项目( ...
vue crud_使用Vue和Deepstream构建实时CRUD应用
vue crud Vue is the JavaScript UI tool that parades itself as progressive because it is approachable ...
Vue实现视频播放（video.js）
项目中需要实现播放m3u8类型的视频.h5的video标签不支持该类型的视频,所以使用了videojs 下载依赖 npm i --save video.js 引入 // main.js中引入样式 im ...
在vue项目中使用video.js实现视频播放和视频进度条打点
一.用video.js实现视频播放 1.安装video.js插件 // 安装video.js插件 npm install video.js -S // 如果需要播放rtmp直播流,需安装一下插件 np ...

vue之使用vue-video-player实现实时视频流播放

vue之使用vue-video-player实现实时视频流播放相关推荐

最新文章

热门文章