Я настроил веб-сайт с видео, автоматически воспроизводимым в фоновом режиме.Это работает, но, похоже, работает только в Chrome, и мне нужно подождать несколько минут, пока он загрузится.
Сначала у меня была версия видео с разрешением 1080p mp4 (47 МБ) на моем сервере, и я пытался воспроизвести его,Загрузка заняла у меня несколько минут, также когда я покинул сайт и вернулся на него, видео больше не загружалось.После размещения index.html на моем сервере он снова начал загружаться.
После этого я попытался использовать версию 720p (11 МБ), но проблема все еще оставалась, и качество выглядело как 240p!
Я также осмотрел переполнение стека, но не смог найти ответ на мою проблему.
Это мой текущий код:
<body>
<div id="center">
<video width="320" height="400" id="333" autoplay loop="1">
<source src="example.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<!-- <source src="example.webm" type='video/webm; codecs="vp8, vorbis"' /> -->
Your browser does not support the video tag.
</video>
<script>
var x = document.getElementById("333").volume = 0.2;
</script>
</body>
Таблица стилей для него
body,html{height:100%}a,a:active,a:focus,body{color:#FFF}html{background-size:contain;background-position:center;background-attachment:fixed;background-repeat:no-repeat}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: 1300px;
height: 1300px;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: contain;
transition: 1s opacity;
}
}
Я хочу сделать так, чтобы видео загружалось быстрее, чтобы Firefox и другие браузеры могли смотреть видео и иметь его в хорошем качестве.