Blazor WASM应用中HTML Video标签在iOS上无法正常工作

核心原因 #

Blazor启动后会接管首页DOM渲染，原静态HTML中的视频元素会被Blazor的组件DOM替换，而Safari对视频播放的权限、格式要求比Chrome更严格，同时Blazor的虚拟DOM处理可能导致视频元素的加载状态被重置。

具体解决步骤 #

• 改用Blazor组件渲染视频
  不要直接在index.html中写静态video标签，而是创建一个Blazor组件（比如HomeVideo.razor），将视频标签放在组件内：

  <video 
    poster="/path/to/poster.jpg" 
    controls 
    muted 
    playsinline
    width="100%"
  >
    <source src="/path/to/video.mp4" type="video/mp4">
    您的浏览器不支持视频播放
  </video>
  

  然后在首页组件（比如Index.razor）中引用这个组件：

  <HomeVideo />
  

  这样Blazor启动后会正确渲染视频元素，避免DOM替换导致的加载异常。

• 确保视频格式符合Safari要求
  Safari仅支持H.264编码的MP4视频（音频用AAC编码），不支持WebM等格式。将视频转码为标准MP4格式，可以用FFmpeg工具执行转码命令：

  ffmpeg -i input.webm -c:v libx264 -c:a aac output.mp4
  

• 处理Safari自动播放限制
  Safari禁止非静音视频自动播放，除非有用户交互。如果需要自动播放，必须添加muted和playsinline属性（playsinline用于iOS Safari避免强制全屏播放）。如果不需要自动播放，保留controls让用户手动触发即可。

• 避免Blazor渲染时重置视频状态
  如果需要保留视频播放状态（比如暂停进度），可以用JS互操作直接控制视频元素，或者在组件中通过@ref获取元素引用：

  <video @ref="videoElement" controls muted playsinline></video>
  
  @code {
    private ElementReference videoElement;
  
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
      if (firstRender)
      {
        // 组件渲染完成后尝试播放（需符合Safari权限规则）
        await JS.InvokeVoidAsync("playVideo", videoElement);
      }
    }
  }
  

  在wwwroot/js/interop.js中添加对应JS函数：

  function playVideo(video) {
    if (video && !video.muted) return;
    video.play().catch(err => console.log('播放失败:', err));
  }
  

  最后在index.html中引入这个JS文件。

• 验证服务器资源配置
  确保视频文件的Content-Type响应头正确设置为video/mp4，服务器（如IIS、NGINX）需配置对应的MIME类型。本地视频文件放在wwwroot目录下，路径引用要准确（比如/videos/home-video.mp4）。

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