Insert video into HTML after 10 seconds using Javascript

Question

People need to insert a video into my HTML after 5 seconds using Javascript, before 5 seconds the video is not displayed. I even put the video on the page using Javascript but tried to use the Settimeout function but without Exito. Can you give me tips on how to get the expected result ? Below follows my partial code.

HTML

< video id="newvideo" autoplay style="position: absolute; width: 480px;height: 270px; z-index: 2; top: 37px;left: 800px;cursor: pointer;">
  </video>

Javascript

<script>
    var video = document.getElementById("newvideo");

    video.src="video-maxi.mp4";

    video.onmouseover=function(){
      video.volume=1;
      console.log('mouseover')
    } / Ativar som com MouseOver

    video.onmouseout=function(){
      video.volume=0;
      console.log('mouseout');
    } / Desativar som MouseOut
 </script>

Answer 1

Use the method setTimeout.

function mostrar() {
  document.getElementById("newvideo").style.visibility = "visible";
};

setTimeout("mostrar()", 5000); // Depois de 5 segundos

<div id="newvideo" style="visibility: hidden">Mostre Div depois de 5 segundos</div>

Adapt the html according to your need, replacing the tag div.

Answer 2

DEMO

CSS

.hide{
    display:none;
}
.show{
    display:block;
}

SCRIPT

    window.onload=function()
{
    setTimeout(func1, 10000); 

};
function func1()
{
    document.getElementById("video").className="show";
}

HTML

<div id="video" class="hide">

<video controls id="newvideo" autostart style="position: absolute; width: 480px;height: 270px; z-index: 2; top: 37px;left: 800px;cursor: pointer;">
  <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>

</div>

In javascript, a timeout is a quantity of time (in milliseconds) before an indicated expression is evaluated. A timeout is not a wait or delay in the script, but a means of telling javascript to hold the execution of an instruction or function for a desired amount of time.

In the expression setTimeout(func1, 10000); the function func1 is carried out after the expiry of the time limit of 10000 milliseconds.

Answer 3

Thanks for the help guys,helped me so much. I used the concepts of the two answers and I arrived at the expected result. Below follows the final code.

<script>
    setTimeout(function() {var video=document.getElementById("video").style.display = "block";}, 5000);
</script>

 <video id="video" src="video-maxi.mp4" autoplay style="position: absolute; width: 480px;height: 270px; z-index: 2; top: 37px;left: 800px;cursor: pointer; display: none;"> </video>