Ionic移动端视频开发求助：本地视频播放与视口自动播放异常

我来帮你逐个解决这两个Ionic/Cordova开发里的常见问题：

一、修复本地视频无法播放的问题 #

你当前的路径处理和视频标签写法存在几个关键问题，调整后应该能正常播放：

1. 正确处理iOS本地视频路径
   直接替换/private/无法解决iOS本地文件的访问问题，需要借助Cordova的File插件转换成视频标签可识别的合法URI。先确保已安装cordova-plugin-file，再修改获取视频的代码：

import { File } from '@ionic-native/file/ngx';

// 在组件构造函数注入File服务
constructor(private camera: Camera, private file: File) {}

this.camera.getPicture(cameraOptions).then(async (videoUrl) => {
  if (videoUrl) {
    // 转换为iOS可识别的文件URI
    const fileUri = await this.file.resolveLocalFilesystemUrl(videoUrl);
    this.chosenVideoHolder = fileUri.toURL(); // 生成cdvfile://或file://格式的有效路径
  }
}).catch(err => console.error("视频路径转换失败：", err));

2. 清理video标签的无效属性
   你的source标签存在重复src=""属性，且错误地将视频URL设为poster（poster应为图片占位符），这些都会干扰视频加载：

<video 
  [hidden]="hideChosenVideo" 
  playsinline 
  loop 
  [muted]="isMuted"  <!-- 后续用变量控制静音 -->
  preload="auto" 
  [id]="'media-' + video?.id"
>
  <source [src]="chosenVideoHolder" type="video/mp4">
</video>

移除poster="{{chosenVideoHolder}}"（如需占位图请单独准备图片资源），删除source标签里多余的src=""。

二、修复静音切换与视口自动播放问题 #

1. 修复静音切换失效 #

当前代码有两个核心错误：

• video标签同时存在[muted]="'muted'"和muted="muted"，硬编码属性会覆盖绑定变量，且绑定值是字符串而非布尔值
• 第一个HTML片段中video的id为video1，但TS代码里查找的是'media-' + id，元素ID不匹配导致无法找到目标

调整方案：

• 在组件中定义布尔变量控制静音状态：

  public isMuted = true; // 默认静音
  
  public changeVideoAudio() {
    this.isMuted = !this.isMuted;
    // 若需直接操作DOM（不推荐，优先用变量绑定），确保ID匹配：
    // const vid = document.getElementById(`media-${this.video?.id}`);
    // if (vid) (vid as HTMLVideoElement).muted = !this.isMuted;
  }
  

• 修改video标签的静音绑定逻辑：

  <div tappable (tap)="changeVideoAudio()">
    <video 
      [hidden]="hideChosenVideo" 
      playsinline 
      loop 
      [muted]="isMuted" 
      preload="auto" 
      [id]="'media-' + video?.id"
    >
      <source [src]="chosenVideoHolder" type="video/mp4">
    </video>
  </div>
  

2. 正确实现视口检测（替代inViewport指令） #

如果inViewport指令使用[inViewportOptions]报错，大概率是指令兼容性问题，推荐用原生Intersection Observer API实现视口检测，更灵活可靠：

private observer: IntersectionObserver;

ngAfterViewInit() {
  const videoEl = document.getElementById(`media-${this.video?.id}`);
  if (!videoEl) return;

  // 配置：当视频进入视口65%时触发动作
  const options = {
    threshold: 0.65,
    rootMargin: '0px'
  };

  this.observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const video = entry.target as HTMLVideoElement;
      if (entry.isIntersecting) {
        // 进入视口自动内联播放（iOS要求playsinline+静音才能自动播放）
        video.play().catch(err => console.error("自动播放失败：", err));
      } else {
        // 离开视口暂停播放
        video.pause();
      }
    });
  }, options);

  this.observer.observe(videoEl);
}

ngOnDestroy() {
  if (this.observer) this.observer.disconnect(); // 组件销毁时清理观察者
}

之后移除video标签上的inViewport和(inViewportAction)属性，即可通过原生API实现视口检测逻辑。

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