Всем привет. Попытался сделать на html + css + js систему выбора банд где у тебя на экране будет показываться видео с непосредственно самой бандой, но проблема в том, что при просмотре в браузере все работает нормально, но в самой игре видео попросту не отображается почему-то
Я посмотрел все темы которые нашел связанные с данной темой на этом форуме, но к сожалению, ни одно из них не смогло мне помочь. Кто-то кидал ссылки на статьи какие-то вне форума, но они уже не работают. На других сайтах тоже ничего дельного не нашел ( может я просто плохой искатель :\ )
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<style>
</style>
</head>
<body>
<div class="header-button">
<button id="leftButton" onclick="nextFraction('left')"></button>
<button id="rightButton" onclick="nextFraction('right')"></button>
<button id="joinButton" onclick="joinFraction()">войти</button>
</div>
<div class="video-background">
<video id="myVideo" autoplay muted loop playsinline>
<source src="video/video.mp4" type="video/mp4">
</video>
</div>
<div class="volume-control" aria-label="Контроль громкости видео">
<button id="volumeButton" class="volume-button" type="button" aria-label="Звук">
<svg id="volumeIcon" class="volume-icon" viewBox="0 0 24 24" aria-hidden="true">
<path class="speaker-body" d="M3 10v4h4l5 4V6L7 10H3z"></path>
<path class="wave wave-low" d="M14.5 9.5a4 4 0 010 5"></path>
<path class="wave wave-high" d="M16.5 7a7 7 0 010 10"></path>
<line class="mute-line mute-line-1" x1="15" y1="8" x2="21" y2="16"></line>
<line class="mute-line mute-line-2" x1="21" y1="8" x2="15" y2="16"></line>
</svg>
</button>
<input
id="volumeSlider"
class="volume-slider"
type="range"
min="0"
max="1"
step="0.01"
value="0.5"
aria-label="Громкость видео"
>
</div>
<div class="card-container">
<div class="image-placeholder" id="gangImage"></div>
<div class="header">
<div class="back-arrow-container">
<span class="back-arrow-special"></span>
</div>
<span class="header-title" id="gangHeaderTitle"></span>
</div>
<div class="main-info-area">
<div class="content">
<div class="label">name</div>
<div class="common-text-style" id="gangName"></div>
<div class="label">description</div>
<div class="common-text-style description-text" id="gangDescription"></div>
</div>
</div>
</div>
</body>
</html>
CSS:
.video-background {
position: fixed;
top: 0;
left: 0;
width: max(100%, 100vw);
height: 100%;
z-index: -1;
overflow: hidden;
}
.video-background video {
width: 100%;
height: 100%;
object-fit: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-position: center bottom;
}
.video-controls {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999; /
display: flex;
gap: 10px;
}
JavaScript:
document.addEventListener("DOMContentLoaded", () => {
const video = document.getElementById("myVideo");
const volumeSlider = document.getElementById("volumeSlider");
const volumeIcon = document.getElementById("volumeIcon");
const volumeButton = document.getElementById("volumeButton");
const gangImage = document.getElementById("gangImage");
const gangHeaderTitle = document.getElementById("gangHeaderTitle");
const gangName = document.getElementById("gangName");
const gangDescription = document.getElementById("gangDescription");
if (!video || !volumeSlider || !volumeIcon || !gangImage || !gangHeaderTitle || !gangName || !gangDescription) {
return;
}
const gangs = [
{
id: "apb",
title: "E/S Athens Park Bloods",
name: "E/S Athens Park Bloods",
description: `Part of NWA, APB is a large and highly
reputable Blood gang located in the
Athens/Willowbrook area on the East
side, main cliques are 124th, 127th, and
132nd. Formerly known as the Athens
Park Boys, APB is one of the original five
sets in the city that banded together to
form the Bloods in 1972. As early and
long-standing rivalries with Crip gangs
like 118ECBC and others influenced them
and other sets that feuded with Crips to
adopt their own color and name. APB for
the longest has been allied with MGB to
form Athens Miller Gangster Bloods
(AMGB), though they’ve also recently
cliqued up with CPP/WSP to form NWA
(Nellaz West Athens). Despite being a
east side Blood gang, the younger
generation of AMGB is loosely affiliated
with SMG politics, as the majority of Crip
gangs they beef with claim BC/NHC/2X,
and their relationship with most GC/HCG
sets are neutral due to common
enemies. Their main rivals presently are
116KCG, 118ECBC, and 120RAC. Though
they have lesser beefs with BHWB, PJWC,
CPCC, MPCC, TPCC, OSCC, FHCC, SGC,
PBC, VAC, and most other Avenue Crip,
Blocc Crip, Neighborhood Crip, and
Compton Crip gangs.
<br>Rappers: RJ, Ceddy Mack`,
image: "img/apb.png",
video: "video/apb.mp4",
joinUrl: "#"
},
{
id: "40rac",
title: "W/S Rollin' 40's Avenue Crips",
name: "W/S Rollin' 40's Avenue Crips",
description: `Part of the Rollin' 40's (RFC), are also known as Vernon
Avenue Crips or A-Town. The Avenue side of the Rollin' 40's
(RFC) is the westernmost side of their hood that stretches
from Crenshaw Boulevard to Arlington Avenue. Are located
in the Leimert Park district, which is one of the few
predominately Black/Belizean American/African American
neighborhoods left in Los Angeles County; and also the
area that non-affiliate LA rapper Dom Kennedy grew up in.
Historically represented by the Los Angeles Angels and
Arizona Wildcats logos with cerulean (teal) rags and red
Angels logos; the Avenues clique is understood to be the
more preppy and "flyer" side of their hood (more expensive
housing market prices, more Nike Tech suits, and less Pro
Club t-shirt and wifebeaters fits on members as seen the
further east you go). Leimert Park itself also has a more
positive and upscale reputation than the rest of South
Central due to being the epicenter of Black Los Angeles
culturally and hosting popular annual citywide events such
as the Juneteenth Festival and MLK Day Parade that are
attended by thousands near 43rd/King and Crenshaw
Boulevard. Their main beefs historically are with BPS across
Crenshaw Boulevard in a gang war that's gone on for over
five decades and resulted in numerous incidents and
deaths. And is also one that makes local social media news
headlines annually when gang fights breakout between
youths from both sides (and their allies) on Crenshaw
Boulevard during annual MLK Day Parade. The Avenues
clique also differs from the other sides (Western, Parcside,
and Darcside) in that they historically push NHC the least
out of all five sides, and instead primarily claim and fall
under Avenue Crip (AC) along with RAC. And most
members (similar to 104HTHC being a Hustler Crip/NHC-
hybrid) claim either AC solely (mainly where the younger
generation is concerned) or both. Though despite
differences in lineage, both the Avenues (R40AC) and the
other four sides (R40NHC) are mostly considered the
synonymous under RFC/OSE/Glove Gang. The Avenues
clique as a predominately AC side was further solidified
after the now cease fired war between former allies the
Rollin' 40's and Rollin' 60's NHC broke out between the two
gangs in 2013, as Rollin' 40's AC sits directly on the<
borderline of the two major hoods on 48th and Crenshaw
Boulevard. And due to the Rollin 60's ties with the Rollin'
100's (600), the 40's have also had sporadic issues and is
distant at best with the Rollin' 100's BC gangs. Their>br>
increased identification with AC politics post-2010s has
further dragged them into formerly dormant or non-existent
beefs via minor incidents in recent years with gangs on the
west side that skew heavily anti-AC such as DLGB (who a
decade ago were loosely allied with RFC under "Figarollin")
and Shotgun Crips (SGC) in Gardena. They mainly beef with
Rollin' 20's NHB, CSB, JSB, VNGB, IFGB, DLGB, MOB, SGC,
51TGC, 73GC, 83GC, 99MC, and all other Blood, Brim, Piru,
Hoover, and Gangster Crip gangs.
<br>Rappers: Ablue, Dody6, 8Beezy, NfantJahk (R.I.P), CBK4, Txny4, FAcey5`,
image: "img/40rac.png",
video: "video/40rac.mp4",
joinUrl: "#"
},
];
const initialGangId = "apb";
const initialGangIndex = gangs.findIndex((gang) => gang.id === initialGangId);
let currentGangIndex = initialGangIndex >= 0 ? initialGangIndex : 0;
const ensurePlayback = () => {
const playPromise = video.play();
if (playPromise && typeof playPromise.catch === "function") {
playPromise.catch(() => {
});
}
};Я посмотрел все темы которые нашел связанные с данной темой на этом форуме, но к сожалению, ни одно из них не смогло мне помочь. Кто-то кидал ссылки на статьи какие-то вне форума, но они уже не работают. На других сайтах тоже ничего дельного не нашел ( может я просто плохой искатель :\ )
