快速开始

thumbplayer-h5基于thumbplayer-core封装，是一个提供流程化、插件化和部分业务化功能(循环播放、错误重试等)的播放器。

流程化指的是定义了一套包含广告的完整生命周期；插件化指的是提供了开发播放器插件的能力、允许外部切入播放流程。

得益于插件化能力，thumbplayer-h5不仅可以播放url，还能播放自定义id，内部其实是用约定的VideoReqInfoPlugin插件（需要自行实现）将自定义id转换成url后进行播放。

thumbplayer-h5内置质量上报、indexedDB离线日志、数据中心、错误上报探测、播放限时5个功能插件（不含UI）。

安装

npm

npm install @tencent/thumbplayer-h5

cdn

<script src="https://vm.gtimg.cn/thumbplayer/h5player/latest/thumbplayer-h5.js"></script> 
<!-- 全局变量: window.ThumbPlayerH5 ->

创建播放器

  <div id="player" style="position: relative; height: 56.25vw;"></div>

import { H5Player } from '@tencent/thumbplayer-h5';

const player = new H5Player({ container: '#player' });
// cdn对应使用 const player = new window.ThumbPlayerH5.H5Player({ container: '#player' });
player.load({ url: 'https://baikebcs.bdimg.com/baike-other/big-buck-bunny.mp4' });

初始化配置

/** 初始化配置 */
export interface IH5PlayerConfig extends IPlayerConfig {
    /** 要创建的插件 */
    plugins?: PluginConfig;
    /** 要混入的属性/方法 */
    mixins?: Mixin[];
    offlineConfig?: OfflineConfig;
    /** 是否循环播放 */
    loop?: boolean;
    vodQaReporterConfig?: VodQaReporterConfig;
    liveQaReporterConfig?: LiveQaReporterConfig;
    /** @deprecated */
    coreConfig?: Omit<IPlayerConfig, 'container'>;
    /** @deprecated 自动播放被拦截后是否静音播放 */
    autoPlayInMute?: boolean;
    /** 自动播放策略 */
    autoPlayPolicy?: AUTO_PLAY_POLICY;
    /** 禁用部分缓存用户参数 */
    disableUserSettingCache?: (keyof typeof COMMON_DATA_KEY)[];
    /** 是否使用单video标签模式播放，启用的话不会预加载。移动端默认开启（多video在ios 15等设备上无法起播） */
    useSingleVideoElement?: boolean;
    /** 是否延迟创建非h5player内置插件，用于优化起播 */
    lazyInitPlugins?: boolean;
    /** 是否在非全屏状态下自动隐藏鼠标 */
    autoHideMouse?: boolean;
}