Question

在一个非常简单的网页上，我在后台自动播放视频和一些jquery脚本在div中加载html内容。奇怪的是，链接上的javascript功能仅在12秒左右后执行。我认为它与视频负载有关，因为当我用正确的图像替换视频时。任何有助于解决此问题的帮助。感谢。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Breathing Room</title>
    <style>
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/index.js"></script>

  </head>
  <body>
    <div class="navigation">
      <ul>
      <li><a href="#" id="abstract">Abstract</a></li>
      <li><a href="#" id="chi2018">CHI2018</a></li>
      <li><a href="#" id="team">Team</a></li>
      <li><a href="#" id="links">Links</a></li>
    </ul>
    </div>
    <div class="content" id="content">
        Start text here.
    </div>
        <div class="video-bg">
            <video autoplay loop muted poster="_images/background.jpg">
                <source src="_images/video.mp4" type="video/mp4">
            </video>
        </div>

</body>
</html>

和javascript：

$(document).ready( function() {
  console.log( "ready!" );
    $("#abstract").on("click", function() {
        $("#content").load("../pages/abstract.html");
    });
});

Answer 1

而不是将autoplay添加到video标记。您可以将视频播放放在$(document).ready

中

<video loop muted poster="_images/background.jpg">
    <source src="_images/video.mp4" type="video/mp4">
</video>

$(document).ready( function() {
    document.getElementByTag('video').play();
    $("#abstract").on("click", function() {
        $("#content").load("../pages/abstract.html");
    });
});

希望这个帮助

功能仅在一段时间后执行（视频加载）

1 个答案: