Codeigniter - Leer un label y cargarlo en un input al hacer click

Leer un label y cargarlo en un input al hacer click

Publicado por Pablo (1 intervención) el 06/10/2018 23:24:57

Soy novato y me encontré con un problema que no estoy pudiendo solucionar.
El tema es el siguiente: Cargo un video con HTML...

<th style="width:60%">

    <small>

        <input type="file" name="file[]" class="file_multi_video" accept="video/*">

    </small>

    <br />

    <video height="394" width="630" id="video1">

        <source src="" type="video/mp4" id="video_here">

    </video>

</th>

y agrego una funcion para que me muestre el tiempo de reproducción. Hasta aca todo muy bien……

<h4><label id="lblTime">-:--:--</label></h4>

function UpdateTheTime() {

    var sec = video.currentTime;

    var h = Math.floor(sec / 3600);

    sec = sec % 3600;

    var min = Math.floor(sec / 60);

    sec = Math.floor(sec % 60);

    if (sec.toString().length < 2) sec = "0" + sec;

    if (min.toString().length < 2) min = "0" + min;

    document.getElementById('lblTime').innerHTML = h + ":" + min + ":" + sec;

    seekbar.min = video.startTime;

    seekbar.max = video.duration;

    seekbar.value = video.currentTime;

El problema lo tengo cuando quiero hacer click en un cuadro input y que lea y cargue automáticamente este tiempo de reproducción para luego a ese valor enviarlo a una tabla mysql.

Desde ya agradezco la paciencia.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Cómo actualizar el tiempo de reproducción de un video al seleccionar un archivo

Publicado por Alejandro (44 intervenciones) el 01/09/2023 23:21:53

Entiendo tu pregunta, Pablo. Para lograr que el tiempo de reproducción del video se actualice automáticamente cuando seleccionas un archivo de video en el cuadro de entrada `<input type="file">`, debes realizar los siguientes pasos:

1. Agregar un controlador de eventos `change` al elemento `<input type="file">` para detectar cuando se selecciona un archivo de video.
2. Una vez que se selecciona el archivo de video, debes cargar ese video en el elemento `<video>`.
3. Mientras el video se está reproduciendo, debes actualizar el tiempo de reproducción en tiempo real y almacenarlo en una variable para enviarlo a la tabla MySQL cuando sea necesario.

Aquí tienes un ejemplo de cómo puedes hacerlo:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Video Player</title>

</head>

<body>

    <input type="file" name="file[]" class="file_multi_video" accept="video/*" onchange="loadVideo()">

    <br>

    <video height="394" width="630" id="video1" controls>

        <source src="" type="video/mp4" id="video_here">

    </video>

    <h4><label id="lblTime">-:--:--</label></h4>

    <script>

        var video = document.getElementById('video1');

        var lblTime = document.getElementById('lblTime');

        function loadVideo() {

            var fileInput = document.querySelector('.file_multi_video');

            var videoSrc = document.getElementById('video_here');

            var selectedFile = fileInput.files[0];

            if (selectedFile) {

                var objectURL = URL.createObjectURL(selectedFile);

                videoSrc.src = objectURL;

                video.load();

                video.play();

            video.addEventListener('timeupdate', function () {

                updateTheTime();

});

        function updateTheTime() {

            var sec = video.currentTime;

            var h = Math.floor(sec / 3600);

            sec = sec % 3600;

            var min = Math.floor(sec / 60);

            sec = Math.floor(sec % 60);

            if (sec.toString().length < 2) sec = "0" + sec;

            if (min.toString().length < 2) min = "0" + min;

            lblTime.innerHTML = h + ":" + min + ":" + sec;

    </script>

</body>

</html>

Este código JavaScript carga el video seleccionado en el elemento `<video>` cuando se elige un archivo usando el cuadro `<input>`. Luego, se actualiza el tiempo de reproducción en tiempo real y se muestra en la etiqueta `<label>`. Puedes adaptar este código para enviar el tiempo de reproducción a una tabla MySQL cuando sea necesario.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar