Kaliop-media-player NPM

Kaliop Player/Playlist

Installation

Le player est construit sur la base de VueJs, il faut donc commencer par ajouter au projet les modules npm suivants :

npm install vue vue-loader vue-template-compiler

et ajouter à la config webpack (fichier webpack.common.js) les lignes suivantes :

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module: {
  rules: [
    ...
    {
      test: /\.vue$/  ,
      loader: 'vue-loader'
    }
  ]
},

plugins: [
  ...
  new VueLoaderPlugin()
]

puis il faut importer et initialiser le fichier 'kaliopMediaPlayerHandler.js' à la fin du ficher index.js qui sera compilé par webpack :

import kaliopMediaPlayerHandler from './components/mediaplayer/kaliopMediaPlayerHandler';
kaliopMediaPlayerHandler.init();

Utilisation

Création du composant HTML Playlist :

Créer un container ayant l'attribut "data-kaliop-player"
L'attribut "data-kaliop-player" devra contenir les données utiles au bon fonctionnement du player au format JSON
Dans ce container, il faut créer une div correspondant à chaque fonctionnalité (widget) du player comme dans l'exemple ci-dessous :

<div data-kaliop-player="{{ playerData }}">
  <div data-vue-widget="kaliop-player-player"></div>
  <div data-vue-widget="kaliop-player-controls"></div>
  <div data-vue-widget="kaliop-player-infos"></div>
  <div data-vue-widget="kaliop-player-description"></div>
  <div data-vue-widget="kaliop-player-transcription"></div>
  <div data-vue-widget="kaliop-player-autoplay"></div>
  <div data-vue-widget="kaliop-player-playlist"></div>
</div>

Utilisation avancée du composant Playlist

Pour que le composant fonctionne, seul le widget "player" est obligatoire, tous les autres widgets sont optionnels et peuvent être utilisés indépendament les uns des autres.

Le markup au sein du container "data-kaliop-player" est libre.

Chaque widget peut être disposé librement à l'intérieur comme dans l'exemple ci-dessous :

<section class="VideoPlayer" data-kaliop-player="{{ playerData }}">
  <div class="VideoPlayer-content">
    <div class="VideoPlayer-player">
      <div data-vue-widget="kaliop-player-player"></div>
      <ul class="VideoPlayer-accordion" data-player-accordion>
        <li class="VideoPlayer-accordionItem" data-accordion-item>
          <a href="#" class="VideoPlayer-infos">
            <div data-vue-widget="kaliop-player-infos"></div>
          </a>
          <div class="VideoPlayer-description" data-tab-content>
            <div data-vue-widget="kaliop-player-description"></div>
          </div>
          <div class="VideoPlayer-transcription">
            <div data-vue-widget="kaliop-player-transcription"></div>
          </div>
        </li>
      </ul>
    </div>
    {% if is_playlist ?? true %}
      <div class="VideoPlayer-playlist">
        <div data-vue-widget="kaliop-player-autoplay"></div>
        <div data-vue-widget="kaliop-player-playlist"></div>
      </div>
    {% endif %}
  </div>
</section>

Structure de données

Comme indiqué dans la partie précédente, le player utilise des données au format JSON. Vous trouverez un exemple de JSON ici : Exemple JSON

Ces données sont découpées en 3 parties principales :

medias: tableau de médias (requis)
options: liste des options permettant de configurer le player (optionnel)
labels: liste de labels pour surcharger les textes par défaut (optionnel)

Medias

Chaque media est constitué des propriétés suivantes :

PROPRIÉTE	TYPE	REQUIS
id	String ou Int	Oui
media_sources*	Array: { src: String, type: String }, ...	Oui
title	String	Non
description	String (html)	Non
image	Object: { src: String, alt: String }	Non
date	String	Non
author	String	Non
duration	String	Non
transcription_url	String	Non
subtitles**	Array: { label: String, srcLang: String, src: String }, ...	Non

*Un média peut contenir plusieurs sources pour la compatibilité navigateur.

**Chaque sous-titre correspond à une langue, "srcLang" est le code de la langue du sous-titre

Options

Liste des options disponibles :

OPTION	TYPE	VALEUR PAR DÉFAUT	DESCRIPTION
mediaType	String	video	Définit le type de lecteur à afficher (vidéo/audio)
autoplay	Boolean	false	Définit si la lecture automatique est activée par défaut
descriptionOnPreview	Boolean	false	Affiche la description du média dans les éléments de la playlist
authorOnPreview	Boolean	false	Affiche le nom de l'auteur du média dans les éléments de la playlist
playButton*	Object	Object: { isVisible: Boolean, hasIcon: Boolean }	Si "isVisible" = true, affiche le bouton de lecture avec l'image de poster par dessus le player. Si "hasIcon" = true, affiche une icone "play"
controlsList	Object	Object: { nodownload: Boolean, noplaybackrate: Boolean }
disablePictureInPicture	Boolean	false

*Cette option est utilisable uniquement pour les média type "vidéo"

Labels

Liste des labels des éléments du player

LABEL	VALEUR PAR DÉFAUT
transcriptionLabel	Transcription
previousMediaLabel	Précédent
nextMediaLabel	Suivant
autoplayTitle	Vidéos à suivre
autoplayLabel	Lecture automatique

Définition des widgets

Player

Affiche un player HTML5 permettant la lecture des éléments de la playlist (vidéo/audio). Par défaut, le premier élément de la playlist est chargé à l'ouverture de la page.