网站工作在括号但html文件渲染黑屏在firefox和chrome

Question

网站工作在括号但html文件渲染黑屏在firefox和chrome

use*_*665 0 html css google-chrome adobe-brackets

我有一个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>

Run Code Online (Sandbox Code Playgroud)

我的问题是:我的代码或我组织/修改文件的方式是否存在问题,或浏览器是否经常无法呈现基于本地的视频文件,并且当我将其放在服务器上时会有效吗？谢谢.

用于参考的图像是在括号中运行的文件是在chrome中手动运行的

Answer 1

Nie*_*sol 5

您的URL相对于文档根目录.在内部这是有效的,因为你正在努力127.0.0.1:33567,但在浏览器中查看时,它开始寻找file:///dasvi.mp4,我相当确定不存在;)

在本地测试时,你应该在服务器上运行,就像Brackets正在做的那样,否则你会遇到这样的问题.

归档时间：	11 年，2 月前
查看次数：	495 次
最近记录：	8 年，6 月前