Question

所以我在视频方面遇到了一些麻烦，我有一个网站，在那我有3个不同页面中显示的同一视频。视频全部暂停，直到用户单击它们以开始播放。问题是，即使我单击播放或暂停或根本没有做任何事情，我仍然离开页面，而视频仅在那儿，另外两个给我一个错误，说vid.pause不是函数。

这是HTML部分->

<video id="{{vid?.id}}" src={{vid?.video}} onloadedmetadata="this.paused = true; this.currentTime = 1" (click)="playPause(vid)"> </video>

还有js->

  playPause(vid) {
    var vid = (<HTMLMediaElement>document.getElementById(vid.id));
    if (vid.paused == true) {
      vid.play();
    } else {
      vid.pause();
      vid.currentTime = 1;
    }
  }

Answer 1

更新：

要注意的一件事是：

您正在将vid属性传递给元素，然后返回给.ts。这不是好习惯。

此外，您在属性内部使用变量的方式也不正确。

做到这一点的最好方法是：

.html文件

<video #myVideo [id]="vid?.id" [src]="vid?.video" onloadedmetadata="this.paused = true; this.currentTime = 1" (click)="playPause(myVideo)"> </video>

.ts文件

playPause(vid: HTMLMediaElement) {
    if (vid.paused == true) {
      vid.play();
    } else {
      vid.pause();
      vid.currentTime = 1;
    }
  }

我的猜测是您的HTML和JS文件有所不同。

在HTML文件中，视频ID为vid.id。在您的JS文件中，您正在使用getElementById，并将id传递为vid.video。

因此，var vid将是undefined，而vid.pause()将不是函数。

您可能必须使用var vid = (<HTMLMediaElement>document.getElementById(vid.id));

Javascript视频暂停不是功能

1 个答案: