@byteplus/veplayer 1.6.0-alpha.3 → 1.6.3-rc.1

package/README.md

@@ -1,62 +1,46 @@
-### Volcengine/player
+### VePlayer
 
-火山引擎视频云播放器，BytePlus平台见[英文版](./READEME_EN.md)
-
-### 安装
+[BytePlus](https://www.byteplus.com/en) Web player SDK，can automatically adapt to PC and H5 scenes, support MP4, HLS, FLV, DASH and other formats of on-demand and live broadcast, combined with video cloud, it has functions such as playback quality log reporting, encrypted playback, etc.
 
+### Import the SDK
+Install SDK dependencies into the project through the package management tool.
 ```bash
-npm install @volcengine/veplayer --save
+npm install @byteplus/veplayer --save
+```
+Import VePlayer and style files in the project.
+```javascript
+import VePlayer from '@byteplus/veplayer';
+import '@byteplus/veplayer/dist/index.min.css';
 ```
 
-### 示例
+### Add playback container
+Add a player container on the page where the player needs to be displayed, for example, add the following code to index.html.
+```javascript
+<div id="video"></div>
+```
+### Player instantiation
+After getting the video URL, instantiate the player.
 
-```js
-const playerSdk = new VePlayer({
-  id: 'mse',
-  url: '/url',
-  playList: [
-    {
-      lineId: 1,
-      lineTextKey: '线路一',
-      url: '/url',
-      definition: 'ld',
-      streamType: 'rtm',
-      definitionTextKey: 'LD',
-    },
-    {
-      lineId: 1,
-      lineTextKey: '线路一',
-      url: '/url',
-      definition: 'hd',
-      streamType: 'rtm',
-      definitionTextKey: 'HD',
-    },
-    {
-      lineId: 1,
-      lineTextKey: '线路一',
-      url: '/url',
-      definition: 'uhd',
-      streamType: 'rtm',
-      definitionTextKey: 'UHD',
-    },
-    {
-      lineId: 2,
-      lineTextKey: '线路二',
-      url: '/url',
-      definition: 'ld',
-      streamType: 'rtm',
-      definitionTextKey: 'LD',
-    },
-    {
-      lineId: 2,
-      lineTextKey: '线路二',
-      url: '/url',
-      definition: 'hd',
-      streamType: 'rtm',
-      definitionTextKey: 'HD',
-    },
-  ],
-  width: 600,
-  height: 400,
+#### Video On Demand
+```javascript
+const player = new VePlayer({
+    id: 'video', // playback container
+    url: "https://demo.vod.com/xxx.mp4", // video URL
+    vodLogOpts: {
+        vtype: 'MP4', // Video format, the video of HLS protocol should be imported into HLS
+        tag: 'Normal', // Business tags, used to distinguish different scenarios in the business, to facilitate subsequent multi-dimensional analysis
+        line_app_id: 235399, // [Required] The value is int type, the SDK application id for accessing VOD, which can be obtained from VOD Console-VOD SDK-Application Management
+        line_user_id: 'XXX' // User id, String or int type, if not passed in, it will be a value randomly generated according to the user's browser
+    }
 });
 ```
+For a detailed description of VOD, refer to[BytePlus - Video On Demand - Player SDK - Web](https://docs.byteplus.com/en/byteplus-vod/docs/getting-started-with-the-sdk_2)
+
+#### Live
+```javascript
+const playerSdk = new VePlayer({
+  id: 'video',
+  isLive: true,
+  url: '//livepull.example.com/appname/streamname.flv'
+});
+```

package/{dist/index.d.ts → index.d.ts}

@@ -1,4 +1,6 @@
+import VodLogger from '@byted/xgplayer-app-logger/es/logger.js';
 import { Property } from 'dom-helpers/esm/types';
+import EventEmitter from 'eventemitter3';
 import Player from 'xgplayer';
 import { I18N, IXGI18nText, Plugin } from 'xgplayer';
 
@@ -445,62 +447,6 @@ export interface ISubtitleStyle {
 	 */
 	fontColor?: string;
 }
-/**
- * @detail Options
- *
- * @export
- * @interface IListItem
- */
-export interface IListItem {
-	/**
-	 * 开始时间
-	 * 默认值：无
-	 * @type { number}
-	 * @memberof IListItem
-	 */
-	start: number;
-	/**
-	 * 结束时间
-	 * 默认值：无
-	 * @type { number}
-	 * @memberof IListItem
-	 */
-	end: number;
-	/**
-	 * 字幕文案列表
-	 * 默认值：无
-	 * @type {Array<Object>}
-	 * @memberof IListItem
-	 */
-	list: {
-		/**
-		 * 默认值：无
-		 * @hidden
-		 * @type {any}
-		 */
-		[propName: string]: any;
-		/**
-		 * 开始时间
-		 * @type {number}
-		 */
-		start: number;
-		/**
-		 * 结束时间
-		 * @type {number}
-		 */
-		end: number;
-		/**
-		 * 字幕文案数组
-		 * @type {string[]}
-		 */
-		text: string[];
-		/**
-		 * 字幕顺序
-		 * @type {number}
-		 */
-		index?: number;
-	}[];
-}
 /**
  * @detail Options
  *
@@ -557,29 +503,70 @@ export interface ISubTitleItem {
 	 * @type {Array<Object>}
 	 * @memberof ISubTitleItem
 	 */
-	list?: {
-		/**
-		 * 默认值：无
-		 * @hidden
-		 * @type {any}
-		 */
-		[propName: string]: any;
-		/**
-		 * 开始时间
-		 * @type {number}
-		 */
-		start: number;
-		/**
-		 * 结束时间
-		 * @type {number}
-		 */
-		end: number;
-		/**
-		 * 子字幕列表
-		 * @type {Array<IListItem>}
-		 */
-		list: Array<IListItem>;
-	}[];
+	list?: IListItem[];
+}
+/**
+ * @detail Options
+ *
+ * @export
+ * @interface IListItem
+ */
+export interface IListItem {
+	/**
+	 * 开始时间
+	 * @type {number}
+	 */
+	start: number;
+	/**
+	 * 结束时间
+	 * @type {number}
+	 */
+	end: number;
+	/**
+	 * 字幕数据列表
+	 * @type {Array<ITextItem>}
+	 */
+	list: Array<ITextItem>;
+	/**
+	 * 默认值：无
+	 * @hidden
+	 * @type {any}
+	 */
+	[propName: string]: any;
+}
+/**
+ * @detail Options
+ *
+ * @export
+ * @interface ITextItem
+ */
+export interface ITextItem {
+	/**
+	 * 默认值：无
+	 * @hidden
+	 * @type {any}
+	 */
+	[propName: string]: any;
+	/**
+	 * 开始时间
+	 * @type {number}
+	 */
+	start: number;
+	/**
+	 * 结束时间
+	 * @type {number}
+	 */
+	end: number;
+	/**
+	 * 字幕文案数组
+	 * @type {string[]}
+	 */
+	text: string[];
+	/**
+	 * 字幕顺序
+	 * @type {number}
+	 */
+	index?: number;
 }
 /**
  * @detail Options
@@ -828,11 +815,17 @@ export interface IVodLogOptsConfig {
 	 */
 	vtype?: "MP4" | "HLS" | "DASH" | "FLV";
 	/**
-	 * 自定义标签
+	 * 自定义标签，对应控制台"业务维类型"维度
 	 * 默认：`default`
 	 * 必选
 	 */
 	tag?: string;
+	/**
+	 * 自定义子标签，对应控制台"自定义标签"维度
+	 * 默认：`default`
+	 * 必选
+	 */
+	subtag?: string;
 	/**
 	 * 视频解码器类型名称
 	 * 默认：`h264`
@@ -1105,10 +1098,20 @@ export interface apiMapItem {
 	playDomain: string;
 	backupPlayDomain?: string;
 }
+export interface IAutoplayPluginConfig {
+	position?: string;
+	enableDegradeMuteAutoplay?: boolean;
+	enableWxJsBridgeAutoplay?: boolean;
+	userActionDom?: Node;
+	enableUserActionAutoplay?: boolean;
+}
 declare enum CodecType {
 	H265 = "h265",
 	H264 = "h264"
 }
+declare enum RTMCodec {
+	H264 = "h264"
+}
 export declare type PLAY_MODE_TYPE = "order" | "sloop" | "loop" | "random";
 export interface IMusicListItem {
 	/**
@@ -1373,6 +1376,13 @@ export interface IPlayerConfig extends IPlayerOptions {
 	 * @memberof IPlayerConfig
 	 */
 	enableHlsMSE?: boolean;
+	/**
+	 * 在PC Safari上是否不使用hls插件播放，默认true。true: 启用；false: 不启用
+	 *
+	 * @type {boolean}
+	 * @memberof IPlayerConfig
+	 */
+	useHlsPluginForSafari?: boolean;
 	/**
 	 * 是否开启mp4的MSE模式，开启后采用MSE方式播放MP4，
 	 * 同时带来精确的seek加载、视频的无缝切换、流量节省等功能
@@ -1489,6 +1499,34 @@ export interface IPlayerConfig extends IPlayerOptions {
 	 * @memberof IPlayerConfig
 	 */
 	expireDetectType?: Array<"xhrStatus" | "getUrlTime">;
+	/**
+	 * 有声音自动播放失败时是否降级成静音自动播放，默认不降级
+	 *
+	 * @type {boolean}
+	 * @memberof IPlayerConfig
+	 */
+	enableDegradeMuteAutoplay?: boolean;
+	/**
+	 * 启用微信jsBridge方式的自动播放，默认不开启
+	 *
+	 * @type {boolean}
+	 * @memberof IPlayerConfig
+	 */
+	enableWxJsBridgeAutoplay?: boolean;
+	/**
+	 * 开启任意点击的用户行为触发自动播放，默认不开启
+	 *
+	 * @type {boolean}
+	 * @memberof IPlayerConfig
+	 */
+	enableUserActionAutoplay?: boolean;
+	/**
+	 * 禁用点播日志配置检测，默认开启，如果未配置line_app_id则会播放报错
+	 *
+	 * @type {boolean}
+	 * @memberof IPlayerConfig
+	 */
+	disableVodLogOptsCheck?: boolean;
 	/**
 	 * 播放器报错展示配置, 可以配置播放异常时的播放器显示的异常文案、图片，以及是否提供刷新按钮等
 	 *
@@ -1580,6 +1618,12 @@ export interface IPlayerConfig extends IPlayerOptions {
 	 * @memberof IPlayerConfig
 	 */
 	music?: IMusicConfig;
+	/**
+	 * 自动播放配置
+	 * @type {IMusicConfig}
+	 * @memberof IPlayerConfig
+	 */
+	AutoplayPlugin?: IAutoplayPluginConfig;
 }
 /**
  * 初始配置
@@ -1661,6 +1705,14 @@ export interface IPlayAuthTokenConfig {
 	 * @memberof IPlayAuthTokenConfig
 	 */
 	playAuthToken: string;
+	/**
+	 * 默认清晰度
+	 *
+	 * @notes 为空时默认为最大码率的清晰度
+	 * @type {string}
+	 * @memberof IPlayAuthTokenConfig
+	 */
+	defaultDefinition?: string;
 	/**
 	 * 求地址接口域名
 	 *
@@ -1712,20 +1764,20 @@ export interface IPlayAuthTokenConfig {
 	 */
 	getKeyType?: string;
 	/**
-	 * 获取privateDrmAuthToken的回调，
+	 * 获取privateDrmAuthToken的异步回调，
 	 * @type {(
 	 *     playAuthIds: string,
 	 *     vid: string,
 	 *     unionInfo: string,
-	 *   ) => Promise<Record<string, string>>}
+	 *   ) => Promise<string>}
+	 * 回调入参：
+	 * playAuthIds 视频的密钥 KeyID，对应OpenAPI GetPlayInfo{@link https://www.volcengine.com/docs/4/2918#%E8%AF%B7%E6%B1%82%E8%AF%B4%E6%98%8E} 返回视频信息中的PlayAuthId，当有多个KeyID时以英文逗号相连
+	 * vid 视频vid
+	 * unionInfo 由unionId生成的unionInfo，以用来加密PrivateDrmAuthToken
 	 * @memberof IPlayAuthTokenConfig
+	 *
 	 */
 	getDrmAuthToken?: (playAuthIds: string, vid: string, unionInfo: string) => Promise<string>;
-	/**
-	 * 是否禁用DRM解密播放降级，默认false
-	 * @type {boolean}
-	 */
-	disDrmDegraded?: boolean;
 	/**
 	 * 可携带aid等透传参数，如
 	 * {aid: 1234}，以playAuthToken下发的参数的优先级最高。
@@ -1902,6 +1954,8 @@ declare class PlayerData {
 	unionId?: string;
 	unionInfo?: string;
 	isMusic?: boolean;
+	sdkPlugins: any[];
+	useHlsPluginForSafari: boolean;
 	constructor(configs: IPlayerConfig);
 	initPlayData(configs: any): void;
 	initPlaylistAndGetCurrent(configs: IPlayerConfig): any;
@@ -1927,7 +1981,7 @@ declare class PlayerData {
 	/**
 	 * @description: 获取根据线路ID去重的流，用于获取有几个线路
 	 */
-	getLineList(): any;
+	getLineList(): Stream[];
 	/**
 	 * @description: 根据线路ID获取符合条件的流
 	 * @param {number} lineId
@@ -1937,7 +1991,7 @@ declare class PlayerData {
 	 * @description: 根据线路ID获取清晰度list,用于获取某个线路下有几个清晰度
 	 * @param {number} lineId
 	 */
-	getDefinitionListByLineId(lineId: number | string): any;
+	getDefinitionListByLineId(lineId: number | string): Stream[];
 	/**
 	 * @description: 根据条件筛选符合条件的流list
 	 * @param {Condition} condition
@@ -1965,6 +2019,7 @@ declare class MobilePlayerPanel {
 	container: HTMLElement | undefined;
 	title: HTMLElement | undefined;
 	isShow: boolean;
+	showCancelBtn: boolean;
 	constructor(args: any);
 	initEvents(): void;
 	handleOrientationChange(): void;
@@ -2002,6 +2057,7 @@ declare class VePlayer {
 		playerVersion?: string;
 		panel?: MobilePlayerPanel;
 		emitExpireTimestamp?: number;
+		vodLogger?: VodLogger;
 	};
 	/**
 	 * @hidden
@@ -2099,7 +2155,10 @@ declare class VePlayer {
 	private sdkUmdLoader;
 	static isMSESupported: typeof isMSESupport;
 	static isRTMSupported: typeof import("@byted/xgplayer-rts").RtsPlugin.isSupported;
-	static playerVersion: string;
+	static sdkVersion: string;
+	static isRTMSupportCodec: (codec: RTMCodec, options: {
+		targetProfileLevel?: string;
+	}) => Promise<boolean>;
 	constructor(configs: IPlayerConfig);
 	/**
 	 *
@@ -2127,6 +2186,7 @@ declare class VePlayer {
 	 * @memberof VePlayer
 	 */
 	private initUmdLoader;
+	private checkVodLogOptions;
 	/**
 	 * @hidden
 	 * @description umd 加载失败的回调
@@ -2209,6 +2269,7 @@ declare class VePlayer {
 		playerVersion?: string;
 		panel?: MobilePlayerPanel;
 		emitExpireTimestamp?: number;
+		vodLogger?: VodLogger;
 	}>;
 	/**
 	 * @hidden
@@ -2425,6 +2486,7 @@ declare class VePlayer {
 		playerVersion?: string;
 		panel?: MobilePlayerPanel;
 		emitExpireTimestamp?: number;
+		vodLogger?: VodLogger;
 	};
 	/**
 	 * @hidden
@@ -2565,6 +2627,11 @@ declare class VePlayer {
 	 * @memberof VePlayer
 	 */
 	musicRemoveAbCycle(): void;
+	/**
+	 * 获取质量日志上报的用户id
+	 * @return {string | undefined}
+	 */
+	getLogUserId(): any;
 	/**
 	 * 销毁当前播放器SDK实例
 	 *
@@ -3130,6 +3197,54 @@ export declare class LiveInfoPanel extends Plugin {
 	close(): void;
 	render(): string;
 }
+export declare class SdkPlugin {
+	pluginName: string;
+	__args: any;
+	sdk: VePlayer;
+	playerData: PlayerData;
+	player: Player;
+	_emitter: EventEmitter;
+	static defineGetterOrSetter(Obj: any, map: any): void;
+	/**
+	 * @type { string }
+	 */
+	static get pluginName(): string;
+	/**
+	 * @constructor
+	 * @param { { sdk: object, pluginName: string, [propName: string]: any;}  } args
+	 */
+	constructor(args: any);
+	/**
+	 * @description sdk实例创建，挂载插件实例时首先执行
+	 */
+	beforeCreate(): void;
+	/**
+	 * @description sdk实例创建，挂载插件实例完后执行
+	 */
+	afterCreate(): void;
+	/**
+	 * @description sdk创建播放器前执行，只有这里能保证异步操作在creatPlayer之前同步完成
+	 */
+	beforePlayerCreate(): void;
+	/**
+	 * @description sdk创建播放器完执行
+	 */
+	afterPlayerCreate(): void;
+	/**
+	 * @description sdk销毁时执行
+	 */
+	destroy(): void;
+	/**
+	 * @private
+	 * @param { any } args
+	 */
+	__init(args: any): void;
+	/**
+	 * @description 插件销毁
+	 * @private
+	 */
+	__destroy(): void;
+}
 export * from "xgplayer";
 
 export {