videojs-fetch-flv

A videojs plugin to download http-flv stream

Table of Contents

• Installation
• Usage
  • <script> Tag
  • ES Modules
  • Browserify/CommonJS
  • RequireJS/AMD
• Methods
  • show()
  • hide()
  • updateIsLive(value)
  • start()
  • stop()
• Configuration
• License

Installation

npm install --save videojs-fetch-flv

Other

npm install --save video.js videojs-flvjs flv.js

# or 

npm install --save video.js videojs-flvjs-es6 flv.js

Usage

To include videojs-fetch-flv on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/flv.min.js"></script>
<script src="//path/to/videojs-flvjs.min.js"></script>
<script src="//path/to/videojs-fetch-flv.min.js"></script>
<script>
  var player = videojs('my-video')
  player.fetchFlv()
</script>

or

<script src="//path/to/video.min.js"></script>
<script src="//path/to/flv.min.js"></script>
<script src="//path/to/videojs-flvjs.min.js"></script>
<script src="//path/to/videojs-fetch-flv.min.js"></script>
<script>
  var player = videojs('my-video')
  var options = {
    isLive: false,
    ...
  }
  player.fetchFlv(options)
</script>

or

<script src="//path/to/video.min.js"></script>
<script src="//path/to/flv.min.js"></script>
<script src="//path/to/videojs-flvjs.min.js"></script>
<script src="//path/to/videojs-fetch-flv.min.js"></script>
<script>
  var options = {
        plugins: {
          fetchFlv: {
            isLive: false,
            ...
          }
        }
      }
  var player = videojs('my-video', options)
</script>

ES Modules

Install videojs-fetch-flv via npm and import the plugin as you would any other module. You will also need to import the stylesheet in some way.

import videojs from 'video.js'
import 'videojs-fetch-flv'
import 'videojs-fetch-flv/dist/videojs-fetch-flv.css'

const player = videojs('my-video')
player.fetchFlv()
// player.fetchFlv({
//   isLive: true
// })

or

import videojs from 'video.js'
import 'videojs-flvjs-es6'
import 'videojs-fetch-flv'
import 'videojs-fetch-flv/dist/videojs-fetch-flv.css'

const options = {
        plugins: {
          fetchFlv: {
            isLive: false,
            ...
          }
        }
      }
const player = videojs('my-video', options)

Browserify/CommonJS

When using with Browserify, install videojs-fetch-flv via npm and require the plugin as you would any other module.

var videojs = require('video.js')

// The actual plugin function is exported by this module, but it is also
// attached to the `Player.prototype`; so, there is no need to assign it
// to a variable.
require('videojs-fetch-flv')

var player = videojs('my-video')
player.fetchFlv()

RequireJS/AMD

When using with RequireJS (or another AMD library), get the script in whatever way you prefer and require the plugin as you normally would:

require(['video.js', 'videojs-fetch-flv'], function(videojs) {
  var player = videojs('my-video')
  player.fetchFlv()
})

Methods

show()

Show record button control

hide()

Hide record button control

updateIsLive(value)

update options.isLive value

start()

When the player is playing, you can manually record.

player.on('play', () => {
  player.fetchFlv().start()
})

stop()

When the player is playing, you can manually stop the recording and download the recording file.

Note: When closing or destroying the player, if you are recording, it is best to call stop() first

player.on('error', () => {
  player.fetchFlv().stop(isSaveFile)
})

isSaveFile: Boolean, default false

• true: stop fetch and save the media file
• false: stop fetch only

Configuration

Property	Attributes	Type	Default	Description
isLive	Optional	Boolean	true	Download parameters. True is used to download http-flv, false is used to download directly by the browser
beforeElement	Optional	String	fullscreenMenuToggle	Name of the player.controlBar component for the button to be attached before
controlText	Optional	String	Download	String for the control button title
position	Optional	String	top-right	The location to place the record status div (top-left, top-right, bottom-left, or bottom-right)
opacity	Optional	Number	1	The opacity of the record status div (from [0, 1]). If not specified, it will default to 1.

License

MIT. Copyright (c) lin557