Afficher le plugin d'aperçu des vignettes

Dans cette rubrique, vous découvrirez le plugin d'aperçu des vignettes qui permet à la chronologie d'afficher une image d'aperçu à des points définis pour votre vidéo. L'utilisateur peut passer la souris sur la chronologie et les images définies par vous seront affichées pour des plages de temps spécifiées.

Exemple

L'image ci-dessous montre une vignette affichée lorsque l'utilisateur passe la souris sur la barre de progression:

L'exemple de vidéo ci-dessous montre l'utilisation du plugin Thumbnails. Commencez à lire la vidéo. Ensuite, passez la souris sur la barre de progression et sélectionnez une image miniature pour accéder à cette section de la vidéo.

Cette rubrique contient les sections suivantes :

Collectez des images miniatures
Mise en œuvre du module Players
Propriétés du plugin Thumbnails
Utilisation des sprites d'image CSS

Collectez des images miniatures

À ce stade, vous devez collecter les images vous-même. Des miniatures d'aperçu peuvent être générées dans le cadre du Processus d'encodage Zencoder. En outre, des outils existent comme SnapMotion pour automatiser ce processus.

Quelle que soit la manière dont vous générez les images, vous devez décider du nombre d'images que vous souhaitez utiliser et choisir une taille appropriée.

Implémenter à l'aide du code d'intégration

Les miniatures peuvent être configurées en utilisant le plugin des miniatures. Pour implémenter le plug-in de vignettes à l'aide du code incorporé, procédez comme suit:

Dans Video Cloud Studio, ouvrez le MÉDIAS module.
Sélectionnez une vidéo que vous souhaitez utiliser, puis sélectionnez le Publier et intégrer bouton.
Dans la boîte de dialogue, sélectionnez le lecteur par défaut de Brightcove ou un lecteur que vous avez configuré.

Copiez le Avancée incorporer le code et ajouter un id attribut au video-js marque. Il devrait ressembler à ceci :

<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>

Collez le code d'intégration du lecteur dans un éditeur avec le code de votre page HTML.

dans le head section de votre code de page, ajoutez le fichier CSS suivant:

<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-thumbnails/videojs.thumbnails.css">

dans le body sous le code d'intégration du lecteur, ajoutez le fichier JavaScript suivant:

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

Sous le script précédent, ajoutez un bloc de script avec les éléments suivants:
- Obtenez une référence au lecteur lorsqu'il est prêt
- Appeler le thumbnails plugin avec aperçu des images miniatures
Notez que la première image miniature a un width biens. Vous devez l'inclure pour que l'image miniature reste visible lorsque l'utilisateur survole ou parcourt le début ou la fin de la barre de progression.
```
<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>
```
Cet exemple affichera une image d'aperçu miniature lorsque la souris survole la chronologie comme suit:
- le poisson-lion de mer-miniature.png l'image est affichée à partir du début de la vidéo jusqu'à 29 secondes
- le anémone-de-mer-miniature.png l'image est affichée de 29 secondes à 54 secondes
- le poisson-clown-de-mer-miniature.png l'image est affichée de 54 secondes à 84 secondes
  . . .
- le dauphins-de-mer-miniature.png l'image s'affiche de 143 secondes à la fin de la vidéo
Pour plus de détails sur les options du plugin, consultez le Propriétés section.

Voici l'exemple de code complet:

<!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>

Propriétés

Les propriétés de plugin suivantes sont utilisées pour contrôler les images miniatures:

premier argument:
- La valeur peut être une chaîne ou un nombre et est associée à un objet.
- Ceci définit la durée en secondes pendant laquelle vous souhaitez afficher votre image miniature.
- Au minimum, vous avez besoin d'un 0 propriété avec un src valeur lorsque les utilisateurs survolent le début de la barre de progression. Si vous avez des heures supplémentaires, le plugin partitionnera la barre de progression et affichera l'image appropriée lorsque l'utilisateur survole la barre de progression.
Remarque : Vous devez inclure un 0 propriété avec un src valeur. Sinon, le plugin essaiera d'utiliser l'exemple de vignette et vous risquez d'obtenir une erreur.
:src
- La valeur doit être une chaîne.
- Il s'agit de l'URL de votre image miniature.
:width
- Cette propriété doit être incluse pour la première image miniature. Il empêche l'image de glisser hors de l'affichage à l'approche du début ou de la fin de la barre de progression.

Voici un exemple de définition d'images miniatures pour trois blocs de temps dans la barre de progression:

La première image s'affiche lorsqu'un utilisateur passe la souris sur la barre de progression depuis le début de la vidéo jusqu'à 5 secondes
La deuxième image s'affiche entre 5 secondes et 10 secondes
La troisième image s'affiche de 10 secondes à la fin de la vidéo

  {
    "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 d'image CSS

Si vous choisissez, vous pouvez utiliser des sprites d'image CSS comme vignettes d'aperçu. Le JSON suivant est un exemple pour le options propriété lors de l'utilisation d'un sprite d'image 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)'
    }
  }

Changelog

Aucun signalé