Table des matières

Ajout de contenus multimédia dans Chimère

Cette page est un petit guide qui recense les différentes modifications à réaliser pour permettre l'utilisation de fichiers vidéos, audios ou flash (panoptisons) dans Chimère. Ces fichiers multimédia sont rendus visibles à l'aide de balise html5.

Voici la marche à suivre:

Espace d'administration de Chimère

On commence par ajouter les catégories et sous catégories qui seront utilisée pour classer les différents points d'intérêts, cette étape est facultative mais elle permettra de faciliter le trie des POI sur la carte

L'étape suivante consiste à ajouter 3 nouveaux modèles de propriétés, un pour chacune des sous catégories, on fera attention à l'ordre de déclaration des propriété car c'est sur cet ordre que nous allons jouer pour afficher les bons players

Ici mon numéro d'ordre commence à 2 car je dispose déjà d'un modèle “Description” permettant de décrire le point à l'aide d'un texte. Chaque modèle de propriété est déclaré avec un type “Texte” (simple champ input)

Code source

L'étape suivante consiste à modifier le code de certains fichiers utilisés par l'application pour permettre l'affichage des players multimédia en fonction des modèles de propriétés créés précédemment.

templates/detail.html: Nous allons modifier le template d'affichage des détails d'un point d'intérêt. Cette modification va permettre de générer un player en fonction du modèle de propriété appelé (son identifiant), évidemment il reste possible d'écrire directement le code html complet dans une propriété de type “texte long” mais ceci nécessite de bien maitriser la syntaxe html:

{% for property in marker.getProperties %}
  <p id='{{property.propertymodel.getNamedId}}'>
    {{ property.value|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4"|safe}}
  </p>
{% endfor %}
{% for property in marker.getProperties %}
  {% if property.value %}
    {% ifequal property.propertymodel.getNamedId  "property_1_1" %}
      <p id='{{property.propertymodel.getNamedId}}'>
        {{ property.value|sanitize:"p b i br hr strong em span:style a:href:target ul li ol h1 h2 h3 h4"|safe}}
      </p>
    {%endifequal%}
    {% ifequal property.propertymodel.getNamedId  "property_2_2" %}
      <video controls autobuffer autoplay='autoplay' width='300' height='240' >
        <source type='video/ogg' src='<nowiki>{{ property.value}}</nowiki>' />
      </video>
    {%endifequal%}
    {% ifequal property.propertymodel.getNamedId  "property_3_3" %}
      <audio controls="controls" autoplay="autoplay" preload="auto">
        <source src="<nowiki>{{ property.value}}</nowiki>" type="audio/ogg" />
      </audio>
    {%endifequal%}
    {% ifequal property.propertymodel.getNamedId  "property_4_4" %}
      <embed src="<nowiki>{{ property.value}}</nowiki>" width="300" height="240">
    {%endifequal%}
  {% endif %}
{% endfor %}

static/main_map.js: Ici il s'agit de modifier le code javascript d'affichage de la carte pour changer le comportement du clique sur l'infobulle. Cette modification n'est pas utile sur la carte principale, les détails du points n'étant pas affichés dans l'infobulle, mais si l'on passe sur la version simple de la carte il devient nécessaire d'empécher la fermeture de l'infobulle lorsque l'on clique dessus (les menus des différents players n'étant accessible que depuis l'infobulle)

/* hide on click on the cloud */
currentPopup.groupDiv.onclick = hidePopUp;
/* hide on click on the cloud */
/* currentPopup.groupDiv.onclick = hidePopUp; */
  1. Les balises utilisées ici sont des balises html5, pour que l'affichage du contenu multimédia fonctionne il sera nécessaire de disposer d'un navigateur compatible, pour voir les différentes options disponibles vous pouvez vous rendre sur les pages suivantes: tag vidéo - tag embed - tag audio
  2. Pour tester la compatibilité de votre navigateur c'est ici
  3. Pour voir quels format sont supportés par les différents navigateur compatible html5 c'est ici pour l'audio et la pour la video
  4. Aucun fichier multimédia n'est stocké sur le serveur, ils doivent être accessible en ligne et c'est l'url du fichier qui doit être renseignée dans le formulaire.

That's All Folks …