Video Player 视频播放器

用于播放视频流。

全局配置

在全局配置组件属性。

VideoPlayer组件属性配置

app.provide(VIDEO_PLAYER_KEY, {
  core: 'xgplayer-hls',
  // 使用天翼视联播放器内核时必须设置appId
  appId: 'xxxxxx',
  // 网络配置，使用西瓜播放器内核时生效
  networkOptions: {
    loadTimeout: 15000,
    retryCount: 3,
    retryDelay: 1000,
  },
  // others props...
});

业务注入

在全局注入加载视频播放配置业务。

注入加载视频播放配置业务

app.provide(LOAD_VIDEO_PLAY_OPTIONS_KEY, id => {
  // 先加载视频信息
  return axios
    .get('/api/video/get', {
      params: {
        id: id,
      },
    })
    .then(res => {
      // 组装成播放配置并返回
      const options: VideoPlayOptions = {
        url: res.data.url,
        core: res.data.streamType === 'hls' ? 'xgplayer-hls' : 'xgplayer-flv',
        definitions: res.data.urls.map(item => {
          return {
            definition: item.name,
            url: item.url,
          };
        }),
      };
      return options;
    });
});

基础用法

传入视频流地址即可开始播放，通过core属性可以切换播放器内核。

动态加载

大部分情况下视频地址需要动态加载，只需在全局注入加载视频播放配置业务，后续使用组件直接设置id属性即可自动加载视频地址及播放配置。

属性

属性名	说明	类型	默认值
url	视频流地址	`string`	—
id	视频id，需注入加载视频播放配置业务后使用	`string`	—
core	播放器内核	`VideoPlayerCore`	xgplayer-hls
keep-alive-interval	保活间隔时间，每隔一段时间会重新加载视频播放配置，0表示不保活	`number`	0
definitions2.1.5	清晰度列表	`VideoPlayerDefinition[]`	—
use-native-hls2.1.7	当播放环境原生支持 HLS 播放时，直接播放 HLS 流而不使用 HLS 插件，仅 IOS 系统生效	`boolean`	true
loading-text2.2.0	加载文案	`string`	—

xg-player可选参数

属性名	说明	类型	默认值
network-options	网络配置选项	`XgPlayerNetworkOptions`	—

xg-player播放器官方文档。

meta-player可选参数

属性名	说明	类型	默认值
appId	申请的播放器授权appId	`string`	—
playerURL	播放器地址	`string`	https://vcp.21cn.com/metaplayer/static/template/latest/player.html
authUrl	https+租户播放器业务域名，在小程序场景下需传入	`string`	—
miniAppId	小程序的appid，在小程序场景下需传入	`string`	—

meta-player播放器官方文档。

播放器内核

可选值	说明
xgplayer-hls推荐	xgplayer官方实现的用于处理hls协议视频流库
xgplayer-flv推荐	xgplayer官方实现的用于处理flv协议视频流库
xgplayer-hls.js	xgplayer基于hls.js二次封装的hls协议视频流处理库
xgplayer-flv.js	xgplayer基于flv.js二次封装的flv协议视频流处理库
metaplayer-hls-soft	无插件播放器软解码模式（四宫格以下HLS流使用）
metaplayer-plugin-float	使用插件进行播放（浮层模式）
metaplayer-hls-hard推荐	针对HLS流，自动识别H.264、H.265编码进行无插件硬解码播放
metaplayer-plugin-peer推荐	使用插件进行播放（同层模式）
metaplayer-webRTC	webRTC直播协议流(仅支持H264)
metaplayer-websocket	websocket + fmp4、websocket+flv直播流支持

提示

使用meta-player的插件模式播放或需要调用播放器API和事件时，需要在页面的head标签中引入工具文件。

html

<head>
  <title>Liv Web</title>
  <script src="https://vcp.21cn.com/metaplayer/static/template/latest/lib/mpIframe-min.js"></script>
</head>

类型声明

import VideoPlayer from './video-player.vue';
import type { XgPlayerProps, XgPlayerCore } from './xg-player';
import type { MetaPlayerProps, MetaPlayerCore } from './meta-player';

/**
 * 播放器内核
 * - xgplayer-hls: xgplayer官方实现的用于处理hls协议视频流库
 * - xgplayer-flv: xgplayer官方实现的用于处理flv协议视频流库
 * - xgplayer-hls.js: xgplayer基于hls.js二次封装的hls协议视频流处理库
 * - xgplayer-flv.js: xgplayer基于flv.js二次封装的flv协议视频流处理库
 * - metaplayer-hls-soft: 无插件播放器软解码模式（四宫格以下HLS流使用）
 * - metaplayer-plugin-float: 使用插件进行播放（浮层模式）
 * - metaplayer-hls-hard: 针对HLS流，自动识别H.264、H.265编码进行无插件硬解码播放
 * - metaplayer-plugin-peer: 使用插件进行播放（同层模式）
 * - metaplayer-webRTC: webRTC直播协议流(仅支持H264)
 * - metaplayer-websocket: websocket + fmp4、websocket+flv直播流支持
 */
export type VideoPlayerCore = XgPlayerCore | MetaPlayerCore;

/**
 * 播放器清晰度
 */
export interface VideoPlayerDefinition {
  /**
   * 清晰度名称
   */
  definition: string;
  /**
   * 清晰度对应的视频流地址
   */
  url: string;
}

/**
 * 视频播放器组件属性
 */
export type VideoPlayerProps = VideoPlayerUniqueProps &
  Omit<Omit<XgPlayerProps, 'url'>, 'core'> &
  Omit<Omit<MetaPlayerProps, 'url'>, 'core'> & {
    /**
     * 视频流地址
     */
    url?: string;
    /**
     * 需要播放的视频id
     */
    id?: string;
    /**
     * 播放器内核
     * @defaultValue 'xgplayer-hls'
     */
    core?: VideoPlayerCore;
    /**
     * 清晰度切换选项
     */
    definitions?: VideoPlayerDefinition[];
    /**
     * 加载文案
     */
    loadingText?: string;
  };

/**
 * 视频播放器独有属性
 */
export interface VideoPlayerUniqueProps {
  /**
   * 保活时间间隔
   * @remarks 开启保活后，每隔一段时间会重新请求视频流地址，以保持视频播放，0表示不保活。
   * @defaultValue 0
   */
  keepAliveInterval?: number;
  /**
   * 是否使用原生HLS
   * @remarks 当播放环境原生支持 HLS 播放时，直接播放 HLS 流而不使用 HLS 插件，仅 IOS 系统生效
   * @defaultValue true
   */
  useNativeHls?: boolean;
}

/**
 * 视频播放配置
 */
export type VideoPlayOptions = VideoPlayerUniqueProps & (XgPlayerProps | MetaPlayerProps);

/**
 * 视频播放器组件实例
 */
export type VideoPlayerInstance = InstanceType<typeof VideoPlayer>;

xg-player类型声明

import XgPlayer from './xg-player.vue';
import type { VideoPlayerDefinition } from './video-player';

/**
 * 西瓜播放器内核
 * - xgplayer-hls: xgplayer官方实现的用于处理hls协议视频流库
 * - xgplayer-flv: xgplayer官方实现的用于处理flv协议视频流库
 * - xgplayer-hls.js: xgplayer基于hls.js二次封装的hls协议视频流处理库
 * - xgplayer-flv.js: xgplayer基于flv.js二次封装的flv协议视频流处理库
 */
export type XgPlayerCore = 'xgplayer-hls' | 'xgplayer-flv' | 'xgplayer-hls.js' | 'xgplayer-flv.js';

/**
 * 西瓜播放器网络配置
 */
export interface XgPlayerNetworkOptions {
  /**
   * 重试次数，单位毫秒
   * @defaultValue 3
   */
  retryCount?: number;
  /**
   * 重试间隔，单位毫秒
   * @defaultValue 1000
   */
  retryDelay?: number;
  /**
   * 请求超时时间，单位毫秒
   * @defaultValue 10000
   */
  loadTimeout?: number;
  /**
   * fetch请求配置
   */
  fetchOptions?: Record<string, any>;
  /**
   * 直播目标延迟，单位秒
   * @defaultValue 10
   */
  targetLatency?: number;
  /**
   * 直播允许的最大延迟，单位秒
   * @defaultValue 20
   */
  maxLatency?: number;
  /**
   * 直直播断流时间，单位秒
   * @defaultValue 0
   */
  disconnectTime?: number;
}

/**
 * 西瓜播放器组件属性
 */
export interface XgPlayerProps {
  /**
   * 视频流地址
   */
  url: string;
  /**
   * 播放器内核
   * @defaultValue 'xgplayer-hls'
   */
  core?: XgPlayerCore;
  /**
   * 清晰度切换选项
   */
  definitions?: VideoPlayerDefinition[];
  /**
   * 网络配置选项
   */
  networkOptions?: XgPlayerNetworkOptions;
}

/**
 * 西瓜播放器组件事件
 */
export type XgPlayerEmits = {
  error: [errorMsg: string];
};

/**
 * 西瓜播放器组件实例
 */
export type XgPlayerInstance = InstanceType<typeof XgPlayer>;

meta-player类型声明

import MetaPlayer from './meta-player.vue';
import type { VideoPlayerDefinition } from './video-player';

/**
 * 天翼视联播放器内核
 * - metaplayer-hls-soft: 无插件播放器软解码模式（四宫格以下HLS流使用）
 * - metaplayer-plugin-float: 使用插件进行播放（浮层模式）
 * - metaplayer-hls-hard: 针对HLS流，自动识别H.264、H.265编码进行无插件硬解码播放
 * - metaplayer-plugin-peer: 使用插件进行播放（同层模式）
 * - metaplayer-webRTC: webRTC直播协议流(仅支持H264)
 * - metaplayer-websocket: websocket + fmp4、websocket+flv直播流支持
 */
export type MetaPlayerCore =
  | 'metaplayer-hls-soft'
  | 'metaplayer-plugin-float'
  | 'metaplayer-hls-hard'
  | 'metaplayer-plugin-peer'
  | 'metaplayer-webRTC'
  | 'metaplayer-websocket';

/**
 * 天翼视联播放器组件属性
 */
export interface MetaPlayerProps {
  /**
   * 视频流地址
   */
  url: string;
  /**
   * 播放器内核
   * @defaultValue 'metaplayer-hls-hard'
   */
  core?: MetaPlayerCore;
  /**
   * 播放器地址
   * @defaultValue https://vcp.21cn.com/metaplayer/static/template/latest/player.html
   */
  playerURL?: string;
  /**
   * 申请的播放器授权appId
   */
  appId?: string;
  /**
   * https+租户播放器业务域名，在小程序场景下需传入
   */
  authUrl?: string;
  /**
   * 小程序的appid，在小程序场景下需传入
   */
  miniAppId?: string;
  /**
   * 清晰度切换选项
   */
  definitions?: VideoPlayerDefinition[];
}

/**
 * 天翼视联播放器组件事件
 */
export type MetaPlayerEmits = {
  error: [errorMsg: string];
};

/**
 * 天翼视联播放器组件实例
 */
export type MetaPlayerInstance = InstanceType<typeof MetaPlayer>;

Video Player 视频播放器 ​

全局配置 ​

业务注入 ​

基础用法 ​

动态加载 ​

属性 ​

xg-player可选参数 ​

meta-player可选参数 ​

播放器内核 ​