【Ionic2】页面导航后视频无法重新播放求助

这个问题我之前也碰到过，核心原因是ngOnInit只会在组件首次初始化时执行一次，当你从首页返回视频页面时，组件已经存在，ngOnInit不会再次触发，导致playVideo方法没重新调用；另外，上次播放的视频元素状态没重置，也会导致无法正常播放。下面是具体的解决方法：

1. 改用Ionic页面生命周期钩子触发播放 #

把视频播放的逻辑从ngOnInit移到ionViewDidEnter钩子中——这个钩子会在**每次页面进入（包括从其他页面返回）**时触发，确保每次进入视频页面都能重新加载播放视频。

2. 用Angular的ViewChild获取视频元素（替代document.getElementById） #

直接操作DOM在Angular/Ionic里不是最佳实践，用ViewChild可以更安全地获取视频元素，避免DOM操作带来的潜在问题。

3. 离开页面时清理视频状态 #

在页面离开时暂停视频、清空资源，避免状态残留，确保下次进入时视频处于初始状态。

完整代码示例 #

组件代码（.ts文件）

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

export class VideoPage implements OnInit {
  userId: string;
  // 通过ViewChild获取模板中的视频元素
  @ViewChild('videoTag') videoElement: ElementRef<HTMLVideoElement>;
  private video: HTMLVideoElement;

  constructor(private user: /* 这里替换成你的用户服务实例 */) {}

  ngOnInit() {
    this.userId = this.user.userId;
    // 初始化时获取视频元素引用
    this.video = this.videoElement.nativeElement;
  }

  // 每次页面进入（包括返回）都会执行
  ionViewDidEnter() {
    this.playVideo("abc.mp4");
  }

  // 离开页面时清理视频资源
  ionViewWillLeave() {
    if (this.video) {
      this.video.pause();
      this.video.src = ''; // 清空视频源
      this.video.load(); // 重置视频元素状态
    }
  }

  playVideo(src: string) {
    if (!this.video) return;
    
    // 重新设置视频源并加载播放
    this.video.src = src;
    this.video.load();
    // 捕获播放失败的错误，方便调试
    this.video.play().catch(err => {
      console.error('视频播放出错:', err);
    });
  }
}

模板代码（.html文件）

<video width="320" height="240" controls #videoTag></video>

额外说明 #

• 如果你使用的是网络视频资源，要确保src的路径是正确的（比如绝对路径或者正确的相对路径）。
• 如果视频播放仍然有问题，可以检查浏览器控制台的错误信息，看看是否有跨域、资源加载失败等问题。

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