时间戳

首页 > 解决方案 > 单击时隐藏按钮并在视频结束时显示第二个按钮

javascript - 单击时隐藏按钮并在视频结束时显示第二个按钮

问题描述

Stack Overflow 上的第一篇文章！

我有一个 HTML5 视频，其中删除了默认控件并添加了 Play/Spin to Win 按钮。单击后，我需要此按钮消失，然后在视频播放完毕后出现第二个按钮，该按钮链接到新 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>

标签： javascripthtml

解决方案

您应该使用Video API 的媒体事件来实现这一点。具体来说，您需要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>

所以一旦视频结束，回调函数就会被事件触发。您可以设置新的来源。通过运行代码段并让视频结束进行检查，您将在控制台中看到消息弹出窗口。

推荐阅读