0

Here's my dilema, and I've searched to no avail.

I have a need to load and play an mp4 video once they page is fully loaded, then once that video is done I'd like to run a script to fade there div container of them video is in out to effectively get rid of it. Think of this as an intro video that plays, then gets removed.

I know this is possible with flash, but I'd prefer not to use flash if possible. Any ideas?

Thanks in advance.

Josh

user3741214
  • 61
  • 5
  • If you know the video lengths beforehand and your scenario does not allow the user to extend the required display length (e.g. pause the video), you could work with setTimeout. - i.e. in case you display advertisement or intro videos. For more complex scenarios you could take a look at this open source HTML5 video playback API at https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md for example. – Chris S. Jun 14 '14 at 21:25
  • Also have a look here: http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events – Chris S. Jun 14 '14 at 21:26

1 Answers1

1

You can use Javascript: take a look at this post

If I have understood correctly what you want to do, you basically need to remove the DOM element containing the video once it ends:

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

    video.onended = function(e) {
      var parent = video.parentNode;
      if (parent) {
         parent.removeChild(video);
      }
    };
</script>

Assuming you only have one video TAG in your page (otherwise you can use document.getElementById)

Community
  • 1
  • 1
mlr
  • 886
  • 6
  • 15
  • 1
    Since he tagged his question jQuery, he could as well use `$("#videoID").get(0).onended(function(){$(this).fadeOut().then(function(){$(this).remove();});});` or something similar. – Chris S. Jun 14 '14 at 21:29
  • That would remove the video on end, but what about the parent element? How would I fade that out? – user3741214 Jun 15 '14 at 00:07
  • As Chris suggested, you can use jQuery `fadeOut()` method: `$(parent).fadeOut()` just before (or after) `parent.removeChild(video);` If you don't want to use external libraries, you can always exploit `setInterval` to create an animation on `parent.style.opacity` – mlr Jun 16 '14 at 23:05