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实现实时视频流播放的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。