如何在基于Angular的Ionic框架中集成Vidstack视频库？

1. 安装Vidstack依赖 #

通过包管理器安装Vidstack核心播放器：

npm install @vidstack/player@next
# 或使用yarn
yarn add @vidstack/player@next

如果需要HLS/DASH流媒体支持，额外安装对应扩展：

npm install @vidstack/player@next @vidstack/hls@next
# 或
yarn add @vidstack/player@next @vidstack/hls@next

2. 配置Angular支持Web Components #

Vidstack基于Web Components构建，需配置Angular以识别自定义元素：

• 在src/main.ts中导入并注册Vidstack元素：

import '@vidstack/player/define';
// 若使用HLS扩展，添加以下导入
// import '@vidstack/hls/define';

• 在app.module.ts中添加CUSTOM_ELEMENTS_SCHEMA到模块配置：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

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

3. 封装Vidstack为Angular组件 #

为适配Angular数据流和生命周期，封装专用组件便于复用：

创建vidstack-player.component.ts：

import { Component, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-vidstack-player',
  template: `
    <vds-player #player>
      <vds-video poster="{{posterUrl}}" crossorigin="anonymous">
        <source [src]="videoSrc" type="{{videoType}}" />
      </vds-video>
      <vds-controls>
        <vds-play-button></vds-play-button>
        <vds-time-display show-duration></vds-time-display>
        <vds-progress-bar>
          <vds-progress-bar-slider></vds-progress-bar-slider>
        </vds-progress-bar>
        <vds-volume-control></vds-volume-control>
        <vds-fullscreen-button></vds-fullscreen-button>
      </vds-controls>
    </vds-player>
  `,
  styles: [`
    vds-player {
      width: 100%;
      max-width: 90%;
      margin: 1rem auto;
      --vds-control-color: #fff;
      --vds-control-hover-color: #488aff; /* 匹配Ionic主题色 */
      --vds-progress-bar-fill-color: #488aff;
    }
  `]
})
export class VidstackPlayerComponent {
  @Input() videoSrc!: string;
  @Input() videoType = 'video/mp4';
  @Input() posterUrl?: string;

  @Output() play = new EventEmitter<void>();
  @Output() pause = new EventEmitter<void>();

  @ViewChild('player') playerRef!: ElementRef;

  ngAfterViewInit() {
    const player = this.playerRef.nativeElement;
    player.addEventListener('play', () => this.play.emit());
    player.addEventListener('pause', () => this.pause.emit());
  }

  togglePlay() {
    this.playerRef.nativeElement.togglePlay();
  }
}

记得在对应页面/共享模块中声明该组件。

4. 在Ionic页面中使用组件 #

在Ionic页面模板中直接调用封装好的组件：

<ion-content class="ion-padding">
  <h2>自定义Vidstack播放器</h2>
  <app-vidstack-player
    [videoSrc]="'https://example.com/your-video.mp4'"
    [posterUrl]="'https://example.com/your-poster.jpg'"
    (play)="onVideoPlay()"
    (pause)="onVideoPause()"
  ></app-vidstack-player>
  <ion-button (click)="player.togglePlay()">切换播放状态</ion-button>
</ion-content>

在页面TS文件中关联组件实例：

import { Component, ViewChild } from '@angular/core';
import { VidstackPlayerComponent } from '../components/vidstack-player/vidstack-player.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  @ViewChild(VidstackPlayerComponent) player!: VidstackPlayerComponent;

  onVideoPlay() {
    console.log('视频开始播放');
  }

  onVideoPause() {
    console.log('视频暂停');
  }
}

5. 适配Ionic交互与样式 #

• 全屏层级适配：避免Vidstack全屏容器被Ionic头部遮挡，添加CSS：

vds-player::part(fullscreen-container) {
  z-index: 10000;
}

• 手势冲突处理：若Ionic页面滑动手势与播放器进度条拖拽冲突，在页面中禁用对应方向手势：

import { Component } from '@angular/core';
import { GestureController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private gestureCtrl: GestureController) {}

  ionViewDidEnter() {
    const gesture = this.gestureCtrl.create({
      el: document.querySelector('app-vidstack-player'),
      gestureName: 'block-horizontal-swipe',
      direction: 'x',
      onStart: () => true, // 阻止水平滑动事件冒泡到Ionic
    });
    gesture.enable();
  }
}

内容的提问来源于stack exchange，提问作者mfragale