html5 - How to display a 5secend video before page load in html? -
i have simple html5 landing page , want show 5secend video before main page. popup or want display video without borders,playback buttons etc. , load main page.
greetings! tried
<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>
a simple page loads video in bootstrap modal window. hope gives start!
<!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> 
Comments
Post a Comment