Complemento Mostrar vistas previas de miniaturas

En este tema, aprenderá sobre el complemento de vistas previas en miniatura que permite que la línea de tiempo muestre una imagen de vista previa en puntos definidos para su video. El usuario puede pasar el mouse sobre la línea de tiempo y las imágenes definidas por usted se mostrarán para rangos de tiempo específicos.

Ejemplo

La siguiente imagen muestra una miniatura que se muestra cuando el usuario pasa el mouse sobre la barra de progreso:

pantalla-complemento-miniatura

El siguiente video de muestra demuestra el uso del complemento Thumbnails. Empieza a reproducir el vídeo. Luego, pase el mouse sobre la barra de progreso y seleccione una imagen en miniatura para saltar a esa sección del video.

Este tema contiene las siguientes secciones:

Recopilar imágenes en miniatura

En este momento debe recopilar las imágenes usted mismo. Las miniaturas de vista previa se pueden generar como parte de la Proceso de codificación de Zencoder. Además, existen herramientas como SnapMotion para automatizar este proceso.

No importa cómo genere las imágenes, debe decidir la cantidad de imágenes que desea usar y elegir un tamaño apropiado.

Implementar usando código de inserción

Las miniaturas se pueden configurar mediante el complemento de miniaturas. Para implementar el complemento de miniaturas mediante el código de inserción, siga estos pasos:

  1. En Video Cloud Studio, abra el MEDIOS DE COMUNICACIÓN módulo.
  2. Seleccione un video que desee usar y seleccione el Publicar e incrustar botón.
  3. En el cuadro de diálogo, seleccione Brightcove Default Player o un reproductor que haya configurado.

  4. Copia el Avanzado incrustar código y agregar un id atribuir a la video-js etiqueta. Debería ser similar a este: 

    <video-js
  id="myPlayerID"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  controls=""
  data-video-id="2026618970001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
  5. Pegue el código de inserción del reproductor en un editor con el código de su página HTML.
  6. En el head sección del código de su página, agregue el siguiente archivo CSS: 
    <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">
  7. En el body sección, debajo del código de inserción del reproductor, agregue el siguiente archivo JavaScript: 
    <script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>

  8. Debajo del script anterior, agregue un bloque de script con lo siguiente:

    • Obtenga una referencia del reproductor cuando esté listo
    • Llama a thumbnails complemento con imágenes en miniatura de vista previa 
    <script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;

    myPlayer.thumbnails(thumb_data);
  });
  var thumb_data = {
      "0": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png",
          "width": 120
      },
      "29": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png"
      },
      "54": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png"
      },
      "84": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png"
      },
      "114": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png"
      },
      "143": {
          "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png"
      }
  };
	</script>

    Este ejemplo mostrará una imagen de vista previa en miniatura cuando el mouse se desplaza sobre la línea de tiempo de la siguiente manera:

    • La sea-lionfish-thumbnail.png La imagen se muestra desde el inicio del video hasta los 29 segundos.
    • La sea-anemone-thumbnail.png la imagen se muestra de 29 segundos a 54 segundos
    • La sea-clownfish-thumbnail.png la imagen se muestra de 54 segundos a 84 segundos

      . . .

    • La sea-dolphins-thumbnail.png La imagen se muestra desde 143 segundos hasta el final del video.

    Para obtener detalles sobre las opciones del complemento, consulte la Propiedades sección.

  9. Aquí está el ejemplo de código completo: 

    <!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Display Thumbnail Previews</title>
	<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">
</head>

<body>
	<video-js
		id="myPlayerID"
		data-account="1752604059001"
		data-player="default"
		data-embed="default"
		controls=""
		data-video-id="2026618970001"
		data-playlist-id=""
		data-application-id=""
		width="960" height="540"></video-js>
	<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

	<!-- Script for thumbnails plugin -->
	<script src="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.js"></script>

	<script>
	  videojs.getPlayer('myPlayerID').ready(function() {
	    var myPlayer = this;

			myPlayer.thumbnails(thumb_data);
	  });
		var thumb_data = {
        "0": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-lionfish-thumbnail.png",
            "width": 120
        },
        "29": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-anemone-thumbnail.png"
        },
        "54": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-clownfish-thumbnail.png"
        },
        "84": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-seahorse-thumbnail.png"
        },
        "114": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-crab-thumbnail.png"
        },
        "143": {
            "src": "http://solutions.brightcove.com/bcls/assets/images/sea-dolphins-thumbnail.png"
        }
    };
	</script>
</body>
</html>

Propiedades

Las siguientes propiedades del complemento se utilizan para controlar las imágenes en miniatura:

  • primer argumento:
    • El valor puede ser una cadena o un número y está asociado con un objeto.
    • Esto define el tiempo en segundos que desea mostrar su imagen en miniatura.
    • Como mínimo, necesita un 0 propiedad con un src valor para cuando los usuarios colocan el cursor sobre el comienzo de la barra de progreso. Si tiene más tiempo, el complemento dividirá la barra de progreso y mostrará la imagen apropiada cuando el usuario se desplace sobre la barra de progreso.
     
  • src:
    • El valor debe ser una cadena.
    • Esta es la URL de su imagen en miniatura.
  • width:
    • Esta propiedad debe incluirse para la primera imagen en miniatura. Evita que la imagen se deslice fuera de la pantalla cuando se acerca al principio o al final de la barra de progreso.

A continuación, se muestra un ejemplo para configurar imágenes en miniatura para tres bloques de tiempo en la barra de progreso:

  • La primera imagen se muestra cuando un usuario pasa el mouse sobre la barra de progreso desde el inicio del video hasta los 5 segundos.
  • La segunda imagen se muestra de 5 a 10 segundos.
  • La tercera imagen se muestra desde los 10 segundos hasta el final del video.
  {
    "0": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/Tiger-4-preview.jpg",
        "width": 120
    },
    "5": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/Water-4-preview.jpg"
    },
    "10": {
        "src": "http://solutions.brightcove.com/bcls/assets/images/BirdsOfAFeather-4-preview.jpg"
    }
  }

Sprites de imagen CSS

Si eliges, puedes usar sprites de imágenes CSS como miniaturas de vista previa. El siguiente JSON es un ejemplo de options propiedad cuando se usa un sprite de imagen CSS:

{
  0: {
    src: 'thumbnails.png',
    style: {
      left: '-60px',
      width: '600px',
      height: '68px',
      clip: 'rect(0, 120px, 68px, 0)'
    }
  },
  10: {
    style: {
      left: '-180px',
      clip: 'rect(0, 240px, 68px, 120px)'
    }
  },
  20: {
    style: {
      left: '-300px',
      clip: 'rect(0, 360px, 68px, 240px)'
    }
  },
  30: {
    style: {
      left: '-420px',
      clip: 'rect(0, 480px, 68px, 360px)'
    }
  },
  40: {
    style: {
      left: '-540px',
      clip: 'rect(0, 600px, 68px, 480px)'
    }
  }

Registro de cambios

Ninguno reportado