Insert video in HTML after 10 seconds using Javascript

Question

Insert video in HTML after 10 seconds using Javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Personal I need to insert a video into my HTML after 5 seconds using JavaScript, before 5 seconds the video is not displayed. I got to put the video on the page using Javascript but tried to use the SetTimeOut function but without success. Can you give me tips on how to get the expected result? Below is 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>

javascript html5

asked by anonymous 11.06.2017 / 03:15

3 answers

Wordpress Error - cURL library Element does not accept the property "height" nor "min-height"

score 1 · Answer 1

Use the setTimeout method.

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 html according to your needs by replacing the div tag.

score 0 · 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 an amount of time (in milliseconds) before an indicated expression evaluates. A timeout is not a wait or delay in the script, but a means of telling the javascript to hold the execution of an instruction or function for a desired amount of time.

In the expression setTimeout(func1, 10000); the func1 function is executed after the timeout of 10000 milliseconds is exhausted.

score 0 · Answer 3

Thanks for the help guys, they helped me a lot. I used the concepts of the two answers and got the expected result. Below is 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>