Question

我想在我的嵌入式游戏中播放视频，当视频结束时，我希望它消失，以便我们无缝地从介绍本身转到游戏本身（无法将视频插入游戏中）在我工作的引擎中）。我怎样才能做到这一点？目前，我有这样的事情：

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class = "container"><span>
<iframe src='...' />
<video autoplay> <source src="intro.mp4" type="video/mp4">
</video>
</span></div>

<script>
    var video = document.getElementsByTagName('video')[0];

    video.onended = function(e) {
      # Don't know what to put in here
    };
</script>

</body></html>

Answer 1

您可以采用的一种方法是为游戏的元素和视频提供完全相同的尺寸。

然后，您可以在页面开始时使用内联css display: none;隐藏游戏，一旦视频结束，您就可以隐藏视频并显示游戏。

var game = document.getElementById("...");
var video = document.getElementById("...");

game.style.display = "none";

video.onended = function(e) {
  video.style.display = "none";
  // or if you want to destroy it permanently
  // video.parentNode.removeChild(video);
  // video = null;
  game.style.display = "";
};

销毁HTML视频播放器？

1 个答案: