vue项目中实现RTMP流播放（实测可用）

不废话先看下这个效果

芒果现场视频

#安装依赖

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: '暂时无法播放',
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
          },
          techOrder: ['flash'],
          flash: {
            hls: { withCredentials: false },
            swf: SWF_URL // 引入静态文件swf
          },
          sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
            type: 'rtmp/mp4',
            src: 'rtmp://58.200.131.2:1935/livetv/hunantv' //这是芒果TV现场直播视频，地址是可以用的，最后需要替换成后端给的项目地址
          }]
        }
}

重点来了

使用过程中，遇到的问题

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) 暂时无法播放

网上说用npm 安装而不是cnpm
于是按照规则安装了一遍，还是不行，简单粗暴的方法：删除node_modules文件，全部npm i 安装一下依赖，然后把vue-video-player固定为5.0.2可能是版本问题导致的，我没有试，一遍不行，就再删除安装一遍！
如果还是不行，请删除用户文件夹下的npm 和npmcache文件，从新装npm包，然后再装一遍、我用的npm版本是：6.4.1.node版本是v10.15.3

2 引入swf文件报错

加载swf文件时报文件找不到，需要在webpack.base.conf中配置url-loader

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

最后编辑于：2019.11.28 14:51:46