Como hacer un Captcha como el de Netu?

[eddddd]

Que el icono de play salga de forma aleatoria y que solo al darle clic se muestre el contenido.

La idea es que funcione como un captcha normal no en un player, pero no se me ocurre como. (Sobre una imagen talvez)

 

[BotBeta]

Podrías considerar usar canvas de JavaScript para renderizar un icono de "play" en una posición aleatoria sobre una imagen. Luego, puedes configurar un evento de clic que se active solo cuando se haga clic en la ubicación correcta. Aquí tienes un simple esquema de cómo podría funcionar:

1. Dibujas la imagen y el ícono aleatoriamente.
2. Agregas un escuchador de eventos de clic al canvas.
3. Verificas si el clic se realizó en la ubicación del ícono. Si es así, muestra el contenido. Si no, puedes optar por volver a dibujar el ícono en una nueva ubicación.

Es importante recordar que este tipo de "captcha" puede no ser accesible para todos los usuarios y podría ser más fácil de saltar para los bots. Considera estos factores antes de implementar un sistema como este.

 

[Cicklow]

Podrías considerar usar canvas de JavaScript para renderizar un icono de "play" en una posición aleatoria sobre una imagen. Luego, puedes configurar un evento de clic que se active solo cuando se haga clic en la ubicación correcta. Aquí tienes un simple esquema de cómo podría funcionar:

1. Dibujas la imagen y el ícono aleatoriamente.
2. Agregas un escuchador de eventos de clic al canvas.
3. Verificas si el clic se realizó en la ubicación del ícono. Si es así, muestra el contenido. Si no, puedes optar por volver a dibujar el ícono en una nueva ubicación.

Es importante recordar que este tipo de "captcha" puede no ser accesible para todos los usuarios y podría ser más fácil de saltar para los bots. Considera estos factores antes de implementar un sistema como este.

Crear un script js, el cual teniendo un div de id: "captcha", y un video de fondo (osea que el div captcha se sobrepone sobre el video), con id: videocpatcha, coloque una img en cualquier lugar random del div, sin importar el tamaño del div. La imagen sera: https://icons.iconarchive.com/icons/iconsmind/outline/72/Play-Music-icon.png, el cual tiene un tamaño de 72x72 pixeles.
Cuando el usuario le haga click a la imagen, eliminar el div captcha y reproducir el video (darle play).

 

[BotBeta]

Crear un script js, el cual teniendo un div de id: "captcha", y un video de fondo (osea que el div captcha se sobrepone sobre el video), con id: videocpatcha, coloque una img en cualquier lugar random del div, sin importar el tamaño del div. La imagen sera: https://icons.iconarchive.com/icons/iconsmind/outline/72/Play-Music-icon.png, el cual tiene un tamaño de 72x72 pixeles.
Cuando el usuario le haga click a la imagen, eliminar el div captcha y reproducir el video (darle play).

Aquí te dejo un ejemplo básico de cómo podrías hacerlo en JavaScript puro:

Primero crea en tu HTML un div y un video con los id especificados.

<div id="captcha"></div>
<video id="videocaptcha">
    <source src="tu_video.mp4" type="video/mp4">
</video>

Luego, en JS:

window.onload = function() {
    // carga la imagen
    const img = new Image();
    img.src = 'https://icons.iconarchive.com/icons/iconsmind/outline/72/Play-Music-icon.png';
    img.width = 72;
    img.height = 72;
    img.style.position = 'absolute';

    const captcha = document.getElementById('captcha');
    captcha.appendChild(img);

    // elegir una posición aleatoria dentro del div del captcha
    img.style.left = Math.random() * (captcha.offsetWidth - img.width) + 'px';
    img.style.top = Math.random() * (captcha.offsetHeight - img.height) + 'px';

    // si se hace click en la imagen, retirar el captcha y reproduce el video
    img.onclick = function() {
        captcha.style.display = 'none';
        const video = document.getElementById('videocaptcha');
        video.play();
    }
}

Este script hará que cuando la imagen sea presionada, el div captcha será retirado y el video empezará a reproducirse. Recuerda adaptarlo según tus necesidades.

 

[tortadelabarda]

Te dejo la base de lo que buscas, en la función captchaClick() aplicas la lógica que necesites.

    <style>
        #container {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>

    <div id="container">
    </div>

    <script>
        function getRandomColorValue() {
            return Math.floor(Math.random() * 256);
        }
        function getRandomColor() {
            var r = getRandomColorValue();
            var g = getRandomColorValue();
            var b = getRandomColorValue();
            return "rgb(" + r + "," + g + "," + b + ")";
        }
        function captchaClick() {
            alert("Clicked on the captcha");
        }
        document.addEventListener("DOMContentLoaded", function() {
            var randomDiv = document.createElement("div");
            randomDiv.style.width = "10px";
            randomDiv.style.height = "10px";
            randomDiv.style.backgroundColor = getRandomColor();
            randomDiv.style.position = "absolute";
            randomDiv.style.top = Math.floor(Math.random() * 191) + "px";
            randomDiv.style.left = Math.floor(Math.random() * 191) + "px";
            randomDiv.setAttribute("onclick", "captchaClick()");
            document.getElementById("container").appendChild(randomDiv);
        });
    </script>