玩家-网络-x
下一代Bitmovin网络播放器.
玩家Web X(简称PWX)是Bitmovin公司开发的网络的新视频播放器. 它基于一个内部开发的图书馆,我们称之为"凤凰框架".
凤凰城框架从地上建起,其基本原理包括结构化的通币、效果系统和一揽子第一架构,促进扩展。 玩家Web X是建立在框架上方的由状态驱动的架构上. 玩家Web X的开发重点是使一个表现高的玩家,由不同包组成的不同,更小和目的所构建的捆绑,以及一个包API. API软件包允许自定义行为和功能在玩家外部构建,使我们的客户能够支持自己的使用案例而不需要我们的帮助.
目前,Player Web X有对使用fMP4和TS片段格式的HLS流的支持和对DASH流和黏膜内容的部分支持. 关于所支持的特性的更详细和完整的清单,请参见: 支持矩阵。 。 。 .
要了解更多框架和玩家,请检查我们 完整文档。 。 。 .
开始
用 Player Web X 启动最简单的方式是使用我们从 cdn 开始的捆绑和一个简单的 HTML 页面将玩家嵌入其中. 你可以更多地读到我们的不同方法 正在启动页面。 。 。 .
但在这里,我们将只覆盖 Npm 包的使用 将玩家捆绑到您的应用程序.
使用 npm 软件包
此示例显示如何从 npm 使用单曲播放器 。 首先您需要将玩家安装到您的工程中
npm install @bitmovin/player-web-x
import { Player } from '@bitmovin/player-web-x/bundles/playerx-hls';
const player = Player({
key: 'YOUR-PLAYER-KEY',
defaultContainer: document.getElementById('player-container')
});
const sourceConfig = {
resources: [{
url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
}]
}
player.sources.add(sourceConfig);
或用包裹. 在这种情况下,您需要自己合并API类型.
import { Player } from '@bitmovin/player-web-x/bundles/playerx-core';
import { AdaptationPackage } from '@bitmovin/player-web-x/packages/playerx-adaptation.package';
import { CapabilitiesPackage } from '@bitmovin/player-web-x/packages/playerx-capabilities.package';
import { ContainerMp4Package } from '@bitmovin/player-web-x/packages/playerx-container-mp4.package';
import { DataPackage } from '@bitmovin/player-web-x/packages/playerx-data.package';
import { HlsPackage } from '@bitmovin/player-web-x/packages/playerx-hls.package';
import { HlsParsingPackage } from '@bitmovin/player-web-x/packages/playerx-hls-parsing.package';
import { HlsTranslationPackage } from '@bitmovin/player-web-x/packages/playerx-hls-translation.package';
import { NetworkPackage } from '@bitmovin/player-web-x/packages/playerx-network.package';
import { PresentationPackage } from '@bitmovin/player-web-x/packages/playerx-presentation.package';
import { SegmentProcessingPackage } from '@bitmovin/player-web-x/packages/playerx-segment-processing.package';
import { SourcePackage } from '@bitmovin/player-web-x/packages/playerx-source.package';
import { SourcesApiPackage } from '@bitmovin/player-web-x/packages/playerx-sources-api.package';
import { ViewModePackage } from '@bitmovin/player-web-x/packages/playerx-view-mode.package';
import type { ViewModeApi } from '@bitmovin/player-web-x/types/framework/core/view-mode/Types'
import type { SourceApiBase, SourcesApi } from '@bitmovin/player-web-x/types/framework/core/sources-api/Types'
import type { PlayerApi } from '@bitmovin/player-web-x/types/framework/core/player-api/Types'
type SourceApi = SourceApiBase & ViewModeApi;
type MyApi = PlayerApi & SourcesApi<SourceApi>;
const player = Player({
key: 'YOUR-PLAYER-KEY',
defaultContainer: document.getElementById('player-container')
}) as MyApi
player.packages.add(CapabilitiesPackage);
player.packages.add(SegmentProcessingPackage);
player.packages.add(ContainerMp4Package);
player.packages.add(DataPackage);
player.packages.add(NetworkPackage);
player.packages.add(HlsTranslationPackage);
player.packages.add(HlsParsingPackage);
player.packages.add(HlsPackage);
player.packages.add(PresentationPackage);
player.packages.add(SourcePackage);
player.packages.add(AdaptationPackage);
player.packages.add(SourcesApiPackage);
player.packages.add(ViewModePackage);
const sourceConfig = {
resources: [{
url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
}]
}
player.sources.add(sourceConfig);
Bitmovin 播放器 V8 兼容性
为了避免被干扰,我们还建立了一个兼容层,允许您使用此玩家作为v8的下拉- 更多关于它的读取在我们 文档
软件包模板存储器
为了了解更多关于软件包以及如何构建软件包,请检查我们的 软件包模板仓库。它包括各种类型的软件包的例子,也作为软件包构建系统发挥作用.