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

Flv.js is HTML5 Flash video (Flv) player, pure native JavaScript development, no Use of Flash.

1. Preparation

cnpm install --save flv.js
Copy the code

2. Code practice

<template>
  <div id="app">
    <video id="videoElement"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  data() {
    return {
      flvPlayer: null}},methods: {
    / * * *@description Create a FLV instance */
    createFlvPlayer() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('videoElement')
        this.flvPlayer = flvjs.createPlayer({
          type: 'flv'.isLive: true.url: 'FLV Video pull stream address'
        })
        
        this.flvPlayer.attachMediaElement(videoElement)
        this.flvPlayer.load()
        this.flvPlayer.play()
      }
    },

    / * * *@description Stop mixed-stream playback and remove live stream capture * (Note: leave and re-enter the current route, observe the Network, you can see the necessity of this operation) */
    pausemix() {
      this.flvPlayer.pause()
      this.flvPlayer.unload()
      this.flvPlayer.detachMediaElement()
      this.flvPlayer.destroy()
      this.flvPlayer = null}},mounted() {
    this.createFlvPlayer()
  },
  beforeDestroy() {
    this.pausemix()
  }
}
</script>
Copy the code

3. Solve problems

Q1: Console error Uncaught (in promise) DOMException: Play () failed because the user didn’t interact with the document first.

Reason: Chrome only allows users to automatically play audio and video on a web page after the user triggers it, preventing developers from abusing the auto-play feature to affect the user experience. Solution: Muted the video label, giving the video a muted muted muted muted muted muted video, giving the video a muted video; After the user has any triggers on the web page, the muted attribute is set to false, or the user is given a manual audio playback.

Q2: The client collects data and pushes streams to the media server; The front-end player pulls streams from the media server. When the interdepartmental coordination stagnates, how does the front end prove the usability of the player?

  • Just because a video stream can be played by a VLC player does not mean that the browser can receive and play it properly. VLC is a free, open source, cross-platform multimedia player and framework that can play most multimedia files.

  • Fiddler + OBS

    1. Fiddler proxy page push flow interface, by local control push flow;
    2. With OBS tool, to the media server to provide the push stream address push stream, content to capture the current display;
    3. Page player to get the pull flow address, if the player can normally see the dynamic display, you can prove that the player is available.

  • Chrome :// Media-internals Specifies the audio and video debug function, which prints logs about the currently played videos.


Reference documentation
  • flv.js