Comment afficher une vidéo 5secend avant le chargement de la page en html?

-4

J'ai une page d'atterrissage Html5 simple et je veux montrer une vidéo 5secend avant la page principale. il pourrait s'agir d'un popup ou de tout ce que je veux, c'est d'afficher la vidéo sans aucune bordure, boutons de lecture, etc., puis charger la page principale.Comment afficher une vidéo 5secend avant le chargement de la page en html?

Salutations! c'est ce que j'ai essayé

<script> 
    function openColorBox(){ 
    $.colorbox({iframe:true, width:"80%", height:"80%", href: "http://as2.asset.aparat.com/aparat-video/325cc0361862066dc06e8fb1fc7ec8a77684093-240p__39060.mp4"}); 
    } 


    setTimeout(openColorBox, -5000); 
    $.colorbox({ overlayClose: true }); 


</script>

Source

2017-07-25 shadow

Nous ne sommes pas là pour coder pour vous. Nous sommes ici pour coder avec vous. Montrez-nous ce que vous avez essayé et où vous êtes coincé, puis demandez à nouveau. – SkryptX

Désolé, c'est fait. ajouté – shadow

Vous devriez vraiment lire le fonctionnement de setTimeout. – SkryptX

Une simple page qui charge la vidéo dans la fenêtre modale bootstrap. J'espère que cela vous donne un début!

<!DOCTYPE html> 
    <html lang="en"> 

    <head> 
     <title>Page Title</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
     <style> 
     .modal-backdrop { 
      background-color: #ccc; 
     } 

     .modal-backdrop.in { 
      opacity: 0.2; 
     } 
     </style> 
    </head> 

    <body> 
     <div class="container"> 
      <h1 style="text-align:center;">Hello</h1> 
     </div> 
     <!-- Modal --> 
     <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog modal-md"> 
       <center><video id="myVideo" src="http://as2.asset.aparat.com/aparat-video/325cc0361862066dc06e8fb1fc7ec8a77684093-240p__39060.mp4" autoplay style="border-radius:5px;width:100%;"></video></center> 
      </div> 
     </div> 
    </body> 

    </html> 
    <script> 
    $("#myModal").modal() 
    $(".container").hide(); 
    document.getElementById('myVideo').addEventListener('ended', closeModal, false); 

    function closeModal() { 
     $(".container").show(); 
     $('#myModal').modal('hide'); 
    } 
    </script>

Source

2017-07-25 12:11:36 Ritz

c'est un bon début, merci. Je devrais maintenant trouver comment le supprimer après 5sec et charger le contenu de la page principale. – shadow

merci beaucoup ... cette astuce a bien fonctionné pour moi – shadow

Comment afficher une vidéo 5secend avant le chargement de la page en html?

Répondre

Questions connexes