Question

我正在用HTML5视频背景构建一个Angular网站。加载后，ng-view内容将显示半秒钟，然后消失，之后仅显示视频背景和导航栏。我究竟做错了什么？下面是我的代码：

索引页：

    <!DOCTYPE html>
<html ng-app="mmpnApp">
<head>
    <title>Mogul Minds Podcast Network</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
      <script src="script.js"></script>
<video autoplay muted loop id="myVideo">
  <source src="https://staging.coverr.co/s3/mp4/South_Carolina_City.mp4" type="video/mp4">
</video>
</head>
<body ng-controller="mainController">

<nav id="navbar" class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#"><img height="100px" src="/img/mmpn.jpeg"></a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Staff</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Podcasts
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Real Talk Chicago</a>
        <a class="dropdown-item" href="#">Sool Radio</a>
        <a class="dropdown-item" href="#">Edwin's Hardcore History</a>
      </div>
    </li>
  </ul>
</nav>

    <div id="main">

        <div ng-view></div>

    </div>

</body>

</html>

样式：

    body {
    font-family: 'Roboto Slab', serif; }

#myvideo {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden
}


.firstbanner {
    margin-top: 50px;
}

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}


#navbar {
    background-color: #000;
    min-width: 100%
}

我们将竭诚欢迎您的协助。提前非常感谢！

ng-view内容不会显示在视频背景上

0 个答案: