Currently, the video broadcast service supports three broadcast protocols: RTMP, HLS, and HTTP-FLV. This article explains how to use vuE-video-player to play RTMP streams in a Vue project.

1. Preparation

cnpm install --save vue-video-player
cnpm install --save videojs-flash
cnpm install --save videojs-swf
Copy the code

2. Code practice

<template>
  <div>
    <video-player :options="playerOptions"></video-player>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'

export default {
  components: {
    videoPlayer
  },
  data () {
    return {
      playerOptions: {
        autoplay: true.sources: [{
          type: 'rtmp/mp4'.src: 'RTMP: / / 58.200.131.2:1935 / livetv hunantv' // Test is available}].techOrder: ['html5'.'flash'].flash: {
          swf: SWF_URL
        }
      }
    }
  }
}
</script>
Copy the code

3. Solve problems

To be deflected or Skipped over. The “flash” tech is undefined. Skipped browser support check for that tech.

  • Option 1(invalid) : Delete node_modules and install NPM.
  • Scheme 2(valid) : Check the package.json of VUe-Video-Player and Videojs-Flash, and find that the latest version of video.js introduced by these two plug-ins is not strictly unified. It is suspected to be related to the plug-in version, so the version is downgraded as follows:
"dependencies": {
  "vue-video-player": "5.0.1"."videojs-flash": "2.1.0."
}
Copy the code
  • Option 3(not verified) : the following solution is from vue-video-player issues#221

The root cause is videoJS and VideoJs-Flash each have a video.js, if the two versions are not the same may be wrong, the ultimate solution is to configure the third party module search order, the first to find their own installs of VideoJS can be.

// webpack.config.js
resolve: {
   modules: [path.resolve('node_modules'), 'node_modules'],... }Copy the code
Q2: Console error cross-origin plugin content fromhttps://vjs.zencdn.net/swf/5.4.1/video-js.swf must have a visible size larger than 400 x 300 pixels, or it will be blocked. Invisible content is always blocked.

This error occurs when autoplay: True is set for live video and the width and height is less than 400×300, such as the need for live video walls. 2 key points: 1. Cross-source plugins 2. The size of the video window depends on your needs and cannot be controlled. For cross-source plug-ins, you need to install the above version of the VideoJS-SWF plug-in, just import. Note: to import [email protected] plug-in, you need to add chainWebPack configuration in vue.config.js, otherwise the project will run an error: the relevant loader cannot be found

// vue.config.js
module.exports = {
  chainWebpack: config= > {
    config.module
      .rule('swf')
      .test(/\.swf$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000}}})Copy the code


Reference documentation

  • vue-video-player
  • videojs-flash
  • Introduction of Webcast technology and application of Video.js in Vue
  • Vue-video-player Real-time video playback (monitoring device – RTMP stream)