Javascript/html - click hibásan működik, pedig rendesen lefut az esemény
2022-02-03T13:00:19+01:00
2022-02-04T19:29:00+01:00
2022-07-18T22:26:52+02:00
Rogerrr
Kedves Mindenki!

Az alábbi problémába ütköztem. Van egy weboldal, aminek a közepén van egy gomb, amire ha rákattintok, akkor elindít egy beágyazott YouTube-videót, ami automatikusan elindul. (A venobox.min.js fájlban paraméterként még pluszban benne is van az autoplay=1) Ezt a manuális kattintást szeretném HTML-be ágyazott szkripten keresztül megoldani, ami végül sikerült is, de ugyanakkor mégsem úgy működik, mint a egérrel való kattintás.

Ha egérrel kattintok a "gombon", akkor a videó betöltődik és automatikusan elindul.

Ha szkriptből megy a kattintás, akkor akkor a kattintás ugyan végbemegy, de a videó nem indul el, hanem beadja a YouTube preview-t várván az indításra...

Az oldal forrása a következő:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>YouTube Player</title> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <link href="bootstrap.min.css" rel="stylesheet"> <link href="venobox.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <section id="intro"> <div class="intro-container wow fadeIn"> <a href="https://www.youtube.com/watch?v=wJZplSH2oIo" class="venobox play-btn mb-4" data-vbtype="video" data-autoplay="true"></a> </div> </section> <script src="jquery.min.js"></script> <script src="wow.min.js"></script> <script src="venobox.min.js"></script> <script src="main.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("a.venobox.play-btn.mb-4.vbox-item").trigger('click'); }); </script> </body> </html>
A gomb azonosítóját "a.venobox.play-btn.mb-4.vbox-item" Chrome-ban néztem ki a fejlesztői eszközöknél. Ha esetleg azt csináltam, hogy a pl. <a href id="click"...> és így hivatkoztam a szkriptben, a "click"-re, akkor is működik, de ugyanazt csinálja, mint a gombnál.


Nem értem, mi a különbség a két "kattintás" között, ami miatt elindul a lejátszás, avagy sem.

A HTML-ben lévő összes forrásállományt mellékelve csatolom.

Előre is köszönök szépen mindenféle segítséget, javaslatot!

Rogerrr
Mutasd a teljes hozzászólást!
Csatolt állomány
venobox.min.js-ben keresd meg ezt a kódot

a=(e?"?rel=0&autoplay=1":"?rel=0")
és tegyél bele mute=1 -et

a=(e?"?rel=0&autoplay=1&mute=1":"?rel=0")
chrome hangal nem engedi elindtani a youtube videót.
Mutasd a teljes hozzászólást!

  • https://www.youtube.com/watch?v=wJZplSH2oIo

    helyett

    https://www.youtube.com/embed/wJZplSH2oIo?hd=1&rel=0&autoplay=1
    Mutasd a teljes hozzászólást!
  • Szia!

    Kipróbáltam, de sajnos így sem megy, nem ezen múlott.

    Mindenesetre köszönöm szépen, hogy foglalkoztál vele!

    Rogerrr
    Mutasd a teljes hozzászólást!
  • Egyszerűen nem értem...

    Ha mindkét klikkre (valós és szimulált) beteszek egy alert-et, kiírja, hogy "KLIKKELTÉL!", de mégis mindennek ellenére különbözik a valós a szimulált klikkeléstől.

    <script type="text/javascript"> function handler() { alert( 'KLIKKELTÉL!' ); } document.getElementsByClassName("venobox play-btn mb-4")[0].addEventListener("click", handler,false); $(document).ready(function(){ document.getElementsByClassName("venobox play-btn mb-4")[0].click(); }); </script>
    Egyébként ha .click helyett az írom, hogy

    $("a.venobox.play-btn.mb-4.vbox-item").trigger('click');

    akkor már nincs alert sem...


    Tényleg nem tudom mi lehet a baj. :(
    Mutasd a teljes hozzászólást!
  • click() és az fizikai click között különbség van.
    fizikai click-nél van event.

    Creating and triggering events - Event reference
    Mutasd a teljes hozzászólást!
  • venobox.min.js-ben keresd meg ezt a kódot

    a=(e?"?rel=0&autoplay=1":"?rel=0")
    és tegyél bele mute=1 -et

    a=(e?"?rel=0&autoplay=1&mute=1":"?rel=0")
    chrome hangal nem engedi elindtani a youtube videót.
    Mutasd a teljes hozzászólást!
  • Szia!

    chrome hangal nem engedi elindtani a youtube videót.

    Igen, ez az, ami meggátolta szimulált kattintás utáni automatikus indítást. A megoldásod alapján elkezdtem kutakodni, aminek kapcsán rátaláltam arra, hogy egy opcióval kikapcsolható ez a jelenség.
    Eredetileg "Delphi-ből" jöttem ide, mert CEF4 Chromium komponens használatában -érthető módon- ugyanazt produkálta, mint Chrome alatt.
    Ott, egy kapcsolóval egy pillanat alatt megoldódott a hiba, és szépen működik minden.
    autoplay-policy --> no-user-gesture-required

    Nagyon szépen köszönöm a segítséget, nem gondoltam, hogy ez befolyásolja a működést.

    Rogerrr
    Mutasd a teljes hozzászólást!
abcd