У меня есть файл 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>
Мой вопрос: есть ли проблема с моим кодом или с тем, как я организовал/рефренсировал файлы, или браузер обычно не отображает локальные видеофайлы и будет работать, когда я положу его на сервер? Спасибо.
