Question

这是我的代码

$("body").prepend("<div class='fullscreen-bg'><video loop muted autoplay class='fullscreen-bg__video' ><source src='https://www.iresearchservices.com/wp-content/uploads/2018/03/bgvideo.mp4' type='video/mp4'></video></div>")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

及其正常工作。但是我需要的是，一旦视频加载完毕，我想调用一个函数说remove-pre-loader（）。

我有一个按加载器显示的屏幕，我想在视频加载后删除预加载器。

Answer 1

您可以使用loadeddata或canplaythrough事件来检查浏览器是否已加载音频/视频的当前帧。查看可能的视频事件的完整列表here

$("body").prepend(
  "<div class='fullscreen-bg'><video loop muted autoplay class='fullscreen-bg__video' ><source src='https://www.iresearchservices.com/wp-content/uploads/2018/03/bgvideo.mp4' type='video/mp4'><source src='https://www.iresearchservices.com/wp-content/uploads/2018/03/bgvideo.mp4' type='video/mp4'><source src='https://www.iresearchservices.com/wp-content/uploads/2018/03/bgvideo.mp4' type='video/mp4'></video></div>"
);
$(".fullscreen-bg__video").on("loadeddata", function () {
        alert("Video Loaded")
    });

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width: auto;
    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%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

HTML5动态视频背景

1 个答案: