videojs-fetch-flv

1.0.12 • Public • Published

videojs-fetch-flv

A videojs plugin to download http-flv stream

image

Table of Contents

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

Readme

Keywords

Package Sidebar

Install

npm i videojs-fetch-flv

Weekly Downloads

11

Version

1.0.12

License

MIT

Unpacked Size

348 kB

Total Files

18

Last publish

Collaborators

  • lin557