Mostrar la duración, el tiempo actual y el tiempo restante del vídeo

Última actualización: 2023-09-19

Puede utilizar el TVSDK del explorador para recuperar información sobre los medios que puede mostrar en la barra de búsqueda.

  1. Espere a que el reproductor esté en el estado PREPARADO.

  2. Recupere el tiempo del cabezal de reproducción actual utilizando MediaPlayer.currentTime atributo.

    Este atributo devuelve la posición actual del cabezal de reproducción en la cronología virtual en milisegundos. El tiempo se calcula en relación con el flujo resuelto que puede contener varias instancias de contenido alternativo, como varios anuncios o pausas publicitarias empalmadas en el flujo principal. Para los flujos en directo/lineales, el tiempo devuelto siempre está en el intervalo de la ventana de reproducción.

    MediaPlayer.currentTime

  3. Recupere el rango de reproducción de la emisión y determine la duración.

    1. Utilice el mediaPlayer.playbackRange para obtener el intervalo de tiempo de la escala de tiempo virtual.

    2. Para determinar la duración, reste el inicio desde el final del intervalo.

      Esto incluye la duración del contenido adicional que se inserta en el flujo (anuncios).

      Para VOD, el intervalo siempre comienza con cero y el valor final es igual a la suma de la duración del contenido principal y las duraciones del contenido adicional que se inserta en el flujo (anuncios).

      Para un recurso lineal/activo, el rango representa el intervalo de la ventana de reproducción y este intervalo cambia durante la reproducción.

  4. Utilice los métodos disponibles en los elementos TVSDK de MediaPlayer y Browser para configurar los parámetros de la barra de búsqueda.

    Por ejemplo, este es un diseño posible para mostrar la barra de búsqueda en el HTML.

    <div class="seekbar" id="seekbar">
     <div>
        <span class="backer" id="backer"></span>
        <span class="buffer" id="buffer" ></span>
        <div class="playhead" id="playhead"></div>
                  <span class="progress" id="progress" ></span>
        </div>
      </div>
  </div>

    Este es el css correspondiente:

    #seekbar {
      position: relative;
      width: 100%;
      height: 16px;
      cursor: pointer;
      background: transparent;
}

#seekbar div {
      position: relative;
      height: 100%;
      margin-left: 8px;
      margin-right: 8px;
}

#seekbar span {
      position: absolute;
      height: 60%;
      top: 20%;

      display: block;

      -webkit-border-radius: 16px;
      -moz-border-radius: 16px;
      border-radius: 16px;
}

#seekbar.playhead {
     z-index: 1011;
     height: 14px;
     width: 14px;
     border: 1px outset #c9cbce;
     position: absolute;
     left: -8px; /* adjust center of playhead over start of range */
     display: block;
     padding: 0;
     margin: 0;

     background: #c9cbce; /* Old browsers */
     background: -moz-radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* FF3.6+ */
     background: -webkit-radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* Chrome10+,Safari5.1+ */
     background: -o-radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* Opera 11.10+ */
     background: -ms-radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* IE10+ */
     background: radial-gradient(circle, #4591ce 0%, #3080c2 40%, #c9cbce 45%, #dedee1 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9cbce', endColorstr='#dedee1',GradientType=0 ); /* IE6-9 */

     -webkit-border-radius: 16px;
     -moz-border-radius: 16px;
     border-radius: 16px;
}

#seekbar.backer {
        z-index: 1004;
        width: 100%;

        background: #414142; /* Old browsers */
        background: -moz-linear-gradient(top,  #414142 0%, #343232 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#414142), color-stop(100%,#343232)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #414142 0%,#343232 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #414142 0%,#343232 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #414142 0%,#343232 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #414142 0%,#343232 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414142', endColorstr='#343232',GradientType=0 ); /* IE6-9 */

}

