由于這幾天項目需要實時顯示監控的視頻，所以網上翻閱了很多資料，這里寫下我從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实现实时视频流播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。