如何在Angular 15中用@videogular/ngx-videogular/buffering实现双音轨切换

ngx-videogular本身没有内置音轨切换控件，我们可以基于原生HTML5视频元素的audioTracks API手动实现该功能，以下是具体步骤：

1. 组件逻辑改造（获取音轨+切换方法） #

在你的播放器组件中，通过ViewChild获取VgPlayer实例，监听视频加载完成事件来获取音轨列表，并实现切换逻辑：

import { Component, ViewChild, OnInit } from '@angular/core';
import { VgPlayer } from '@videogular/ngx-videogular/core';

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent implements OnInit {
  @ViewChild(VgPlayer) vgPlayer!: VgPlayer;
  audioTracks: MediaStreamTrack[] = [];
  selectedTrackIndex: number = 0;

  ngOnInit(): void {
    // 视频元数据加载完成后获取音轨
    this.vgPlayer.videoElement.addEventListener('loadedmetadata', () => {
      this.audioTracks = Array.from(this.vgPlayer.videoElement.audioTracks);
      // 默认启用第一条音轨
      this.audioTracks.forEach((track, index) => {
        track.enabled = index === this.selectedTrackIndex;
      });
    });
  }

  switchAudioTrack(index: number): void {
    // 禁用所有音轨，仅启用选中项
    this.audioTracks.forEach((track, i) => {
      track.enabled = i === index;
    });
    this.selectedTrackIndex = index;
  }
}

2. 模板添加切换控件 #

在HTML模板中，添加下拉选择器或按钮组作为音轨切换入口，将其集成到播放器控件区域：

<vg-player #vgPlayer>
  <vg-overlay-play></vg-overlay-play>
  <vg-buffering></vg-buffering>

  <video [vgMedia]="vgPlayer" preload="auto" crossorigin>
    <source src="your-multi-track-video.mp4" type="video/mp4">
  </video>

  <vg-controls>
    <vg-play-pause></vg-play-pause>
    <vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
    <vg-scrub-bar></vg-scrub-bar>
    <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
    
    <!-- 自定义音轨切换控件 -->
    <div class="audio-switcher">
      <select (change)="switchAudioTrack(+$event.target.value)">
        <option 
          *ngFor="let track of audioTracks; let i = index" 
          [value]="i"
          [selected]="i === selectedTrackIndex"
        >
          {{ track.label || `音轨 ${i + 1}` }}
        </option>
      </select>
    </div>

    <vg-volume></vg-volume>
    <vg-fullscreen></vg-fullscreen>
  </vg-controls>
</vg-player>

3. 模块依赖补充 #

确保你的模块中导入了必要的依赖模块，包括表单模块（用于表单交互）：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { VgCoreModule } from '@videogular/ngx-videogular/core';
import { VgControlsModule } from '@videogular/ngx-videogular/controls';
import { VgBufferingModule } from '@videogular/ngx-videogular/buffering';
import { VideoPlayerComponent } from './video-player.component';

@NgModule({
  declarations: [VideoPlayerComponent],
  imports: [
    FormsModule,
    VgCoreModule,
    VgControlsModule,
    VgBufferingModule
  ]
})
export class VideoPlayerModule { }

关键注意事项 #

• 确认视频文件本身包含多音轨，否则audioTracks会是空数组
• 如果音轨没有自带label属性，可自定义显示文本（比如音轨1、音轨2）
• 部分浏览器对音轨的支持可能有差异，测试前确保目标浏览器支持HTMLMediaElement.audioTracks API

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