HTML5视频并不总是加载视频

Question

我有一个包含两个视频播放器的页面，

<div class="row">
    <div class="col-sm-6">

      <video width="520" height="440" #mainV  controls [src]="CameraDataUrl">
    <canvas #captureCanvas ></canvas>
  </video>

    </div>

    <div class="col-sm-6">

      <video width="320" height="240" #subV  controls [src]="DashDataUrl"></video>

    </div>

  </div>

源代码来自TypeScript类：

this.GetCameraInterval = setInterval(() => {
      if (this.camera != null) {
        this.CameraDataUrl = "data:video/mp4;base64," + this.camera;
        clearInterval(this.GetCameraInterval);    
      }
    }, 100);

    this.GetDashInterval = setInterval(() => {
      if (this.dash != null) {
        this.DashDataUrl = "data:video/mp4;base64," + this.dash;
        clearInterval(this.GetDashInterval);
      }
    }, 100);

我在显示页面之前设置了超时2.5秒，以确保每个视频的网址都是从Redux获取地址（并将它们打印到控制台，所以我看到它们不是空的）， 但视频并不总是加载（有时它们都没有加载，有时一个，有时它们都没问题。但它们总是得到视频的地址）。

可能导致什么，我该如何解决？ 感谢

Answer 1

我尝试运行您的代码，进行更改并且运行正常 - 请考虑使用source元素：

<video controls>
     <source src="https://video.com/video.mp4" type="video/mp4">
</video>