Destroying the HTML video player?

Question

I want to play a video over an embedded game of mine and when the video ends, I want it to disappear so that we seamlessly go from the intro to the game itself (can't insert the video into the game in the engine I'm working in). How can I do this? Currently, I have something like this:

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

Well, you can either hide the video or delete the entire element containing it. Do you need to re-use it later? — briosheje, Jun 25 '15 at 15:44
@briosheje - nope, I don't need it anymore after it plays out once — Straightfw, Jun 25 '15 at 15:45
Just a thought but could you start with the game hidden and time the video. Then, once the video is supposed to end, hide it and show the game. — Logan Hasbrouck, Jun 25 '15 at 15:45
@LoganHasbrouck - that suits me as well if not destroying the video doesn't impact performance but how do I hide and unhide them? — Straightfw, Jun 25 '15 at 15:47
@Straightfw - Use javascript to show and hide their containing divs. — Logan Hasbrouck, Jun 25 '15 at 15:47
Here... this might be better instead of hiding the video after - this should remove it (link) http://stackoverflow.com/questions/3258587/how-to-properly-unload-destroy-a-video-element — Logan Hasbrouck, Jun 25 '15 at 15:50

score 0 · Answer 1 · answered Jun 25 '15 at 15:49

One way you can do it is by giving the exact same size to the game's element and the video.

Then you could hide the game with the inline css display: none; when the page starts, and once the video ends you can hide the video and display the game.

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 = "";
};

Destroying the HTML video player?

1 Answers1