fmode-video

基于Angular的高性能HLS视频播放器组件，支持HLS流媒体播放、自适应码率切换和丰富的播放控制功能。

特性

• 🎥 支持HLS流媒体播放
• 📱 自适应码率切换
• 🎛️ 完整的播放控制功能
• 🎨 现代化UI设计
• 🔧 支持自定义配置
• 🌐 基于Angular 20+和HLS.js构建
• 🚀 高性能视频播放体验

安装

# 使用npm
npm install fmode-video

# 使用yarn
cnpm install fmode-video

# 安装依赖
cnpm install @videogular/ngx-videogular/core @videogular/ngx-videogular/controls @videogular/ngx-videogular/overlay-play @videogular/ngx-videogular/buffering hls.js --save

使用

1. 在Module中导入（如果使用NgModules）

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FmodeVideoModule } from 'fmode-video';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FmodeVideoModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 对于Standalone组件

import { Component } from '@angular/core';
import { FmodeVideoComponent } from 'fmode-video';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FmodeVideoComponent],
  template: `
    <app-videogular [videoSources]="videoSources"></app-videogular>
  `
})
export class AppComponent {
  videoSources = [
    {label: '高清 1080p', url: 'https://example.com/video/1080p.m3u8', bitrate: 5000},
    {label: '标清 720p', url: 'https://example.com/video/720p.m3u8', bitrate: 2500}
  ];
}

3. 在HTML模板中使用

<app-videogular 
  [videoSources]="videoSources"
  [autoPlay]="true"
  [muted]="false"
  (ready)="onPlayerReady($event)"
  (play)="onPlay()"
  (pause)="onPause()"
></app-videogular>

API

输入属性

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | videoSources | Array<{label: string, url: string, bitrate: number}> | [] | 视频源列表，包含不同质量的HLS流 | | autoPlay | boolean | false | 是否自动播放 | | muted | boolean | false | 是否静音 | | initialQuality | number | 0 | 初始选择的视频质量索引 |

输出事件

| 事件 | 参数 | 描述 | |------|------|------| | ready | VgApiService | 播放器准备就绪时触发 | | play | 无 | 视频播放时触发 | | pause | 无 | 视频暂停时触发 | | error | any | 视频播放错误时触发 | | qualityChange | {label: string, url: string, bitrate: number} | 视频质量切换时触发 |

开发指南

克隆项目

git clone <repository-url>
cd component

安装依赖

cnpm install

构建库

ng build fmode-video

构建产物将生成在 dist/fmode-video 目录下。

发布到npm

1. 首先构建库：

   ng build fmode-video --configuration production

2. 进入构建目录：

   cd dist/fmode-video

3. 发布到npm：

   npm publish

注意：发布前请确保已登录npm账号，并且具有发布权限。

兼容性

• Angular 20.1.0及以上
• 现代浏览器（Chrome, Firefox, Safari, Edge）
• 移动设备浏览器

License

MIT