Question

关于堆栈溢出的第一篇文章！

我有一个HTML5视频，其中删除了默认控件，并添加了“播放/旋转至赢”按钮。单击后，我需要此按钮消失，然后在视频播放完后，出现另一个按钮，该按钮链接到新的URL。

任何指导将不胜感激。

我到目前为止的代码如下：

function playPause(btn, vid) {
  var vid = document.getElementById(vid);
  if (vid.paused) {
    vid.play();
    btn.innerHTML = "Pause";
  } else {
    vid.pause();
    btn.innerHTML = "Play";
  }
}

div#video_player_box {
  width: 550px;
  background: #000;
  margin: 0px auto;
}

div#video_controls_bar {
  background: #333;
  padding: 10px;
}

#playpausebtn {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="video_player_box">
  <video id="my_video" width="550" height="300" autoplay>
    <source src="memory-of-a-woman.mp4">
  </video>
  <div id="video_controls_bar">
    <button id="playpausebtn" onclick="playPause(this,'my_video')">Spin to Win</button>
  </div>
</div>

Answer 1

您应该使用Video API的Media Events来实现这一点。具体来说，您需要ended事件监听器。

还更正了无效的引用。

function playPause(btn, vid) {
  var vid = document.getElementById(vid);
  if (vid.paused) {
    vid.play();
    btn.innerHTML = "Pause";
  } else {
    vid.pause();
    btn.innerHTML = "Play";
  }
  vid.onended = function () {
    console.log("Ended. Do something.");
    btn.style.display = "none";
  };
}

window.onload = function () {
  var vid = document.getElementById("my_video");
  vid.onended = function () {
    console.log("Ended. Do something.");
  };
};

div#video_player_box {
  width: 550px;
  background: #000;
  margin: 0px auto;
}

div#video_controls_bar {
  background: #333;
  padding: 10px;
}

#playpausebtn {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="video_player_box">
  <video id="my_video" width="550" height="300" autoplay>
    <source src="https://interactive-examples.mdn.mozilla.net/media/examples/stream_of_water.webm">
  </video>
  <div id="video_controls_bar">
    <button id="playpausebtn" onclick="playPause(this,'my_video')">Spin to Win</button>
  </div>
</div>

因此，视频结束后，事件将触发回调函数。您可以设置新的来源。通过运行该代码段来签出并让视频结束，您将在控制台中看到消息弹出窗口。

单击时隐藏按钮，并在视频端显示第二个按钮

1 个答案: