视频九宫格组件 支持flv、m3u8 基于hls.js、jessibuca.js二次开发

flvVideo 和 hlsVideo 控制栏会存在部分差异

依赖插件安装

webpack

yarn add copy-webpack-plugin -D  // 版本号为 6.3.2

// vue.config.js 
module.exports = {
  chainWebpack (config) {
    config.plugin('copy').use(require('copy-webpack-plugin'), [
      {
        patterns: [
          {
            from: 'node_modules/grid-video/dist/jessibuca',
            to: __dirname + '/dist'
          }
        ]
      }
    ])
  },
}

vite

yarn add rollup-plugin-copy -D

// vite.config.js 
import copy from 'rollup-plugin-copy'

plugins: [
  copy({
    targets: [
      { src: 'node_modules/grid-video/dist/jessibuca/*', dest: __dirname + '/dist'}, //执行拷贝
    ]
  })
],

flvVideo 播放FLV 视频

flvVideo Attributes

| 属性 | 类型 | 说明 | 默认值 | 可选值 | 是否必填 | | --- | --- | --- | --- | --- | --- | | url | String | 视频播放地址 | | | true | | autoPlay | Boolean | 视频是否自动播放。注：为保证视频自动播放生效，此属性为true时将会强制设置音频为静音模式 | false | true / false | | config | Object | 参考通用配置项以及jessibuca配置项 | | |

使用方式

import { flvVideo } from 'grid-video'
import 'grid-video/dist/style/index.css'

<flvVideo :url="videoUrl" :config="{}"></flvVideo>

hlsVideo 播放 m3u8 视频

组件可嵌套元素，其元素为视频上方layer层，该层级低于控制栏层级，loading层级

hlsVideo Attributes

| 属性 | 类型 | 说明 | 默认值 | 可选值 | 是否必填 | | --- | --- | --- | --- | --- | --- | | url | String | 视频播放地址 | | | true | | autoPlay | Boolean | 视频是否自动播放。注：为保证视频自动播放生效，此属性为true时将会强制设置音频为静音模式 | false | true / false | | config | Object | 参考通用配置项 注：hlsVideo只支持通用配置项 | | |

使用方式

import { hlsVideo } from 'grid-video'
import 'grid-video/dist/style/index.css'

<hlsVideo url="http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"></hlsVideo>

九宫格 ScratchableLatex组件

1. ScratchableLatex 实现配合visibility: hidden; display: none; 注：因jessibuca.js 采用webGL 绘制，频繁创建多个实例会导致最先创建的几个webGL 实例丢失，视频无法播放
2. ScratchableLatex 播放MP4 等其他视频格式请自行嵌套处理，组件会进行九宫格元素的切换隐藏
3. 当使用ScratchableLatex 其所有相同的配置项优先级高于内部组件配置项，且所有子级视频组件均采用此配置项

ScratchableLatex Attributes

| 属性 | 类型 | 说明 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | defaultNum | Number | 默认展示视频数量 | 9 | 2 / 4 / 9 | | gap | Number | 元素间隔 | 2 | Number | | autoPlay | Boolean | 视频是否自动播放。注：为保证视频自动播放生效，此属性为true时将会强制设置音频为静音模式 | false | true / false | | config | Object | 视频组件配置项，参考通用配置项。注：flv视频参考详细配置 | null | null |

ScratchableLatex Methods

| 名称 | 说明 | 参数类型 | 可选值 | | --- | --- | --- | --- | | setScratchableLatex | 设置展示视频数量 | Number | 2 / 4 / 9 |

使用方式

import { flvVideo, ScratchableLatex, hlsVideo } from 'grid-video'
import 'grid-video/dist/style/index.css'

<ScratchableLatex class="video-container" :autoPlay="false" :defaultNum="2" :config="{}" ref="videoContainer">
  <div>
    <!-- <flvVideo :url="videoUrl"></flvVideo> -->
    <hlsVideo url="http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"></hlsVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <hlsVideo url="http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8"></hlsVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
  <div>
    <flvVideo :url="videoUrl"></flvVideo>
  </div>
</ScratchableLatex>

通用配置项

| 属性 | 类型 | 说明 | 默认值 | 可选值 | | --- | --- | --- | --- | --- | | isNotMute | Boolean | 是否开启声音 | false/关闭 | false/true | | loadingText | String | 加载文案 | loading... | | | supportDblclickFullscreen | Boolean | 是否支持屏幕的双击事件，触发全屏，取消全屏事件 | false | false/true | | operateBtns | Object | 配置操作按钮 | { play: false, audio: false, fullscreen: false, } | |

使用方式

{
  isNotMute: false,
  loadingText: 'loading...',
  supportDblclickFullscreen: false,
  operateBtns: {
    play: false,
    audio: false,
    fullscreen: false,
  }
}

flv 详细配置项 使用jessibuca.js 作为底层的播放器

m3u8 详细配置项 使用hls.js 作为底层的播放器

目前只支持通用配置项