htmlangularazure-media-player

Video not displaying - No compatible source found in this media

I get the error No compatible source found in this media. (Image attached) . Code provided below.

However, if I paste the Raw URL for Source in the HTML the video gets displayed. (Ex: <source src="https://URL_FROM_AZURE_BLOB_STORAGE.com"/>)

enter image description here

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";

There are many post on this same issue: Here and Here

Solution 
  • <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();
  }
}