视频无法显示，报错No compatible source found in this media求助

你遇到的报错核心原因是：Azure Media Player 会在页面初始化阶段直接读取 <source> 标签的 src 属性完成媒体源加载校验，你通过TS动态绑定URL时，播放器初始化完成早于URL赋值的时机，导致播放器读取到的是空值/未渲染完成的变量，因此抛出找不到兼容源的错误。直接写死URL时，初始化阶段就能读到完整地址，所以可以正常加载。

方法1：关闭自动初始化，URL赋值完成后手动初始化播放器 #

修改HTML代码，移除data-setup自动初始化配置，同时补充type属性声明媒体格式： #

<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="100%" height="100%">
  <source src={{url}} type="video/mp4"/>
  <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>

注意将type值替换为你实际存储的视频对应的MIME类型，HLS流请填application/x-mpegURL

修改TS代码，先处理URL安全校验再手动初始化播放器 #

如果是Angular框架，需要先通过DomSanitizer标记地址为安全资源，避免被框架的安全机制拦截：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
// 声明AMP全局对象
declare var amp: any;

export class YourComponent {
  url: SafeResourceUrl;
  player: any;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    const rawVideoUrl = "https://URL_FROM_AZURE_BLOB_STORAGE.com";
    // 标记地址为安全资源
    this.url = this.sanitizer.bypassSecurityTrustResourceUrl(rawVideoUrl);
    // 等待DOM完成src渲染后手动初始化播放器
    setTimeout(() => {
      this.player = amp('vid1', {
        "techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],
        "nativeControlsForTouch": false
      })
    }, 0)
  }
}

方法2：调用播放器API动态设置媒体源 #

如果播放器已经完成初始化，不要直接修改<source>标签的属性，直接调用AMP内置的src方法更新源即可：

// 已初始化播放器后执行
this.player.src([{
  src: "https://URL_FROM_AZURE_BLOB_STORAGE.com",
  type: "video/mp4"
}])

其他排查点 #

• 确认Azure Blob存储的CORS规则已经添加了你当前站点的域名，允许跨域访问资源
• 检查视频文件的格式、编码符合所声明的MIME类型，避免因编码不兼容导致报错
• 非Angular框架也需要排查对应框架的动态资源绑定安全策略，确保动态赋值的URL不会被框架自动拦截

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