不廢話先看下這個(gè)效果

芒果現(xiàn)場(chǎng)視頻

#安裝依賴

npm install vue-video-player --save // 注意我安裝的是5.0.2版本的
npm install videojs-flash --save

videojs-flash版本

vue-video-loayer版本

引入

import 'video.js/dist/video-js.css'
  import { videoPlayer } from 'vue-video-player'
  import 'videojs-flash'
  import SWF_URL from 'videojs-swf/dist/video-js.swf' // 也可以不加swf,加的話需要webpack配置，后面有說到

使用

<video-player ref="videoPlayer" :options="videoOptions" class="vjs-custom-skin videoPlayer" :playsinline="true"></video-player>

data() {
videoOptions: {
          live: true,
          autoplay: true,
          fluid: true,
          notSupportedMessage: '暫時(shí)無法播放',
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按鈕
          },
          techOrder: ['flash'],
          flash: {
            hls: { withCredentials: false },
            swf: SWF_URL // 引入靜態(tài)文件swf
          },
          sources: [{ // 流配置滔悉，數(shù)組形式，會(huì)根據(jù)兼容順序自動(dòng)切換
            type: 'rtmp/mp4',
            src: 'rtmp://58.200.131.2:1935/livetv/hunantv' //這是芒果TV現(xiàn)場(chǎng)直播視頻殴泰，地址是可以用的诵原，最后需要替換成后端給的項(xiàng)目地址
          }]
        }
}

重點(diǎn)來了

使用過程中，遇到的問題

1 flash tech is undefined

VIDEOJS: ERROR: The "flash" tech is undefined. Skipped browser support check for that tech.
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) 暫時(shí)無法播放

網(wǎng)上說用npm 安裝而不是cnpm
于是按照規(guī)則安裝了一遍也拜，還是不行赃阀，簡(jiǎn)單粗暴的方法：刪除node_modules文件霎肯，全部npm i 安裝一下依賴，然后把vue-video-player固定為5.0.2可能是版本問題導(dǎo)致的榛斯，我沒有試姿现，一遍不行，就再刪除安裝一遍肖抱！
如果還是不行备典，請(qǐng)刪除用戶文件夾下的npm 和npmcache文件，從新裝npm包意述，然后再裝一遍提佣、我用的npm版本是：6.4.1.node版本是v10.15.3

2 引入swf文件報(bào)錯(cuò)

加載swf文件時(shí)報(bào)文件找不到，需要在webpack.base.conf中配置url-loader

module: {
rules:[
      {
        test: /\.swf$/,
        loader: 'url-loader',
        options: {
          limit: 1024,
          name: 'file/[path][name].[hash:7].[ext]'
       }
 ]
}