如何放置3秒钟Fullscreen Video/GIF简介upon website start up 作为预载器。
我试着把它编码进去，但总是有一些冲突，限制了网站的功能，只是感觉不到，proper.
那么，最好的方法是什么呢？Plugin suggestions 只要他们是受欢迎的free :)
谢谢
Fullscreen Video/GIF Intro
1 个回复
最合适的回答,由SO网友:RiddleMeThis 整理而成
以下代码使用HTML5 Video, 使用静音（&A）；自动播放属性集。它拍摄我通过媒体库上传的视频，并全屏显示。我正在使用一个脚本来检测视频何时播放完毕，然后淡出并从DOM中删除。
HTML
<div class="fullscreen-bg">
<video muted autoplay id="fullscreen-bg-video">
<source src="http://localhost/test/wp-content/uploads/2019/01/video.mp4" type="video/mp4">
</video>
</div>
JS
<script type=\'text/javascript\'>
document.getElementById(\'fullscreen-bg-video\').addEventListener(\'ended\', detectEnd, false);
function detectEnd(e) {
jQuery(\'.fullscreen-bg\').fadeOut(1000,function(){jQuery(this).remove();});
}
</script>
CSS
<style>
.fullscreen-bg {
background: #000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: 9999;
}
#fullscreen-bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
#fullscreen-bg-video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
#fullscreen-bg-video {
width: 300%;
left: -100%;
}
}
</style>
Notes
<作为测试，我将所有代码插入到我的头中。php文件，但您可能希望将其放在其他地方