Angular17项目：桌面端HTML5视频自动播放失效，移动端正常

针对你遇到的桌面端视频无法自动播放、移动端正常的问题，以下是几个实用的解决思路：

• 确保视频彻底无音频轨道
  部分桌面浏览器对muted属性的检测很严格，即使标签加了muted，如果视频本身包含音频轨道，依然可能被拦截。可以用FFmpeg移除音频：

  ffmpeg -i intro.mp4 -an -c:v copy intro-muted.mp4
  

  替换原视频文件后再测试。

• 监听视频加载状态后手动触发播放
  直接依赖autoplay属性可能因加载时机问题失效，通过Angular的ViewChild获取视频元素，在视频可播放时调用play()：
  模板代码：

  <video #introVideo src="assets/video/intro.mp4" loop muted playsinline preload="auto"></video>
  

  组件TS代码：

  import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html'
  })
  export class HomeComponent implements AfterViewInit {
    @ViewChild('introVideo') introVideo!: ElementRef<HTMLVideoElement>;
  
    ngAfterViewInit(): void {
      const video = this.introVideo.nativeElement;
      
      video.addEventListener('canplaythrough', () => {
        video.play().catch(err => console.error('播放失败:', err));
      });
      
      video.load();
    }
  }
  

• 补充兼容性属性
  为桌面浏览器添加额外的内联播放属性，提升兼容性：

  <video src="assets/video/intro.mp4" autoplay loop muted playsinline webkit-playsinline moz-playsinline preload="auto"></video>
  

• 检查浏览器自动播放设置
  部分用户的桌面浏览器可能手动禁用了自动播放，可提示用户检查：比如Chrome进入「设置→隐私和安全→网站设置→声音」，确认允许网站自动播放静音视频。

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