How to make a video start and restart automatically?

Asked

Viewed 186 times

4

Good evening, I’m making a website and in the middle of it I put a video that I want to start and restart automatically without the user having to click the play button or the restart button, can anyone help me Obs: I tried using the autoplay attribute and it didn’t work? Aki is the code:

Pokemon Generations 

<body style="background-image: url(Fundo/fundo_pokemon_branco.jpg)">
    <nav class="navbar navbar-expand-lg ml-5 mr-5 navbar-dark mb-5" style="background-color:#38102b" > 
        <div class="container">
            <a class="navbar-brand h1 mb-0" href="site_inicial.htm"><img src="Logo/shining_legends.png"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSite">
                <span class="navbar-toggler-icon"></span> 
            </button>

            <div class="collapse navbar-collapse " id="navbarSite" > 
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_personagens_gold.png" >Personagens</button></a></li>
                    <li class="nav-item"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_comojogar_gold.png" >Como jogar</button></a></li>
                    <li class="nav-item"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_jogar_gold1.png" >Jogar</button></a></li>
                    <li class="nav-item"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_atualizacoes_gold.png" >Atualizações</button></a></li>
                    <li class="nav-item mr-5"><a class="nav-link" href="#"><button type="button" class="btn btn-outline-warning" class="ml-1"><img src="Icones/icone_quemsou_gold.png" >Quem Sou</button></a></li>

                    <li class="nav-item " id="charmander"><a class="navbar-brand h1 mb-0 pulo" target="_blank" href="https://www.youtube.com/channel/UC6VdsMMnL-GdcoKc9qZEtQA?disable_polymer=true"><img src="Icones/icone_charmander.png"></a></li>
                    <li class="nav-item"><a class="navbar-brand h1 mb-0 pulo " target="_blank" href="http://api.whatsapp.com/send?1=pt_BR&phone=5584996011922"><img src="Icones/icone_bulbasaur.png"></a></li>
                    <li class="nav-item"><a class="navbar-brand h1 mb-0 pulo" target="_blank" href="https://twitter.com/LegendsShining"><img src="Icones/icone_squirtle.png"></a></li>
                </ul>
            </div>

        </div>
    </nav>

    <video controls src="Fundo/greninja.mp4" type="video/mp4 controls"  height="180%"width="100%">  

    </video>

</body>

javascript html5 css3 html5-video
  • 1

    You were able to play automatically when the page opens and when the video ends does not repeat?

  • I wasn’t able to do anything, but it worked out here, anyway thanks :)

  • What I’m still in doubt is why sometimes the video loads and sometimes n

2 answers

3

Not beautiful but effective solution:

document.getElementById('vid').play();
<video controls src="https://ia800701.us.archive.org/26/items/SampleVideo1280x7205mb/SampleVideo_1280x720_5mb.mp4" type="video/mp4 controls"  height="180%"width="100%" autoplay loop muted playsinline id="vid">  
    </video>

In short, some browsers require muted for autoplay to work; playsinline prevents video resizing and javascript to enable play if nothing works.

  • 1

    Thanks for the help :)

  • for nothing, we are together!

1


Good you could do for the video start and restart in this way.

    <video autoplay="autoplay" loop="loop" controls src="Fundo/greninja.mp4" type="video/mp4 controls" height="180%"width="100%">  

    </video>

The attribute autoplay is for the video to play automatically and already the attribute loop is to start the video automatically when it is finished. However the Google Chrome no longer allows video with sound to automatically play on pages, read HERE. Unless the video is dead. But you can change this on your machine by putting the following on your URL Chrome://flags/ and press enter the Google Flags is where you will find several features of the Google Chrome that are experimental and this is where you will activate the autoplay. Search on the bar Search flags for self-play and find out why Autoplay policy and the button on the right that is probably marked as Default check the option No user Gesture is required. and then restart the browser and attribute autoplay must be working properly, but this irar feature is only available to you. If you want to make the video play automatically and start using Javascript it’s also easy.

Put a id in your video with the name, for example video.

        <video id="video" controls src="Fundo/greninja.mp4" type="video/mp4"  height="180%"width="100%">  

        </video>

Then use Javascript.

<script>

   window.addEventListener("load", function ()
   {
       let video = window.document.querySelector("#video");
       video.play();
       video.loop = true;
   });

</script>

In this code snippet was added an event of load in the window so that when the page is loaded call an anonymous function, then it has a variable video referring to the id="video" and the function play() to start the video automatically and the loop = true to initialize the video automatically when it is finished.

Browser other questions tagged javascript html5 css3 html5-video

You are not signed in. Login or sign up in order to post.