#seekbar .buffer {
       z-index: 1005;
       position: absolute;

       background: #4b4b4c; /* Old browsers */
       background: -moz-linear-gradient(top,  #4b4b4c 0%, #818184 100%); /* FF3.6+ */
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4b4b4c), color-stop(100%,#818184)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  #4b4b4c 0%,#818184 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  #4b4b4c 0%,#818184 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  #4b4b4c 0%,#818184 100%); /* IE10+ */
       background: linear-gradient(to bottom,  #4b4b4c 0%,#818184 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4c', endColorstr='#818184',GradientType=0 ); /* IE6-9 */
}

#seekbar .progress {
        z-index: 1010;
        position: absolute;

        background: #4591ce; /* Old browsers */
        background: -moz-linear-gradient(top,  #4591ce 0%, #3080c2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4591ce), color-stop(100%,#3080c2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4591ce 0%,#3080c2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4591ce 0%,#3080c2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4591ce 0%,#3080c2 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4591ce 0%,#3080c2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4591ce', endColorstr='#3080c2',GradientType=0 ); /* IE6-9 */
}

  5. Escuchar para AdobePSDK.TimeChangeEvent y actualice la barra de búsqueda en consecuencia.

    player.addEventListener(AdobePSDK.PSDKEventType.TIME_CHANGED, onTimeChange);

/**
     * Called when the player's time changes.
     * Update UI to show current time, seekbar playhead position and buffer level.
     */
     function onTimeChange(event)
     {
       if (!seekBar.isSeeking) {
       var time = event.time;
       var range = player.playbackRange;
       seekBar.updatePlayhead(time, range);
       updateDisplayTime(time, range);

        var bufferedRange = player.bufferedRange;
        seekBar.updateBufferLevel(bufferedRange.end, range);
      }

    }

    En este ejemplo se crea un objeto seekbar para actualizar la barra de búsqueda:

    /**
    * Seekbar object which handles the display of the player progress,
    * playhead, and buffer level.
    */
    seekBar = (function () {

    var playheadHalfSize = 8, // must be half width of playhead defined in CSS
        containerElm = null,
        playheadElm = null,
        backerElm = null,
        bufferElm = null,
        progressElm = null,
        currentPos = 0, // [0,1] relative to range
        currentBuffer = 0,// [0,1] relative to range
        listener = null,
        isSeeking = false,

         setPositionChangeListener = function (funct) {
            listener = funct;
         },

         getSeekBarBounds = function () {
           return backerElm.getBoundingClientRect();
         },

         onPositionChange = function (event) {
             var pos = event.pageX || event.clientX;
             var bounds = getSeekBarBounds();
             // normalize position to seek bounds
             pos -= bounds.left;
             var percent = pos / (bounds.right - bounds.left);

             // check bounds
              if (percent > 1) percent = 1;
              else if (percent < 0) percent = 0;

              currentPos = percent;
              setPosition(percent);
           },

              updatePlayhead = function (time, range) {
              if (!isSeeking) {
              var pos = convertTimeToRelativePosition(time, range);
              setPosition(pos);
           }
         },

            setPosition = function (percent) {
            // adjust to keep playhead graphic inside container on right side
            var bounds = getSeekBarBounds();
            var pos = percent * (bounds.right - bounds.left);

            progressElm.style.width = (pos).toString() + "px";
            playheadElm.style.left = (pos-playheadHalfSize).toString() + "px";

            currentPos = percent;
            return percent;

            },

             updateBufferLevel = function (level, range) {
             if (!isSeeking) {
                 var position = convertTimeToRelativePosition(level, range);
                 setBufferLevel(position);
                }
            },

              setBufferLevel = function (percent) {
                 currentBuffer = percent;
                 var bounds = getSeekBarBounds();
                 var pos = percent * (bounds.right - bounds.left);

                        bufferElm.style.width = pos.toString() + "px";
                    },

                    resetSeekBar = function () {
                       setPosition(currentPos);
                       setBufferLevel(currentBuffer);
                    },

                    convertTimeToRelativePosition = function (time, range) {
                       // convert time to a percentage of the duration
                       var position = (time - range.begin) / range.duration;
                       if (position > 1) position = 1;
                       else if (position < 0) position = 0;
                       return position;
                    },

                    unattachEvents = function (e) {
                      this.removeEventListener('mousemove', onPositionChange);
                      this.removeEventListener('mouseout', unattachEvents);
                      this.removeEventListener('mouseup', unattachEvents);

                        this.addEventListener('mouseover', attachEvents);
                        isSeeking = false;
                    },

                    attachEvents = function (e) {
                       this.addEventListener('mousemove', onPositionChange);
                       this.addEventListener('mouseout', unattachEvents);
                       this.addEventListener('mouseup', unattachEvents);
                       isSeeking = true;
                       return false;
                    };

            return  {
                init : function () {
                  containerElm = document.getElementById("seekbar");
                  backerElm = document.getElementById("backer");
                  playheadElm = document.getElementById("playhead");
                  bufferElm = document.getElementById("buffer");
                  progressElm = document.getElementById("progress");

                  // client seek via scrubbing
                  containerElm.addEventListener('mousedown', attachEvents);

                  // client seek via single click or 'mouseup' after scrubbing
                  containerElm.addEventListener('click', function (e) {
                     if (listener !== null && !player.areControlsDisabledInAd()) {
                        onPositionChange(e);
                        // callback to notify of desired seek position
                        listener.call(this, currentPos);
                        }
                    });

                    // end client seek via scrubbing
                    document.addEventListener('mouseup', function (e) {
                        containerElm.removeEventListener('mouseover', attachEvents);
                    });
                },

               /**
               * Is the playhead currently being scrubbed.
               */
               isSeeking : isSeeking,

               /**
               * Change the position of the playhead.
               * @param time - time in seconds to position playhead
               * @param range - current playback range
               */
               updatePlayhead : updatePlayhead,

               /**
               * Change the position of the buffer range.
               * @param time - time in seconds to position head of buffer
               * @param range - current playback range
               */
               updateBufferLevel : updateBufferLevel,

               /**
               * Set listener which is called when the playhead position changes
               * by the user event. Listener is not called when playhead position
               * changes via updatePlayhead function.
               * @param listener - callback function, passed single position argument
               * representing the playhead position in the range [0,1].
               */
               setPositionChangeListener : setPositionChangeListener,

               /**
               * Readjust position levels if seekbar is resized.
               * Should be called every time the video window changes size.
               */
               readjustSeekBar : resetSeekBar
            };

        })();
Página anterior
Next page

En esta página