vue-video-monitor

Multi-window vue video player, mp4/flv/m3u8

Table of Contents

• Installation
• Usage
• Attributes
• Methods
• License

Installation

VHS supports HLS and DASH and is built into video.js 7, So there is no need to install videojs-contrib-hls.

If you use videojs 6 you need videojs-http-streaming.

 npm install --save vue-video-monitor

or

 npm install --save video.js videojs-flvjs-es6 flv.js videojs-fetch-flv videojs-contextmenu-pt vue-video-monitor

Usage

To include vue-video-monitor on your website or web application, use any of the following methods.

Fully import

In main.js:

 import Vue from 'vue'
import VueVideoMonitor from 'vue-video-monitor'
Vue.use(VueVideoMonitor)

On demand

<template>
  <div class="video-view center">
    <VueVideoMonitor
      :count="4"
      :control="controlBar"
      :closeAfterViewChange="false"
      :focused="true"
      :duplicate="true"
      ref="monitor"
    />
  </div>
</template>

<script>
import VueVideoMonitor from 'vue-video-monitor'

export default {
  components: {
    VueVideoMonitor
  },
  data() {
    return {
      controlBar: {
        enabled: true,
        position: 'bottom',
        button: [
          '1',
          '4',
          '6',
          '8',
          '9',
          '10',
          '16',
          'mute',
          'stop',
          'clear',
          'fill'
        ]
      }
    }
  },
  methods: {
    controlHide() {
      this.controlBar.enabled = false
    },
    controlShow() {
      this.controlBar.enabled = true
    },
    play() {
      this.$refs.monitor.play({
        src: '//d2zihajmogu5jn.cloudfront.net/bipbop-advanced/gear3/prog_index.m3u8',
        hasAudio: true,
        record: {
          enabled: false,
          isLive: true
        }
      })
    },
    togglefill() {
      this.$refs.monitor.togglefill()
    },
    setViewCount(value) {
      this.$refs.monitor.splitView(value)
    }
  }
}
</script>
<style lang="scss">
.video-view {
  width: 100%;
  max-width: 1280px;
  height: 900px;
}

.center {
  margin: auto;
}
</style>

Attributes

Property	Description	Type	Default
closeAfterViewChange	Whether to close the playing video when the view window changes. The default is true after 1.2.7	boolean	true
control	Control panel parameters	object
count	Initialize the number of video windows	number	4
duplicate	Whether to allow multiple identical videos to be played at the same time	boolean	false
focused	show focused	boolean	true
lockControlBar	A non-hidden control bar is displayed at the bottom of each window	boolean	false
loopCreate	When playing a video, when there is no free window, automatically close the earliest opened window. Best to set "closeAfterViewChange" to true	boolean	true

control object

Property	Description	Type	Default
button	Configure the buttons on the control panel. ['1','4','6','8','9','10','16','25','36','64','fill', 'mute', 'stop','clear']	array	['1','4','6','8','9','10','16','fill','mute', 'stop','clear']
enabled	Whether to show the control panel	boolean	true
position	Control panel position. 'top', 'bottom'	string	bottom

Methods

apply(param)

Apply for an idle view and occupy it to display the loading effect

param = {
  unique: unique,
  text: text,
  viewIndex: null
}

Property	Description	Type	Default
unique	Specified by the options.data.unique parameter of the play() method	string
text	loading text	string	empty string
viewIndex	Occupy the specified window, if the window is playing, it will be closed and reoccupied	number	null

clear()

Close all video players that are playing

getPlaying(unique)

The player object corresponding to the specified identifier. About unique param , Specified by the options.data.unique parameter of the play() method, if not specified, the file name in options.src is used by default.

getSelected()

Returns the currently selected player object

getUserData(unique)

About unique param , Specified by the options.data.unique parameter of the play() method. Return options.data.user

mute()

Mute all players

play(options)

Play video, The options object format is as follows:

Property	Description	Type	Default
content	Context menu	array	null
data	user data	object	{ unique: filename user: null }
hasAudio	With audio	boolean	true
isLive	Specify whether the current video stream is a real-time stream or a file stream If true, the playback rate will be adjusted according to the buffer size	boolean	true
text	Display customized text message, Default display file name. It was "info" before 1.2.6	string	null
record	Record control parameters(Does not support rtmp/m3u8)	object	{ enabled: true, isLive: true }
src	Media source	string	-
viewIndex	View index, If it is >= 0, the video will be played in the specified window	number	null

The format of the content array parameter is as follows:

 content: [
  {
    // A plain old link.
    href: 'https://www.brightcove.com/',
    label: 'Brightcove'
  },
  {
    // A link with a listener. Its `href` will automatically be `#`.
    label: 'Example Link',
    listener: function () {
      alert('you clicked the example link!')
    }
  }
]

The format of the data object parameter is as follows:

{
  unique: filename,
  user: null
}

splitView(uCount)

Modify the number of video players.

Type: number, Only the following values are supported: 1, 4, 6, 8, 9, 10, 16, 25, 36, 64

stop()

Stop a video player that is playing

togglefill()

Switch whether the video screen is full

Events

error

Triggered when there is an error in playing flv

error(player, errType, errDetails, e)

License

MIT. Copyright (c) lin557