html - 视频未显示 - 在此媒体中找不到兼容的来源

Question

我收到错误No compatible source found in this media.（附图片）。下面提供的代码。

但是，如果我将源的原始 URL 粘贴到 HTML 中，则会显示视频。（例如<source src="https://URL_FROM_AZURE_BLOB_STORAGE.com"/>：）

HTML

<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="100%" height="100%" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
  <source src={{url}}/>
  <p class="amp-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
  </p>
</video>

TS

this.url =  "https://URL_FROM_AZURE_BLOB_STORAGE.com";

关于同一问题有很多帖子：Here和Here

Answer 1

<video #vid1 class="azuremediaplayer amp-default-skin" autoplay controls width="100%" height="100%"
  data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
  <source src="{{ url }}" />
  <p class="amp-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
  </p>
</video>

<button type="button" (click)="setUrl()">Set URL</button>

ts：

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
  url = '';
 
  @ViewChild('vid1') vid1;

  setUrl() {
    this.url =
      'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
    
    this.vid1.nativeElement.load();
  }
}