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

Myth丶恋晨 2022-04-23 05:16 2481阅读 0赞

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

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

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

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

--------------------

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. 附上父组件中引用的代码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpX2RhYmlu_size_16_color_FFFFFF_t_70][]

效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpX2RhYmlu_size_16_color_FFFFFF_t_70 1][]

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

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

[https_blog.csdn.net_liona_koukou_article_details_84025449]: https://blog.csdn.net/liona_koukou/article/details/84025449
[Link 1]: https://download.csdn.net/download/qi_dabin/11061632
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpX2RhYmlu_size_16_color_FFFFFF_t_70]: /images/20220323/9e3422ec5fd54f34a5ebe211b5f7fc3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FpX2RhYmlu_size_16_color_FFFFFF_t_70 1]: /images/20220323/2df3be0ad07d4fbd9e586f5db59d7ded.png