Controla el reproductor de video de YouTube usando JavaScript

Si está pensando en cómo controlar el reproductor de video de YouTube usando JavaScript, este tutorial o artículo es para usted.

Sí, puedes fácilmente controlar un reproductor de video de YouTube usando JavaScript y trataré este tema en este artículo.

En primer lugar, tenemos que inicializar nuestro reproductor de video para que el código proporcionado a continuación sea el ejemplo perfecto.

<script>
    //<![CDATA[
    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player("video-placeholder", {
            width: 600,
            height: 400,
            videoId: "Xa0Q0J5tOP0",
            playerVars: {
                color: "white",
                playlist: "taJ60kskkns</mark>,<mark>FG0fTKAqZ5g",
            },
            events: {
                onReady: initialize,
            },
        });
    }

    function initialize() {
        // Update the controls on load
        updateTimerDisplay();
        updateProgressBar();

        // Clear any old interval.
        clearInterval(time_update_interval);

        // Start interval to update elapsed time display and
        // the elapsed part of the progress bar every second.
        time_update_interval = setInterval(function () {
            updateTimerDisplay();
            updateProgressBar();
        }, 1000);
    }
    //]]>
</script>

Xa0Q0J5tOP0 es la identificación de video de youtube.
taJ60kskkns,FG0fTKAqZ5g es ID de lista de reproducción de YouTube.

Después de la inicialización de este reproductor de video, ahora es el momento de controlar sus componentes por separado. Ahora, aquí hay una lista de diferentes funciones de JavaScript para controlar diferentes componentes del reproductor de video.

Duración:

Para ver la duración (duración y hora actual), utilice esta función.

<span id="current-time"></span> <span id="duration"></span>

<script>
    //<![CDATA[
    // This function is called by initialize()
    function updateTimerDisplay() {
        // Update current time text display.
        $("#current-time").text(formatTime(player.getCurrentTime()));
        $("#duration").text(formatTime(player.getDuration()));
    }

    function formatTime(time) {
        time = Math.round(time);

        var minutes = Math.floor(time / 60),
            seconds = time - minutes * 60;

        seconds = seconds < 10 ? "0" + seconds : seconds;

        return minutes + ":" + seconds;
    }
    //]]>
</script>

Barra de progreso:

Para controlar la barra de progreso del reproductor de video de youtube, use este código.

<input type='range' id='progress-bar'/>

<script>
    //<![CDATA[
    $("#progress-bar").on("mouseup touchend", function (e) {
        // Calculate the new time for the video.
        // new time in seconds = total duration in seconds * ( value of range input / 100 )
        var newTime = player.getDuration() * (e.target.value / 100);

        // Skip video to new time.
        player.seekTo(newTime);
    });

    // This function is called by initialize()
    function updateProgressBar() {
        // Update the value of our progress bar accordingly.
        $("#progress-bar").val((player.getCurrentTime() / player.getDuration()) * 100);
    }
    //]]>
</script>

Jugar:

para controlar el jugar botón usar este código.

<button id='play'>Play</button>

<script>
    //<![CDATA[
    $("#play").on("click", function () {
        player.playVideo();
    });
    //]]>
</script>

Pausa:

para controlar el pausa botón usar este código.

<button id='pause'>Pause</button>

<script>
    //<![CDATA[
    $("#pause").on("click", function () {
        player.pauseVideo();
    });
    //]]>
</script>

Silenciar/no silenciar:

Para silenciar y reactivar un reproductor de video, esta función lo ayudará en cualquier caso.

<button id='mute-toggle'>Mute/Un-Mute</button>

<script>
    //<![CDATA[
    $("#mute-toggle").on("click", function () {
        var mute_toggle = $(this);

        if (player.isMuted()) {
            player.unMute();
            mute_toggle.text("volume_up");
        } else {
            player.mute();
            mute_toggle.text("volume_off");
        }
    });
    //]]>
</script>

Control de volumen:

Si desea controlar el volumen de este reproductor de video, este es el código para eso.

<input type='number' id='volume-input'/>

<script>
//<![CDATA[
$('#volume-input').on('change', function () {
    player.setVolume($(this).val());
});

// To get the current volume of the player use this method:
// player.getVolume()
//]]>
</script>

Velocidad:

Para controlar la velocidad de este reproductor de video puedes usar el siguiente código.

<select id="speed">
    <option>0.25</option>
    <option>0.5</option>
    <option selected="selected">1</option>
    <option>1.5</option>
    <option>2</option>
</select>

<script>
//<![CDATA[
$('#speed').on('change', function () {
    player.setPlaybackRate($(this).val());
});

// To get the current playback rate for a video using this method:
// player.getPlaybackRate()

// To get all available playback rates for the current video use:
// player.getAvailablePlaybackRates()
//]]>
</script>

Calidad:

Si desea cambiar la calidad del video, este es el código que resolverá este problema por usted.

<select id="quality">
    <option>small</option>
    <option>medium</option>
    <option selected="selected">large</option>
    <option>hd720</option>
    <option>hd1080</option>
    <option>highres</option>
</select>

<script>
    //<![CDATA[
    $("#quality").on("change", function () {
        player.setPlaybackQuality($(this).val());
    });

    // To get the actual video quality of the running video use this method:
    // player.getPlaybackQuality()

    // To get a list of the available quality formats for video use:
    // player.getAvailableQualityLevels()
    //]]>
</script>

Si estás jugando con las listas de reproducción de YouTube, estas funciones te ayudarán mucho.

Lista de reproducción siguiente:

Esta función se utilizará para reproducir el siguiente video en la lista de reproducción.

<button id='next'>Playlist Next</button>

<script>
    //<![CDATA[
    $("#next").on("click", function () {
        player.nextVideo();
    });
    //]]>
</script>

Lista de reproducción anterior:

Esta función se utilizará para reproducir el video anterior en la lista de reproducción.

<button id='prev'>Playlist Previous</button>

<script>
//<![CDATA[
$('#prev').on('click', function () {
    player.previousVideo()
});
//]]>
</script>

Video en cola dinámicamente:

¿Te ves cosas dinámicas? Espera, esta función es para aquellos que aman las cosas dinámicas. Esta función le ayudará a Video en cola dinámicamente.

<img class="thumbnail" src="https://image.flaticon.com/icons/svg/1042/1042339.svg" data-video-id="h14wr4pXZFk"/>
<img class="thumbnail" src="https://image.flaticon.com/icons/svg/1042/1042352.svg" data-video-id="KkFnm-7jzOA"/>
<img class="thumbnail" src="https://image.flaticon.com/icons/svg/1042/1042356.svg" data-video-id="Ph77yOQFihc"/>

<script>
    //<![CDATA[
    $(".thumbnail").on("click", function () {
        var url = $(this).attr("data-video-id");

        player.cueVideoById(url);
    });
    //]]>
</script>

Estas son funciones que lo ayudarán a controlar el reproductor de video de YouTube si lo desea.

Aquí tengo una demostración para ti de este artículo. Puede ver la demostración haciendo clic en el botón de demostración a continuación.

Ver demostración

Conclusión:

Ahora le he facilitado el control del reproductor de video de YouTube usando código JavaScript. ahora si quieres puedes crea tu propio reproductor de video personalizado para videos de YouTube.