Al primer dels seus blocs per a PC Pro , desenvolupador web Ian Devlin mostra com inserir vídeo al vostre lloc web amb HTML5
com solucionar imatges pixelades al Photoshop
Probablement la característica més gran i més comentada d’HTML5 és el vídeo incrustat. Actualment, l’únic mètode per afegir contingut de vídeo al vostre lloc web és amb un connector de tercers com Flash, QuickTime o RealPlayer. Amb els albors d’HTML5 i l’element de vídeo, tot canviarà, ja que el navegador web gestionarà l’assistència de vídeo, eliminant la necessitat de qualsevol assistència de tercers.
Diversos navegadors web ja ofereixen compatibilitat amb HTML5. Aquí us revelarem com podeu incrustar un vídeo sense connectors al vostre lloc i els problemes amb què us enfrontareu.
Tipus de fitxers i compatibilitat del navegador
Per començar, veurem breument els diferents tipus de fitxers de vídeo compatibles amb HTML5. Es tracta de Theora OGG i H.264 (.mp4). Els diferents navegadors admeten diferents tipus i alguns no en suporten cap. La taula següent ho indica:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Chrome 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Còdecs i altres qüestions tècniques
HTML5 en si mateix no especifica un còdec de vídeo per utilitzar i això ha donat lloc a arguments sobre quin és el millor per utilitzar al web . Per tant, per cobrir tots els navegadors, hem de suportar els dos còdecs.
I, per descomptat, hi ha Internet Explorer. De moment, cap de les versions llançades d’Internet Explorer admet l’element de vídeo i encara es necessita un connector per reproduir-lo. Això canviarà amb el llançament d'Internet Explorer 9 (probablement a principis de l'any que ve), quan s'admetrà H.264, juntament amb molts altres elements HTML5.
En cas que us pregunteu com podeu convertir els vostres fitxers de vídeo a OGG (podeu obtenir més informació sobre el tipus Theora OGG a la pàgina TheoraCookbook ) fitxers mitjançant Miro Video Converter .
Per obtenir més informació detallada sobre l'element de vídeo i els còdecs, aneu a submergiu-vos a html5: vídeo al web de Mark Pilgrim.
Codi HTML5
Ara passem al codi HTML5 real i a com podem fer que la cosa funcioni. HTML5 ens proporciona dos nous elements que podem utilitzar per afegir vídeo a les nostres pàgines web: el element, que ja hem esmentat, i el element. Vegem cadascun d’aquests al seu torn.
L’element
L'element de vídeo pot tenir els atributs següents:
| Atribut | Descripció |
|---|---|
| src | un URL vàlid per al propi fitxer de vídeo |
| reproducció automàtica | un booleà que indica si el vídeo s'ha de reproduir automàticament |
| controls | un booleà que indica que el navegador hauria de mostrar els controls de suports predeterminats |
| bucle | un booleà que indica si el vídeo s'ha de reproduir repetidament |
| precàrrega | indica al navegador si cal fer una baixada preventiva del vídeo o si només calen metadades. Els valors possibles són:
|
| cartell | l'URL d'un fitxer d'imatge que es mostrarà quan no hi hagi dades de vídeo disponibles |
| amplada | l'amplada del vídeo, en píxels CSS |
| alçada | l'alçada del vídeo, en píxels CSS |
A partir d’això, es pot comprovar la facilitat d’incorporar un vídeo OGG al vostre lloc web utilitzant només l’element de vídeo:
Això és realment tot el que hi ha.
Qualsevol navegador que admeti el format Theora OGG ara hauria de mostrar i reproduir el vostre vídeo amb més èxit. Per descomptat, no és tan fàcil com això, ja que, com hem vist a la taula anterior, el codi només funcionaria a Firefox, Chrome i Opera. Per tant, també hem de tenir una alternativa a H.264. Això es pot aconseguir utilitzant el element, que ens permet definir diverses fonts multimèdia per a l’element de vídeo.
el botó d'inici de Windows 10 ha deixat de funcionar
L’element
L'element font té els atributs següents:
| Atribut | Descripció |
|---|---|
| src | un URL vàlid per al fitxer multimèdia (en aquest cas, vídeo) |
| tipus | el tipus de fitxer multimèdia que ha de ser un Tipus MIME , per exemple. type='video/ogg' indica que és un vídeo Theora OGG i també podeu proporcionar el còdec MIME per ajudar el navegador a decidir com reproduir el vídeo mitjançant type='video/ogg; codecs='theora, vorbis'. |
| mitjana | proporciona el tipus de suport previst del recurs multimèdia i ha de ser vàlid mitjana query , per exemple. media='handheld' indica que el vídeo és adequat per a dispositius de mà o media='all and (min-device-height:720px)' cosa que indica que el vídeo és adequat per a pantalles de 720 píxels o més. |
Nota: l'element d'origen és nul i té una etiqueta inicial però cap etiqueta de tancament
El més útil de l’element font és que el podem utilitzar per apilar els diferents tipus de fitxers, cosa que permet al navegador provar-los al seu torn fins que en troba un que pugui reproduir.
Utilitzant i junts
Per apilar vídeos en els diferents tipus de l'element de vídeo, introduïm el codi de la següent manera:
Your browser does not support the video element.
El codi anterior funcionarà ara a tots els navegadors, excepte a Internet Explorer, que mostrarà el missatge indicat anteriorment.
Podeu provar-ho vosaltres mateixos veient la pàgina de vídeo de prova HTML5, que conté un exemple de vídeo d’una papallona tant en format Theora OGG com en format MP4, de manera que si ho esteu veient a Firefox, Chrome, Safari, Opera o a l’iPhone o a Telèfon Android, hauríeu de poder-lo veure.
Els ganivets esmolats que hi ha entre vosaltres ara us adonareu que podem aprofitar aquest apilament i tenir una alternativa a Flash (o algun altre complement) a la part inferior en lloc de mostrar-vos que no sentiu aquest missatge de vídeo mitjançant el codi següent :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
Conclusió
Com passa amb la majoria d’elements HTML5, actualment el suport del navegador per als elements font i de vídeo és incomplet. De moment, també hi ha un gran debat sobre si l’element font matarà l’ús de Flash com el mètode més popular per afegir contingut de vídeo als llocs web. No estic segur que matarà Flash completament, però, tot i així, crec que és just dir que és aquí per quedar-se i que proporcionarà als desenvolupadors web un enfocament més net i fàcil d’incorporar vídeo.
