gpt4 book ai didi

html - 网站在括号中工作,但 html 文件在 firefox 和 chrome 中呈现黑屏

转载 作者:太空宇宙 更新时间:2023-11-03 20:42:34 25 4
gpt4 key购买 nike

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

我的问题是:我的代码或我组织/引用文件的方式是否有问题,或者浏览器是否经常不呈现基于本地的视频文件,并且当我将其放在服务器上时可以正常工作?谢谢。

image for refrence left is file running in brackets right is manually in chrome

最佳答案

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

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

关于html - 网站在括号中工作,但 html 文件在 firefox 和 chrome 中呈现黑屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24607035/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com