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

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

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

写在最前：

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

 

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

---

1. 安装组件：

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