Welcome to TalkGraphics.com
Results 1 to 2 of 2
  1. #1
    Join Date
    Feb 2020
    Posts
    2

    Default Hide a video when it finishes playing?

    Hi,
    Ive tried a few things like onended in the video tags. I cant seem to get this to work. I have a 15 second video that autoplays on page load but I want it to disappear (preferably fade out) after its done playing. Anyone have any pointers? I've tried this

    <div id="introvid">
    <video class="xar_meplayer" src="index_htm_files/stage manager intro video.mp4" controls autoplay width = "100%" height="100%" onended="myFunction()"/>
    </div>

    function myFunction() {
    var x = document.getElementById("introvid");
    if (x.style.display === "none") {
    x.style.display = "block";
    } else {
    x.style.display = "none";
    }
    }


    But it doesn't work. Any help is appreciated

  2. #2
    Join Date
    Apr 2018
    Location
    London
    Posts
    171

    Default Re: Hide a video when it finishes playing?

    A different way to do this that might work for you? I inserted a coloured rectangle 1920px x 1080px for the closing frames of my intro video to match the background colour of the website e.g https://initiostar.co.uk. In my case the headline message and menu have a delayed fade-in animation over the video. The intro video is on the index page, plays once and the menu takes you to pages 1, 2 etc. Works on the desktop and mobile variant and uses export option scale-to-fit-width.

    HTML Code:
    <! --1920 x 1080 video set to fill the browser window-->
    <style>
    * {  box-sizing: border-box;}
    
    #myVideo {
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%; 
      min-height: 100%;
    }
    </style>
    
    <video autoplay muted id="myVideo">
    <source src="Intro.mp4"  type="video/mp4">
    </video>
    Another way if you have a headline banner video (say 1920px x 400px) is to place the video at the top of the page and have the menu bar scroll to stick-at-top whereby the video scrolls out of view. If the video has sound you may need to code a pause video when it scrolls out of site.

    Click image for larger version. 

Name:	Banner Video.jpg 
Views:	12 
Size:	97.0 KB 
ID:	126362

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •