Blazor WASM/Server在iOS上无法播放带透明通道视频的问题求助

将以下视频代码片段嵌入空Blazor WASM或Blazor Server（.NET 7.0）应用后，带透明通道的视频在iOS设备的Safari、Firefox浏览器中无法播放，但在iOS Web App、Windows/Android的各类浏览器（Opera、Chrome、Firefox）中可正常播放。

测试环境与结果 #

• iOS-Safari/Blazor - 无法播放
• iOS-Firefox/Blazor - 无法播放
• iOS-Safari/WebApp - 可播放
• Win-Opera、Chrome、Firefox/Blazor - 可播放
• Android-Chrome、Firefox、Opera/Blazor - 可播放

代码片段 #

<video width="600" height="100%" autoplay loop muted playsinline>
    <source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4; codecs="hvc1"'>
    <source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">  
</video>

1. 补充兼容iOS的视频编码格式 #

iOS上的Blazor环境对HEVC（hvc1编码）带Alpha通道的MOV容器存在兼容性缺陷，建议额外添加H.264编码带Alpha通道的MP4版本作为备用源（需确保视频采用QuickTime兼容的Alpha通道格式，可通过FFmpeg或专业视频工具导出）：

<video width="600" height="100%" autoplay loop muted playsinline>
    <source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4; codecs="hvc1"'>
    <!-- 添加H.264带Alpha的备用源 -->
    <source src="path/to/your/movie-h264-alpha.mp4" type='video/mp4; codecs="avc1,mp4a"'>
    <source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">  
</video>

2. 通过JS Interop手动触发播放 #

Blazor的渲染时序可能导致iOS上视频自动播放触发异常，可在组件初始化后通过JavaScript手动调用播放方法：

• Razor组件代码：

  <video @ref="videoElement" width="600" height="100%" autoplay loop muted playsinline>
      <source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4; codecs="hvc1"'>
      <source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">  
  </video>
  
  @code {
      private ElementReference videoElement;
  
      protected override async Task OnAfterRenderAsync(bool firstRender)
      {
          if (firstRender)
          {
              await JS.InvokeVoidAsync("playVideo", videoElement);
          }
      }
  }
  

• 在wwwroot/js/interop.js中添加JS方法：

  function playVideo(video) {
      if (video && video.paused) {
          video.play().catch(err => console.error("视频播放失败:", err));
      }
  }
  

  记得在index.html中引入该JS文件：

  <script src="js/interop.js"></script>
  

3. 检查资源加载的CORS与响应头配置 #

确保视频资源的HTTP响应头包含正确的Content-Type（如HEVC视频对应video/mp4），且无CORS限制。若视频托管在外部域名，需在Blazor应用中配置CORS：

• Blazor Server：在Program.cs中添加

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowVideoOrigin", policy =>
      {
          policy.WithOrigins("https://rotato.netlify.app")
                .AllowAnyMethod()
                .AllowAnyHeader();
      });
  });
  
  app.UseCors("AllowVideoOrigin");
  

• Blazor WASM：在Program.cs中配置HttpClient

  builder.Services.AddScoped(sp => new HttpClient
  {
      BaseAddress = new Uri(builder.HostEnvironment.BaseAddress),
      DefaultRequestHeaders = { { "Access-Control-Allow-Origin", "*" } }
  });
  

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