javascript - 使相同的按钮播放/暂停 html5 视频

Question

所以我曾经有过这个工作，但最终我把它弄坏了，现在我需要让它重新工作。

我希望当您按下 PLAY 按钮时，视频将开始播放。并且 PLAY 按钮会将其文本更改为 PAUSE。然后，当您再次单击它时，视频将暂停。

HTML:

<video id="myVideo" width="1024" height="576">
  <source src="myaddiction.mp4" type="video/mp4">
  <source src="myaddiction.mp4.ogg" type="video/ogg"> 
  Your browser does not support HTML5 video.
</video>

<button id="button" onclick="playPause(); ">PLAY</button>

脚本:

var vid = document.getElementById("myVideo");

function playPause() {
  vid.play();
}

function playPause() {
  vid.pause();
}




function playPause() {
  var change = document.getElementById("button");
  if (change.innerHTML == "PLAY") {
    change.innerHTML = "PAUSE";
  } else {
    change.innerHTML = "PLAY";
  }
}

这也是一个包含所有内容的 fiddle 。如果您知道如何让视频在其中运行，那么添加它会很棒。谢谢!

https://jsfiddle.net/wb83hydn/

**编辑:目前的问题是按下按钮时视频无法播放。按钮更改文本，但视频不执行任何操作。

Answer 1

您分别定义了 playPause 函数 3 次。你很可能会得到一些意想不到的结果。也就是说，如果解释器没有完全出错。只需创建一个函数，并使用全局变量来处理播放/暂停状态的跟踪，您将获得更好的服务。像这样:

var vid = document.getElementById("myVideo");
var isPlaying = false;

function playPause() {
  var change = document.getElementById("button");
  if (isPlaying) {
    vid.pause();
    change.innerHTML = "PLAY";
  } else {
    vid.play();
    change.innerHTML = "PAUSE";
  }
  isPlaying = !isPlaying;
}