Javascript 视频暂停不是功能

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 file

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

.ts file

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));

Answer 2

我的问题是我尝试暂停 jQuery 对象，但这是不可能的。您需要暂停 DOM 元素。所以我通过将我的 jQuery 对象转换为 DOM 元素来更正它。

之前：

$("#video").pause();

之后/解决：

$("#video)[0].pause();

Javascript 视频暂停不是功能

Javascript video pause is not a function

javascript

html5-video

typescript