Блог

Главная - Вопросы по программированию - Веб-сайт, работающий в скобках, но отображающий черный экран html-файла в Firefox и Chrome

Веб-сайт, работающий в скобках, но отображающий черный экран html-файла в Firefox и Chrome

#html #css #google-chrome #adobe-brackets

#HTML #css #google-chrome #adobe-скобки

Вопрос:

У меня есть HTML-файл, который содержит видео для фона и небольшую картинку со стрелкой. он обновляет некоторые CSS-файлы и по большей части является довольно стандартным. Я написал код в программе под названием Brackets. В Brakets есть функция, которая запускает сайт для вас в браузере во время написания кода, чтобы вы могли видеть изменения в режиме реального времени, и страница там выглядит идеально, но когда я открываю HTML-файл вручную с помощью браузера, все, что я получаю, — это черный экран.

  <!DOCTYPE html>

<html>
    <head>

<link rel="stylesheet" href="/CSS/main.css">

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>LA Apparel</title>
  <style>
  #video-bg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
  }
  #video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg > video {
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
  }
  </style>


</head>
<body>
<div id="video-bg">
  <video autoplay="autoplay" loop="true">
    <source type="video/mp4" src="/dasvi.mp4">
    <source type="video/webm" src="/dasvi.webm">
  </video>
</div>

        <img class="arr" src="/images/prenup/arrow.png">



</body>
</html>

Мой вопрос таков: есть ли проблема с моим кодом или с тем, как я упорядочил / обновил файлы, или браузер обычно не отображает локальные видеофайлы и будет работать, когда я помещу его на сервер?
Спасибо.

изображение для ссылки слева - это файл, запущенный в скобках, справа - вручную в Chrome

Ответ №1:

Ваши URL-адреса указаны относительно корня документа. Внутренне это работает, потому что вы работаете над 127.0.0.1:33567 , но при просмотре в вашем браузере он начинает искать file:///dasvi.mp4 , чего, я совершенно уверен, не существует 😉

При локальном тестировании вы должны запускать что-то на сервере, точно так же, как это делает Brackets, иначе вы получите проблемы, подобные этой.