@ 广播平台/ 播放器

通用视频播放器网络组件由Lit. Supports HLS,WebRTC(通过纳米斯特雷姆)和LiveKit所建.

安装

npm install @broadcastingplatforms/player
# or
pnpm add @broadcastingplatforms/player

独立对非独立

独立套装

需要所有依赖性(HLS.js等)捆绑的单个文件时使用独立捆绑. CDN使用理想或简单的HTML页面.

<script type="module" src="https://unpkg.com/@broadcastingplatforms/player/dist/bp-player.standalone.mjs"></script>

<bp-player
  source='{"sources":[{"type":"video","url":"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"}]}'
  muted
  autoplay
></bp-player>

非单体( 邦德勒 )

使用捆绑时使用标准导入( Vite, webpack等) 。 依附有外生而有树相起.

import '@broadcastingplatforms/player';

<bp-player
  source='{"sources":[{"type":"video","url":"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"}]}'
  muted
  autoplay
></bp-player>

基本用途

HLS 视频 (大巴克兔子)

<bp-player
  source='{"sources":[{"type":"video","url":"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"}],"poster":"https://peach.blender.org/wp-content/uploads/bbb-splash.png"}'
  muted
  autoplay
></bp-player>

平流线

播放来自 BPLive 平台的直播流 :

<bp-player id="live-player" muted autoplay></bp-player>

<script type="module">
  const player = document.getElementById('live-player');

  player.source = { sources: [{ type: 'bplive', streamId: 123 }] };
  player.config = {
    bpLive: {
      discoveryUrl: 'https://api.example.com',
      authToken: await getAuthToken() // Set programmatically, not in HTML
    }
  };
</script>

BPLive 剪贴板

从 BPLive 平台播放剪辑 :

<bp-player id="clip-player" muted autoplay></bp-player>

<script type="module">
  const player = document.getElementById('clip-player');

  player.source = {
    sources: [{ type: 'bplive', clipId: 456, preferredOrientation: 'portrait' }]
  };
  player.config = {
    bpLive: {
      discoveryUrl: 'https://api.example.com',
      authToken: await getAuthToken() // Set programmatically, not in HTML
    }
  };
</script>

带有默认 UI

<bp-default-ui
  source='{"sources":[{"type":"video","url":"https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"}]}'
></bp-default-ui>

程序控制

import { BPPlayer, type SourceDescription } from '@broadcastingplatforms/player';

const player = document.querySelector('bp-player') as BPPlayer;

// Set source via property (object)
player.source = {
  sources: [{ type: 'video', url: 'https://example.com/stream.m3u8' }],
  poster: 'https://example.com/poster.jpg'
};

player.addEventListener('ready', (e) => {
  const core = e.detail; // PlayerCore instance
  
  core.play();
  core.pause();
  core.seek(30); // seek to 30 seconds
  core.setVolume(0.5);
  core.setMuted(true);
  
  // Access current state
  console.log(core.state.currentTime);
  console.log(core.state.duration);
  console.log(core.state.paused);
});

属性

属性可以被设定为JSON字符串或JavaScript属性.

来源描述

interface SourceDescription {
  sources: PlayerSource[];
  poster?: string;
}

玩家来源类型

// Standard video/HLS source
interface VideoSource {
  type: 'video';
  url: string;
}

// BPLive stream source
interface BPLiveStreamSource {
  type: 'bplive';
  streamId: number;
}

// BPLive clip source
interface BPLiveClipSource {
  type: 'bplive';
  clipId: number;
  preferredOrientation?: 'landscape' | 'portrait'; // defaults to 'landscape'
}

提供者配置

interface ProviderConfig {
  bpLive?: BPLiveConfig;
  // ... other provider configs
}

interface BPLiveConfig {
  discoveryUrl: string;  // Base URL of the BPLive API (required)
  authToken?: string;    // Bearer token for authenticated API requests
}

分析

通过 ready 使用 @broadcastingplatforms/web-connectors数字 :

<bp-player
  id="player"
  source='{"sources":[{"type":"video","url":"..."}]}'
></bp-player>

<script type="module">
  import { createMuxConnector } from '@broadcastingplatforms/web-connectors/mux';

  document.getElementById('player').addEventListener('ready', (e) => {
    // Auto-destroys when player is destroyed
    createMuxConnector(e.detail, {
      envKey: 'your-mux-env-key',
      data: { video_title: 'My Video' }
    });
  });
</script>

活动

自定义视频元素

对于高级使用案例,您可以直接使用自定义视频元素:

import { HlsVideoElement, NanoVideoElement, LiveKitVideoElement } from '@broadcastingplatforms/player/elements';

这些是 介质色调 兼容自定义元素.