1.0.12 • Published 2 years ago

videojs-fetch-flv v1.0.12

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

PropertyAttributesTypeDefaultDescription
isLiveOptionalBooleantrueDownload parameters. True is used to download http-flv, false is used to download directly by the browser
beforeElementOptionalStringfullscreenMenuToggleName of the player.controlBar component for the button to be attached before
controlTextOptionalStringDownloadString for the control button title
positionOptionalStringtop-rightThe location to place the record status div (top-left, top-right, bottom-left, or bottom-right)
opacityOptionalNumber1The opacity of the record status div (from [0, 1]). If not specified, it will default to 1.

License

MIT. Copyright (c) lin557

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago