Przerobienie funkcji JS do odtwarzania filmów w modalbox.

Question

Cześć, mam pytanie odnośnie funkcji js do odtwarzania dwóch różnych filmików w modalboxach.

Aktualnie za odpalenie filmiku A odpowiada jedna funkcja w js, natomiast za odpalenie filmiku B odpowiada druga funkcja. Są to zduplikowane, takie same funkcje tylko, że mają pozmieniane nazwy.

Jak można by było je tak zoptymalizować, przerobić, aby jedna funkcja obsługiwała odpalanie dwóch i więcej filmów?

Poniżej aktualne kody:

JS:

<script>
    window.document.onkeydown = function(e){
        if(!e){
            e = event;
        }
        if(e.keyCode==27){
            lightbox_close();
        }
    }

    window.document.onkeydown = function(e){
        if(!e){
            e = event;
        }
        if(e.keyCode==27){
            lightbox_close_2();
        }
    }

    function lightbox_open(){
        lightBoxVideo = document.getElementById("fuPresentationVideo1");
        window.scrollTo(0,0);
        document.getElementById('light').style.display = "block";
        document.getElementById('fade').style.display = "block";
        lightBoxVideo.play();
    }

    function lightbox_close(){
       lightBoxVideo = document.getElementById("fuPresentationVideo1");
        document.getElementById('light').style.display = "none";
        document.getElementById('fade').style.display = "none";
        lightBoxVideo.pause();
    }

    function lightbox_open_2(){
        lightBoxVideo_2 = document.getElementById("fuPresentationVideo2_2");
        window.scrollTo(0,0);
        document.getElementById('light_2').style.display = "block";
        document.getElementById('fade_2').style.display = "block";
        lightBoxVideo_2.play();
    }

    function lightbox_close_2(){
       lightBoxVideo_2 = document.getElementById("fuPresentationVideo2_2");
        document.getElementById('light_2').style.display = "none";
        document.getElementById('fade_2').style.display = "none";
        lightBoxVideo_2.pause();
    }
   

</script>

 

HTML:

<div class="fu-container">
    <div class="fu-row">
        <div class="fu-col-6 fu-c fu-t" style="">
            <div class="fu-tile-content" style="padding-left: 23%;  padding-right: 15%;">
            <div class="fu-title"><h2>TYTUŁ</h2></div>
            <div class="fu-description"><p>Lorem ipsum</p></div>
            </div>
        </div>
        <div class="fu-col-6 fu-c fu-c-bckg" style="background-image: url('jakies_zdjecie_tla');">
            <div id="light_2">
                <a class="boxclose_2" id="boxclose_2" onclick="lightbox_close_2();"></a>
                <video id="fuPresentationVideo2_2" class="fu-video" src="adres_filmu_2.mp4" autoplay="autoplay" controls="controls" controlslist="nodownload"></video>
            </div>

            <div id="fade_2" onClick="lightbox_close_2();"></div>

            <div class="fu-play-icon">
                <a href="#" onclick="lightbox_open_2();">Włącz</a>
            </div>
        </div>
    </div>
    <div class="fu-row">
        <div class="fu-col-6 fu-c fu-c-bckg" style="background-image: url('jakies_zdjecie_tla');">
            <div id="light">
                <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
                <video id="fuPresentationVideo1" class="fu-video" src="adres_filmu_1.mp4" autoplay="autoplay" controls="controls" controlslist="nodownload"></video>
            </div>

            <div id="fade" onClick="lightbox_close();"></div>

            <div class="fu-play-icon">
                <a href="#" onclick="lightbox_open();">Włącz</a>
            </div>

        </div>
        <div class="fu-col-6 fu-c fu-t">
            <div class="fu-tile-content" style="padding-left: 15%;  padding-right: 20%;">
            <div class="fu-title"><h2>TYTUŁ</h2></div>
            <div class="fu-description"><p>Lorem ipsum</p></div>
            </div>
        </div>
       
    </div>
</div>

 

Answer 1

Do funkcji możesz przekazywać parametry, więc do lightbox_open możesz przekazać wartość, po której rozpoznasz, dla którego wideo ma zostać wykonana jakaś akcja wewnątrz funkcji. Druga kwestia, że powinien być tam użyty przycisk, a nie link, bo ten element odpowiada za zwykłe wykonanie akcji (rozpoczęcie lub zakończenie odtwarzania wideo), a nie za nawigację po stronie.

Trzecia kwesia: do event handlera można przypiąć tylko jedną funkcję na raz. Drugie przypisanie do window.document.onkeydown nadpisuje pierwsze, czyli to pierwsze się nigdy nie wywoła - możesz to zweryfikować w zakładce event listeners w devtoolsach przeglądarki. Jeśli chcesz do danego zdarzenia na jednym elemencie podpiąć więcej funkcji, to użyj addEventListener.

---

Rozwiązałbym to z użyciem event delegation. Podepnij się na kliknięcie na np. element o klasie "fu-container" i tam po id sprawdzaj, który przycisk został kliknięty - zarówno, czy odpowiada za rozpoczęcie odtwarzania czy zakończenie, oraz którego filmu dotyczy (możesz to sobie odczytać z event.target). Na tej podstawie wykonuj odpowiednią funkcję i, jako parametr, przekaż jej którego wideo dotyczy.

Comments

Dzięki za odpowiedź.
 

HTML. Przerobiłem to tak, że modal id="light" zrobiłem jako osobny i pojedynczy div zawierający dwa filmiki. Wcześniej miałem dwa razy taki modal light1 i light2, i w każdym z nich był filmik.

<div class="fu-container">
        <div class="fu-row">
            <div class="fu-col-6 fu-c fu-t" style="">
                <div class="fu-tile-content" style="padding-left: 23%;  padding-right: 15%;">
                <div class="fu-title"><h2>TYTUŁ</h2></div>
                <div class="fu-description"><p>lorem ipsum</p></div>
                </div>
            </div>
            <div class="fu-col-6 fu-c fu-c-bckg" style="background-image: url('jakies_zdjecie_w_tle');">
                <div class="fu-play-icon">
                    <button id='btn_02' onclick="modal_open(2)"><img src="jakas_grafika"></button>
                </div>
    
            </div>
        </div>
        <div class="fu-row">
            <div class="fu-col-6 fu-c fu-c-bckg" style="background-image: url('jakies_zdjecie_w_tle');">
                
                <div class="fu-play-icon">
                    <button id='btn_02' onclick="modal_open(1)"><img src="jakas_grafika"></button>
                </div>
    
            </div>
            <div class="fu-col-6 fu-c fu-t">
                <div class="fu-tile-content" style="padding-left: 15%;  padding-right: 20%;">
                <div class="fu-title"><h2>TYTUŁ</h2></div>
                <div class="fu-description"><p>lorem ipsum</p></div>
                </div>
            </div>
           
        </div>
        <div id="light">
            <a class="boxclose" id="boxclose" onclick="lightbox_close(1);"></a>
               <video id="myvid1" type="video/mp4" class="fu-video" autoplay="autoplay" controls="controls" controlslist="nodownload"></video>
               <video id="myvid2" type="video/mp4" class="fu-video" autoplay="autoplay" controls="controls" controlslist="nodownload"></video>
           </div>
           <div id="fade" onClick="lightbox_close();"></div>
    </div>

 

JS. Działa, ale nie jest to zapewne idealne rozwiązanie, ale starałem się to ogarnąć też z pomocą Internetu przy równoczesnym zrozumieniu tyle ile dałem radę. Starałem się też w miarę możliwości użyć addEventListener.

Mogę prosić o wypunktowanie błędów?

<script>
     
     var str='filmik-1.mp4, filmik-2.mp4';
       var myVideoList = str.split(', ');
       //console.log( myVideoList );
       
       function modal_open( inputNum )
       {
       var inum = inputNum;
       var myVid=myVideoList[ inum -1];
       myFileName="/wp-content/uploads/2021/03/"+ myVid
       var myDId="myvid"+inum;
      
    
       myVideo = document.getElementById(myDId);
       
           myVideo.style.display = 'block';
           document.getElementById('fade').style.display='block';
           document.getElementById('light').style.display='block';
           
           //console.log( myDId );
       
       myVideo.src = myFileName;
       myVideo.controls = true;
       myVideo.play();
       }
    
     
       const element = document.getElementById("boxclose");
       element.addEventListener("click", lightbox_close);
    
       function lightbox_close(inputNum){
    
           var inum = inputNum;
           myDId="myvid"+inum;
          
           var myVideo = document.getElementsByClassName(myDId);
    
           document.getElementById("light").style.display = "none";
           document.getElementById("fade").style.display = "none";
          
           document.getElementById("myvid1").style.display = "none";
           document.getElementById("myvid2").style.display = "none";
         
       }
    
    </script>

 

---

• zamiast var używaj const/let

• var str='filmik-1.mp4, filmik-2.mp4';
  var myVideoList = str.split(', ');

  zmienną myVideoList możesz od razu zadeklarować jako tablicę

  var myVideoList = ['filmik-1.mp4', 'filmik-2.mp4'];

• var inum = inputNum;

  po co tworzysz zmienną inum z argumentu inputNum?

• myFileName="/wp-content/uploads/2021/03/"+ myVid

  tutaj niejawnie tworzysz globalną zmienną myFileName - używaj const lub let przy deklaracji zmiennych

• var inum = inputNum;
  myDId="myvid"+inum;
             
  var myVideo = document.getElementsByClassName(myDId);

  wewnątrz funkcji lightbox_close tworzysz zmienne, z których nie korzystasz

• <div id="fade" onClick="lightbox_close();"></div>

  wywołujesz funkcję lightbox_close nie podając parametru, a w nagłówku funkcji oczekujesz argumentu inputNum, z którego i tak nie korzystasz - nie licząc kodu, z którego nic nie wynika (patrz: poprzedni punkt)

• do manipulacji stylami używaj klas (a style ustawiaj w CSS) zamiast atrybutu style. Chyba, że nie ma możliwości wyliczenia stylu w CSS.

---

Dzięki za odpowiedź.

1. jeśli chodzi o zamykanie to wprowadziłem poprawki:

html:

<div id="light">
        <a class="boxclose" id="boxclose" onclick="lightbox_close();"></a>
           <video id="myvid1" type="video/mp4" class="fu-video" autoplay="autoplay" controls="controls" controlslist="nodownload"></video>
           <video id="myvid2" type="video/mp4" class="fu-video" autoplay="autoplay" controls="controls" controlslist="nodownload"></video>
</div>
<div id="fade" onClick="lightbox_close();"></div>

 

2. js (jeszcze postaram się dopracować aby nie manipulować stylami w js tylko zmieniac klasy css)

const element = document.getElementById("boxclose");
   element.addEventListener('click',  lightbox_close);

   function lightbox_close(){

    
       document.getElementById("light").style.display = "none";
       document.getElementById("fade").style.display = "none";
      
       document.getElementById("myvid1").style.display = "none";
       document.getElementById("myvid2").style.display = "none";
      
   }

 

3. js - otwieranie modala:

const myVideoList=['Prezentacja-1.mp4', 'Prezentacja-2.mp4'];

 console.log( myVideoList );
   
   function lightbox_open( inputNum )
   {
    const inum = inputNum;

    const myVid=myVideoList[inum-1];

    const myFileName="/wp-content/uploads/2021/03/"+ myVid;
    const myDId="myvid"+inum;
  
    myVideo = document.getElementById(myDId);
   
    myVideo.style.display = 'block';
    document.getElementById('fade').style.display='block';
    document.getElementById('light').style.display='block';
       
   myVideo.src = myFileName;
   myVideo.controls = true;
   myVideo.play();
   }

- po co tworzysz zmienną inum z argumentu inputNum? - rozumiem to tak, że inum ma wartość od której odejmuję '1' aby brać elementy z tablicy gdzie indeksowane są one od 0. Jak inaczej to można rozwiązać?