Mj-inphase-component NPM

起步

安装inphase-component组件

 npm i mj-inphase-component

引用main.js中引入样式

import 'mj-inphase-component/lib/mj-inphase-component.css';

全局注册

import mjInphaseComponent from 'mj-inphase-component';
Vue.use(mjInphaseComponent);

在组件中使用

<inphase-player></inphase-player> // 必须使用该标签

inphase-player 是依赖于西瓜视频虽然直接 install了mj-inphase-component也会自动下载西瓜视频相关组件如果报错也可以按照下面步骤从新安装西瓜视频相关组件，一般可以省略

 npm i xgplayer xgplayer-hls.js xgplayer-mp4 xgplayer-flv.js

如果需要自定义样式，安装以下loader（自定义样式功能暂未开放）

npm i node-sass sass-loader raw-loader

API

属性

分屏数

配置项：split-screen
类型: Number
默认值：1
参考值：1 | 4 | 9 | 16
描述：传入参考值以外的值控制台会报错，值默认回到1。

视频名称

配置项：video-name
类型：String
默认值：""
描述：在播放器上显示该视频源的名称，仅适用于单个视频源。多个视频源需要通过新增对象属性name来使用。

视频源

配置项：video-url
类型: String
默认值：""
描述：单个视频源。不支持分屏功能。该参数不能与video-list混用，否则可能会有意料之外的错误。

视频数据

配置项：video-list
类型: Array< Object >
默认值：[]
参考数据结构：

[
    {
        url: '', // 摄像头视频或直播流url
        definitionList: [ //  清晰度数据
           {
              name: '标清', // 渲染为清晰度切换播放栏选项
              url: ''
           },
           {
              name: '高清',
              url: ''
           },
           {
              name: '超清',
              url: ''
           }
        ],
        name: '视频源1', // 视频源名称
        poster: '' // 封面图
    }
]

描述：多个视频源。支持分屏功能。该参数不能与video-url混用，否则可能会有意料之外的错误。

清晰度

配置项：definition-list
类型: Array < Object >
默认值：[]
参考数据结构：

// 第①种方式：
[
  {
     name: '标清', // 渲染为清晰度切换播放栏选项
     url: ''
  },
  {
     name: '高清',
     url: ''
  },
  {
     name: '超清',
     url: ''
  }
]

描述：仅在通过video-url传入单个视频源时使用。切换video-url时，需要同时切换该选项，保持视频源与该视频源清晰度资源同步。多个视频源需要通过新增对象属性definitionList来使用。

直播

配置项：live
类型: Boolean
默认值：false
参考值：true | false
描述：开启直播，支持直播视频流。组件只能通过该参数判断当前视频源是否为直播流，所以请根据当前业务进行严格区分，否则会有意料之外的结果。

封面图

配置项：poster
类型: String
默认值：''
描述：当播放器初始化后在用户点击播放按钮前显示的图像。多个视频源需要通过新增对象属性poster来使用。

唯一视频播放

配置项：only-one-play
类型：Boolean
默认值：false
参考值：true | false
描述：在同一个页面是否只允许播放一个视频。仅支持通过video-url传入的视频源。

西瓜播放器原始配置

配置项：xg-config
类型：Object
默认值：{}
参考值：

{
     download: true,
     screenShot: true,
     autoplay: true,
     definitionActive: 'hover'
}

描述：西瓜播放器原始配置，只列出几个常用配置项，详细请参考西瓜播放器官网配置。

默认logo

配置项：show-default-logo
类型：Boolean
默认值：true
参考值：true | false
描述：是否开启默认logo功能。

插槽

默认logo

描述：通过#logo或v-slot:logo具名插槽插入logo图片，可自定义大小，会自动垂直水平居中，在视频开始播放之后消失。如果不传logo图片，会显示默认logo。如果不需要该功能，可通过showDefaultLogo属性关闭。
使用方法：

<inphase-player>
   <template #logo>
       <img :src="logo" alt="logo" width="80px" height="80px">
   </template>
</inphase-player>

事件

监听视频重复

配置项：repeat-video
返回类型：Object
返回值：重复的视频对象
描述：当传入重复视频时，该事件触发。仅针对多个数据源生效。

监听视频播放错误

配置项：play-error
返回类型：(Object, String)
返回值：第一个参数为出错的当前视频配置对象，第二个参数为错误信息
描述：当视频播放出错时，该事件触发。

方法

方法名	用法	描述
destroyPlayer	`this.$refs.player.destroyPlayer()`	销毁当前视频实例（仅适用于单个视频源）
destroyPlayers	`this.$refs.player.destroyPlayers()`	销毁当前所有分屏（仅适用于多个视频源），调用该方法时需要手动将传入的video-list绑定的数组清空