Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Guida ad HTML5: multimedialità, realizzazione di un player video (4/7)
Scritto da Pellegrino Principe il 22-10-2010 ore 09:54
Analizziamo, ora, in dettaglio la funzione prepareFallbackContent, dove oltre a cambiare l’immagine poster visualizzata all’interno dell’area del video effettuiamo anche le seguenti operazioni: otteniamo con document.styleSheets[0] il primo foglio di stile linkato nel documento dove con gli statement cssRules[6] e cssRules[16] otteniamo rispettivamente la regola per i controlli e la regola per il div della durata del playback, ai quali abbassiamo l’opacità sin quasi a renderli invisibili.

Poi con la funzione deleteRule cancelliamo le regole che consentono di applicare un :hover sui div delle tracce e sui div dei controlli. Infine, con delle funzioni per la manipolazione del DOM, nel ciclo for, sostituiamo per ogni traccia il testo della risorsa video con un elemento a, che punta ai video da scaricare per il playback.
  1. prepareFallbackContent: function (ve)
  2. {
  3.     PLAYER.fallback = true;
  4.     ve.poster = "img/poster_no_video.png";
  5.  
  6.     // per le regole CSS
  7.     document.styleSheets[0].cssRules[6].style.opacity = 0.1
  8.     document.styleSheets[0].cssRules[16].style.opacity = 0.1
  9.  
  10.     document.styleSheets[0].deleteRule(5); // tracks :hover
  11.     document.styleSheets[0].deleteRule(6); // controls :hover
  12.  
  13.     // prepara gli elementi a
  14.     for (var ix = 1; ix <= 5; ix++)
  15.     {
  16.         var t = document.getElementById("track " + ix);
  17.         var href = document.createElement("a");
  18.         href.setAttribute("href", PLAYER.tracks[ix - 1]);
  19.         href.setAttribute("target", "#");
  20.         href.innerHTML = t.innerHTML;
  21.         href.style.color = "#FFF";
  22.         t.replaceChild(href, t.firstChild);
  23.     }
  24. }
Abbiamo poi la funzione manageTracks, che consente a ogni clic su di un div contenente una traccia multimediale, di creare a runtime un elemento source, che viene inserito all’interno dell’elemento video, con gli attributi type e src correttamente impostati. Successivamente carichiamo il video con quella sorgente multimediale tramite l'invocazione della funzione load.
  1. manageTracks: function (ev)
  2. {
  3.     // se il click è venuto da una traccia creo il relatico elemento source
  4.     if (ev.target.tagName == "DIV" && ev.target.id.indexOf("track") != -1)
  5.     {
  6.         var nr = parseInt(ev.target.id.split(" ")[1]);
  7.  
  8.         // aggiunge dinamicamente un elemento source
  9.         var src = document.createElement("source");
  10.         src.setAttribute("type", PLAYER.media_type);
  11.         src.setAttribute("src", PLAYER.tracks[nr - 1]);
  12.         src.addEventListener("error", PLAYER.prepareFallbackContent, false);
  13.         if (PLAYER.video_element.firstChild)
  14.             PLAYER.video_element.replaceChild(src, PLAYER.video_element.firstChild);
  15.         else
  16.             PLAYER.video_element.appendChild(src);
  17.  
  18.         PLAYER.video_element.load();
  19.     }
  20. }
Precedente: Accesso diretto alla memoria in Java
Successiva: Come usare rsync per i propri backup
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.278 secondi.