HTML5 Video视频加载不稳定问题排查与解决咨询

首先梳理下你的场景：你在Angular页面中嵌入了两个视频播放器，通过[src]绑定从Redux获取的base64格式MP4视频地址，用轮询方式等待Redux数据就绪，还设置了2.5秒延迟显示页面，但视频加载状态始终不稳定。结合你的代码，我来拆解可能的原因和对应的修复方法：

可能的原因 #

1. 轮询逻辑的不可靠性
   你用setInterval每100ms检查一次数据是否存在，但这种方式存在两个隐患：

   • 可能在Redux数据还未完全写入时就触发赋值（比如数据是异步分片写入的，此时this.camera不为空但内容不完整）
   • 轮询的清除依赖于第一次检测到非空值，如果Redux数据更新有延迟，可能错过有效赋值时机（虽然你加了2.5秒延迟，但仍有概率发生）

2. 视频元素的src绑定未触发重新加载
   Angular的[src]绑定更新后，部分浏览器不会自动触发视频元素的重新加载流程。即使URL正确，视频元素可能仍停留在初始空状态，没有去解析新的data URI。

3. 固定延迟的局限性
   2.5秒是固定值，但Redux获取数据的时间会因网络、状态同步速度波动，可能存在延迟结束时数据仍未完全就绪的情况。

4. base64视频数据的兼容性问题
   虽然控制台显示URL不为空，但base64编码的MP4可能存在编码格式不兼容浏览器的情况（比如缺少关键帧、编码格式不是浏览器支持的H.264/AAC等）。

修复方案 #

1. 替换轮询为Redux订阅（最推荐） #

放弃setInterval，直接订阅Redux的状态变化，精准捕获数据就绪时机，避免轮询的不确定性：

import { ViewChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs';

// 假设你的Redux选择器是这两个
import { selectCameraData, selectDashData } from './your-redux-selectors';

export class YourComponent implements OnInit, OnDestroy {
  CameraDataUrl?: string;
  DashDataUrl?: string;
  @ViewChild('mainV') mainV!: ElementRef<HTMLVideoElement>;
  @ViewChild('subV') subV!: ElementRef<HTMLVideoElement>;

  private cameraSubscription?: Subscription;
  private dashSubscription?: Subscription;

  constructor(private store: Store) {}

  ngOnInit(): void {
    // 订阅camera数据
    this.cameraSubscription = this.store.select(selectCameraData).subscribe(camera => {
      if (camera) {
        this.CameraDataUrl = "data:video/mp4;base64," + camera;
        this.loadVideo(this.mainV);
        this.cameraSubscription?.unsubscribe();
      }
    });

    // 订阅dash数据
    this.dashSubscription = this.store.select(selectDashData).subscribe(dash => {
      if (dash) {
        this.DashDataUrl = "data:video/mp4;base64," + dash;
        this.loadVideo(this.subV);
        this.dashSubscription?.unsubscribe();
      }
    });
  }

  // 手动触发视频加载的辅助方法
  private loadVideo(videoElementRef: ElementRef<HTMLVideoElement>) {
    const videoElement = videoElementRef.nativeElement;
    if (videoElement && this.isValidUrl(videoElement.src)) {
      videoElement.load();
      // 如果需要自动播放，可添加下面一行（注意浏览器自动播放策略限制）
      // videoElement.play().catch(err => console.error('自动播放失败:', err));
    }
  }

  // 简单校验URL有效性
  private isValidUrl(url: string): boolean {
    return url && url.startsWith('data:video/mp4;base64,');
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.cameraSubscription?.unsubscribe();
    this.dashSubscription?.unsubscribe();
  }
}

2. 优化页面显示时机：等待两个视频URL都就绪 #

不要用固定的2.5秒延迟，而是等CameraDataUrl和DashDataUrl都有值后再显示页面：

// 组件类中添加标志位
showPage = false;

// 在订阅回调中检查是否就绪
private checkIfReady() {
  if (this.CameraDataUrl && this.DashDataUrl) {
    this.showPage = true;
  }
}

// 记得在两个订阅的赋值后调用checkIfReady()

模板中用*ngIf控制显示：

<div class="row" *ngIf="showPage">
  <div class="col-sm-6">
    <video width="520" height="440" #mainV controls [src]="CameraDataUrl" (error)="onVideoError($event, '主视频')">
      <canvas #captureCanvas ></canvas>
    </video>
  </div>
  <div class="col-sm-6">
    <video width="320" height="240" #subV controls [src]="DashDataUrl" (error)="onVideoError($event, '副视频')"></video>
  </div>
</div>

3. 添加错误监听排查问题 #

给视频元素添加error事件监听，方便定位具体加载失败原因：

// 组件类中添加错误处理方法
onVideoError(event: Event, videoName: string) {
  const videoElement = event.target as HTMLVideoElement;
  const error = videoElement.error;
  console.error(`${videoName}加载失败:`, error?.message || error?.code || '未知错误');
}

4. 验证base64数据有效性 #

把控制台打印的CameraDataUrl和DashDataUrl复制出来，去掉前缀data:video/mp4;base64,，用在线工具转成MP4文件，检查是否能正常播放。如果不能播放，说明Redux返回的base64数据本身存在编码问题，需要排查数据源的编码流程。

这些方案中，优先尝试用Redux订阅替换轮询，这是解决加载不稳定最根本的方式，能彻底避免轮询带来的时机误差。

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