Affichage dynamique de vidéo avec l'interface Node

Les méthodes de l'interface Node de DOM permettent de créer de façon dynamique un document HTML (ou XML) en ajoutant des noeuds à l'arborescence.

Un exemple peut en être donné pour l'affichage de vidéos de Youtube, grâce aux plugins installés sur tous les navigateurs récents.

Le code à générer

Un lecteur vidéo classique fonctionnant sur tous les navigateurs, à le code suivant:

<embed 
  width="300" height="300" 
  wmode="transparent"
  type="application/x-shockwave-flash" 
  src="https://www.youtube.com/v/WbFFs4DHWys">
</embed> 

Ce code a été testé avec tous les navigateurs.

Génération du code

Un fonction a été définie, qui utilise les méthodes appendChild et setAttribute de Node:

function displayVideo(url, ident)
{
  var element = document.getElementById(ident);
  var emb = document.createElement("embed");
  emb.setAttribute("type" , "application/x-shockwave-flash");
  emb.setAttribute("width", "300");
  emb.setAttribute("height", "300");
  emb.setAttribute("name", "wmode");
  emb.setAttribute("src", url);
  element.appendChild(emb);
}

- La méthode createElement de Document crée un objet Node que l'on assigne à emb.
- On retrouve dans la page HTML l'emplacement où insérer l'objet avec la méthode getElementByID, et selon l'identifieur donné en argument.
- L'objet est inséré par la commande element.appendChild(emb).
- Les différentes propriétés telles que largeur, hauteur, type d'objet sont ajoutées par la méthode setAttribute.

On appelle la fonction de façon dynamique avec onload car il faut que l'arborescence DOM du document soit déjà construite afin de localiser l'élément où insérer l'objet.

<script type="text/javascript">
    var url = "https://www.youtube.com/v/WbFFs4DHWys";
    window.onload=function x()
    { 
      displayVideo(url, "zone");
    } 
</script>

La fonction est appelée avec en paramètres l'URL de la vidéo, et le nom de l'emplacement où la placer, en l'occurence "zone".

Démonstration

La démo affiche d'abord le lecteur vidéo créé dynamiquement, sous le titre "DYNAMIQUE" puis le même lecteur écrit statiquement sous le titre "STATIQUE".

DYNAMIQUE

STATIQUE

Code source de la démo:

<p>DYNAMIC</p>
<p id="zone"></p>

<p>STATIC</p>
<p>
<embed width="300" height="300" wmode="transparent"
  type="application/x-shockwave-flash" 
  src="https://www.youtube.com/v/WbFFs4DHWys">
</embed> 
</p>

<script src="node-video.js" type="text/javascript"></script>
<script type="text/javascript">
var url = "https://www.youtube.com/v/WbFFs4DHWys";
window.onload=function x() {  displayVideo(url, "zone"); } 
</script>

La vidéo utilisée en exemple montre un robot androïde expérimental, mais cela, c'est le futur...