html 如何在页面加载前显示 5 秒的视频?
How to display a 5secend video before page load in html?
我有一个简单的 Html5 登录页面,我想在主页之前显示一个 5 秒的视频。它可能是一个弹出窗口或任何我想要的是显示没有任何边框、播放按钮等的视频,然后加载主页。
您好!
这是我试过的
<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>
一个以 bootstrap 模态 window 加载视频的简单页面。希望这能给你一个开始!
<!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>
我有一个简单的 Html5 登录页面,我想在主页之前显示一个 5 秒的视频。它可能是一个弹出窗口或任何我想要的是显示没有任何边框、播放按钮等的视频,然后加载主页。
您好! 这是我试过的
<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>
一个以 bootstrap 模态 window 加载视频的简单页面。希望这能给你一个开始!
<!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>