Honlapon háttérvideó fájl váltás adott időben JS

Honlapon háttérvideó fájl váltás adott időben JS
2022-10-05T16:57:06+02:00
2022-10-09T04:47:12+02:00
2022-10-28T02:40:45+02:00
NorbertSr
Eddig háttérkép helyett háttérvideó futott (loop-olva, azaz egy pár másodperces1920x1080 felbontású .mp4, végtelenítve) , de az fixen váltás nélkül.
Annak ennyi volt a kódolása jawascript fájl nélkül:

<div class="fullscreen-bg"> <video loop muted autoplay poster="images/hatter.jpg" class="fullscreen_bg-video"> <source src="images/01.mp4"> </video> </div>
Ez működött probléma nélkül és azért használtam, mert egyre divatosabb lett, azaz sokan választják a mai úgymond konyhakész honlapoknál. Én meg azért, mert a rádiómat sokan otthon, mint egy képernyőkímélő funkcióként hallgatják okostévén, ahol meg fontos a dizájn, azaz a látvány.
Ezért is gondoltam, hogy azért éjjel nem ártana valami másik hasonló videó, ami éjszakai hangulatot ad, s kéne egy olyan cserélgetős megoldás, hogy adott időben automatikusan váltaná egymást a két videó anélkül, hogy az oldalt újra be kéne töltenie a usernek.

Próbálkozásom, - ami valamiért nem működik - bemásolom ide, mert szerintem lehetséges, hogy csupán benéztem valamit, vagy esetleg jó kiindulópontnak, vagy legalább ez alapján meg tudjátok mondani, hogy mit csesztem el...:

A css fájl ide vonatkozó része ez lett:

.video_contain{ position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; z-index: -100; } #video-background{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: auto; min-width: 100%; min-height: 100%; width: auto; height: auto; }
A video.js:

var currentTime = new Date().getHours(); var video = document.getElementById('video-background'); var source = document.createElement('source'); if (6 <= currentTime && currentTime < 7) { source.setAttribute('src', 'images/01.mp4'); video.appendChild(source); video.play(); } else { source.setAttribute('src', 'images/02.mp4'); video.appendChild(source); video.play(); }
A html oldalban meg biztos valamit elrontok, de ennyit tettem a háttér videóval kapcsolatban a body-ba:

<script src="js/video.js"></script> <div class="video_contain"> <video autoplay loop id="video-background" muted plays-inline></video> </div>
Szóval ez ebben a formában nekem nem jött össze...
Mutasd a teljes hozzászólást!
Valami ilyesmire gondoltam (nem teszteltem, de ez alapján már meg kell tudod oldani):

<div class="fullscreen-bg"> <video loop muted autoplay poster="images/hatter.jpg" class="fullscreen_bg-video" id="video"> <source src="images/01.mp4" id="video_source"> </video> </div> <script> // Amikor betöltődött a dokumentum window.addEventListener('load', () => { // Megeressük id alapján a video-t és a source-ot const video = document.getElementById('video'); const source = document.getElementById('video_source'); // 60000ms időnként (percenként) futtatjuk ezt a függvényt setInterval(() => { // Aktuális óra kinyerése const hour = new Date().getHours(); // Az src meghatározása: 21 és 6 között 01.mp4, különben 02.mp4 const src = hour >= 21 || hour <= 6 ? 'images/01.mp4' : 'images/02.mp4'; // Ha eltér az src az éppen játszott videótól, akkor lecseréljük if(source.getAttribute('src') !== src) { source.setAttribute('src', src); video.load(); video.play(); } }, 60000); }); </script>
Mutasd a teljes hozzászólást!

  • Szia!

    Így most egyszer hívod meg. Azaz, ha 6 órakor nyitod meg az oldalt, akkor a 01.mp4-es source kerül be. Helyette úgy kellene, hogy ezt a JS-t kiteszed egy függvénybe, amit aztán setInterval használatával mondjuk percenként lefuttatsz egyszer.

    Ügyelve a következőkre:
    1. Nem kell minden futásnál egy source-ot beszúrni. Az lehet a HTML része és elég, ha a JS annak az src-jét változtatja.
    2. Az src-t csak akkor változtasd, ha tényleg változott (tehát ha eddig 01 volt és most 02 lett, vagy fordítva)
    3. Ezzel a feltétellel valami nem kerek szerintem: 6 <= currentTime && currentTime < 7 (ez gyakorlatilag csak 6 órakor fogja a 01-et játszani, különben mindig a 02-t). Biztos ez volt a cél?
    Mutasd a teljes hozzászólást!
  • A példában az időpont meghatározásáig el sem jutok, de nyilván az sem jó, mert reggel 6 órától este 21 óráig kellene az egyik háttérvideó, a másik meg este 21 órától reggel 6 óráig.

    if (21 <= currentTime && currentTime > 6)
    Majd ha egyáltalán működésre tudom bírni, akkor kijavítom. De jelenleg egyáltalán nem működik. 
    A lényeg, hogy változáskor csak a háttérvideót frissítse, mint eseményt és nem a teljes oldalt.
    Mutasd a teljes hozzászólást!
  • Valami ilyesmire gondoltam (nem teszteltem, de ez alapján már meg kell tudod oldani):

    <div class="fullscreen-bg"> <video loop muted autoplay poster="images/hatter.jpg" class="fullscreen_bg-video" id="video"> <source src="images/01.mp4" id="video_source"> </video> </div> <script> // Amikor betöltődött a dokumentum window.addEventListener('load', () => { // Megeressük id alapján a video-t és a source-ot const video = document.getElementById('video'); const source = document.getElementById('video_source'); // 60000ms időnként (percenként) futtatjuk ezt a függvényt setInterval(() => { // Aktuális óra kinyerése const hour = new Date().getHours(); // Az src meghatározása: 21 és 6 között 01.mp4, különben 02.mp4 const src = hour >= 21 || hour <= 6 ? 'images/01.mp4' : 'images/02.mp4'; // Ha eltér az src az éppen játszott videótól, akkor lecseréljük if(source.getAttribute('src') !== src) { source.setAttribute('src', src); video.load(); video.play(); } }, 60000); }); </script>
    Mutasd a teljes hozzászólást!
  • Ránézésre rendben is lenne, de nem értem, hogy miért nem lehet egyből az időintervallumnak megfelelő videófájlt betölteni ?
    Így ugyanis pl. aki pont a másik idősávban nyitja meg az oldalt, annak ugye teljesen feleslegesen a másik videót tölti be, s majd egy perc múlva frissíti a megfelelőre, ami ugye nem szép....
    Mutasd a teljes hozzászólást!

  • miért nem lehet egyből az időintervallumnak megfelelő videófájlt betölteni ?


    Természetesen lehet, azt már rád bízom!

    A problémafelvetés ez volt, én erre reagáltam:

    kéne egy olyan cserélgetős megoldás, hogy adott időben automatikusan váltaná egymást a két videó anélkül, hogy az oldalt újra be kéne töltenie a usernek
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd