yx-video

v1.0.5

Published

13 days ago

player live stream

0High
0Medium
0Low

yzqc

yx-video

基于 Web Components 的视频播放器组件库，支持 FLV 和 HLS 直播/点播流。

特性

🎯 原生 Web Components - 无框架依赖，可在任何前端项目中使用
📺 多协议支持 - 支持 FLV 和 HLS 流媒体协议
🎨 自定义 UI - 完全自定义的播放器控制界面
🔧 灵活配置 - 支持全局配置和实例级配置
📡 事件系统 - 完整的播放状态事件监听
🔄 自动重连 - 播放失败自动重试机制
🎭 Shadow DOM - 样式隔离，不影响外部样式

安装

npm install yx-video @yxlib/core

快速开始

1. 初始化区域配置

import { InitRegion } from '@yxlib/core';

// 初始化区域配置（必须在使用组件前调用，无论有多少个此类组件，此方法仅需调用一次）
InitRegion();

2. 设置全局配置（可选）

import { SetVideoConfig } from 'yx-video';

SetVideoConfig({
  licenseUrl: 'https://your-license-url.com/license',
  loadingBg: './assets/loading.png',      // 相对路径或完整 URL
  stopBg: './assets/video_bg.jpg',        // 相对路径或完整 URL
  skins: 'right',  // 控制器皮肤：'default' | 'chang' | 'right'
  baseurl: ''  // 组件资源基础路径，默认自动检测
});

资源路径说明：

loadingBg / stopBg：支持相对路径（如 ./assets/bg.jpg）或完整 URL
baseurl：组件资源的基础路径
- 默认为空，组件会自动从 node_modules/yx-video/dist/ 加载
- 如需自定义，可设置为 ./public 或 CDN 地址（末尾的 / 可加可不加）
- 组件会从 {baseurl}/skins/{skin}/css.css 加载样式

3. 使用组件

<!-- FLV 直播 -->
<yx-video 
  src="https://example.com/live/stream.flv"
  autoplay
  muted
></yx-video>

<!-- HLS 点播 -->
<yx-video 
  src="https://example.com/vod/video.m3u8"
  license-url="https://your-license-url.com/license"
  skins="right"
></yx-video>

4. 监听事件

const player = document.querySelector('yx-video');

// 播放开始
player.addEventListener('play', () => {
  console.log('播放开始');
});

// 正在播放
player.addEventListener('playing', () => {
  console.log('正在播放');
});

// 播放暂停
player.addEventListener('pause', () => {
  console.log('播放暂停');
});

// 播放卡顿/缓冲
player.addEventListener('waiting', () => {
  console.log('播放卡顿');
});

// 播放结束
player.addEventListener('ended', () => {
  console.log('播放结束');
});

// 播放错误
player.addEventListener('error', (e) => {
  const { src, statusCode, error } = e.detail;
  console.error(`播放错误 - 地址: ${src}, 状态码: ${statusCode}`, error);
  
  if (statusCode === 404) {
    console.warn('流地址不存在');
  }
});

API 文档

全局配置

使用 SetVideoConfig() 设置全局默认配置：

SetVideoConfig({
  licenseUrl: '',      // 腾讯云播放器 license 地址
  loadingBg: '',       // 加载中背景图（相对路径或完整 URL）
  stopBg: '',          // 停止播放背景图（相对路径或完整 URL）
  skins: 'default',    // 控制器皮肤：'default' | 'chang' | 'right'
  baseurl: ''          // 组件资源基础路径，默认自动检测
});

组件属性

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | src | String | - | 视频流地址（必填） | | license-url | String | - | 腾讯云播放器 license 地址 | | autoplay | Boolean | false | 是否自动播放 | | muted | Boolean | false | 是否静音 | | skins | String | 'default' | 控制条皮肤 | | loading-bg | String | - | 加载中背景图 | | stop-bg | String | - | 停止播放背景图 | | roomurl | String | - | 直播间链接地址 |

事件

| 事件名 | 说明 | 事件参数 | |--------|------|----------| | play | 播放开始 | - | | playing | 正在播放（首帧渲染后） | - | | pause | 播放暂停 | - | | waiting | 播放卡顿/缓冲中 | - | | ended | 播放结束 | - | | error | 播放错误 | { src, statusCode, error } |

方法

通过自定义事件触发组件方法：

const player = document.querySelector('yx-video');

// 重新加载流
player.dispatchEvent(new CustomEvent('reload-stream'));

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>yx-video 示例</title>
  <style>
    yx-video {
      display: block;
    }
  </style>
</head>
<body>
  <yx-video id="player" autoplay></yx-video>
  <button onclick="switchStream()">切换流</button>

  <script type="module">
    import { InitRegion } from '@yxlib/core';
    import { SetVideoConfig } from 'yx-video';

    // 初始化区域配置
    InitRegion();

    // 设置全局配置
    SetVideoConfig({
      licenseUrl: 'https://your-license-url.com/license',
      loadingBg: './assets/loading.png',
      stopBg: './assets/video_bg.jpg',
      skins: 'right'
    });

    const player = document.getElementById('player');
    const streams = [
      'https://example.com/live/stream1.flv',
      'https://example.com/live/stream2.flv',
      'https://example.com/live/stream3.flv'
    ];

    let currentIndex = 0;
    player.setAttribute('src', streams[currentIndex]);

    // 切换流
    window.switchStream = function() {
      currentIndex = (currentIndex + 1) % streams.length;
      player.setAttribute('src', streams[currentIndex]);
    };

    // 监听事件
    player.addEventListener('playing', () => {
      console.log('正在播放');
    });

    player.addEventListener('error', (e) => {
      const { src, statusCode } = e.detail;
      if (statusCode === 404) {
        console.warn(`流地址 ${src} 不存在，自动切换`);
        switchStream();
      }
    });
  </script>
</body>
</html>

开发

安装依赖

npm install

启动开发服务器

npm run dev

构建

npm run build

发布

# 发布正式版本
npm run up

# 发布 beta 版本
npm run beta

技术栈

Web Components - Custom Elements + Shadow DOM
TCPlayer.js - 腾讯云播放器
Vite - 构建工具

浏览器支持

支持所有现代浏览器（需要支持 Web Components）：

Chrome 67+
Firefox 63+
Safari 10.1+
Edge 79+

许可证

Commercial

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

yx-video

特性

安装

快速开始

1. 初始化区域配置

2. 设置全局配置（可选）

3. 使用组件

4. 监听事件

API 文档

全局配置

组件属性

事件

方法

完整示例

开发

安装依赖

启动开发服务器

构建

发布

技术栈

浏览器支持

许可证

相关链接