Estoy usando PLyr ( https://plyr.io/ ) para generar un par de videos en la página, uno que se muestra en el escritorio y el otro en el móvil.

Hay un solo botón personalizado que alterna el juego.

El problema es que este evento alterna la reproducción en ambos videos.

Lo que quiero es que el botón solo apunte a un video a la vez dado el tamaño de la ventana gráfica.

Esta es una versión aproximada del código.

Estoy usando .each e intento apuntar a jugadores individuales por players[index] pero esto no funciona

 <video id="video-1"> <source src="" type="video/webm"> <source src="" type="video/mp4"> </video> <video id="video-2"> <source src="" type="video/webm"> <source src="" type="video/mp4"> </video>

 const players = Plyr.setup(".player"); // Expose player so it can be used from the console window.player = players; // Play each video videoWrapper.each(function (index, video) { $('player').on("click touchend", function () { players[index].togglePlay(); }); }

Supongo que podría hacer algo como lo siguiente, pero esto parece complicado. ¿Hay mejores opciones?

 $(window).resize(function() { if($(this).width() < 768) { $('#video-1').on("click", function () { playPause(); anotherFun(); }); } else { $('#video-2').on("click touchend", function () { playPause(); anotherFun(); }); } });