L'etiqueta de vídeo HTML5 facilita l'addició de vídeo a les vostres pàgines web. Però tot i que sembla fàcil a la superfície, hi ha moltes coses que cal fer perquè el vostre vídeo funcioni. Aquest tutorial us durà a terme els passos per crear una pàgina en HTML5 que executarà el vídeo en tots els navegadors moderns.
- Allotjament del vostre propi vídeo HTML5 versus l'ús de YouTube
- Descripció ràpida de la compatibilitat de vídeo a la Xarxa
- Crea i edita el teu vídeo
- Converteix el vídeo a Ogg per a Firefox
- Converteix el vídeo en MP4 per a Safari
- Converteix el vídeo en FLV per a Internet Explorer
- Afegiu l'element de vídeo a la vostra pàgina web
- Afegiu JavaScript i Flash Player per a que Internet Explorer funcioni
- Proveu a tants navegadors com puguis
Hosting your own HTML 5 Video vs. Using YouTube
YouTube és un gran lloc. Facilita la incorporació de vídeo a pàgines web ràpidament i amb algunes excepcions menors és bastant perfecta en la seva execució. Si publiques un vídeo a YouTube, pots estar segur que qualsevol podrà mirar-lo.
Però l'ús de YouTube per incrustar els teus vídeos té alguns inconvenients
La majoria dels problemes amb YouTube són al costat del consumidor, en comptes del costat del dissenyador, com ara:
- Cerca i indexació lenta
- Talls del servidor
- S'ha eliminat el contingut (aparentment) de forma arbitrària
- Massa contingut dolent
Però hi ha algunes raons per les quals YouTube també és dolent per als desenvolupadors de contingut, incloent:
- Durada màxima de 10 minuts per a vídeos (per a comptes gratuïts)
- Rendiment baix de la càrrega
- YouTube obté drets d'ús il·limitats del teu vídeo
- Qualsevol usuari de YouTube obté drets d'ús il·limitats del vostre vídeo
El vídeo HTML5 dóna alguns avantatges sobre YouTube
L'ús de HTML5 per a vídeo us permetrà controlar tots els aspectes del vostre vídeo, de qui pot veure-ho, quant de temps dura, què conté el contingut, on està allotjat i com funciona el servidor. I el vídeo HTML5 us ofereix l'oportunitat de codificar el vostre vídeo en tants formats com cal assegurar-vos que el nombre màxim de persones pugui veure-ho. Els vostres clients no necessiten cap connector ni esperen fins que YouTube publiqui una versió més recent.
Per descomptat, el vídeo HTML5 ofereix alguns inconvenients
Això inclou:
- Heu de codificar el vostre vídeo en almenys tres còdecs diferents
- Heu d'incloure alguns JavaScript per assegurar-vos que els navegadors que no admetin HTML5 funcionaran
- El vostre servidor ha de poder controlar els requisits d'ample de banda dels vídeos d'allotjament
Continueu llegint a continuació
02 de 10Descripció ràpida de la compatibilitat de vídeo a la Xarxa
L'addició de vídeo a pàgines web ha estat durant molt de temps un procés difícil. Hi va haver tantes coses que podrien anar malament:
- En primer lloc, utilitzeu el Etiqueta per incrustar el teu vídeo a la teva pàgina. PERÒ aquesta etiqueta està obsoleta a favor d'una altra etiqueta. I alguns navegadors mai no ho suporten bé de totes maneres.
- Així que canvieu al etiqueta, però els navegadors antics no ho admeten i els navegadors més nous són incomptables en el seu suport.
- Llavors creus que Flash! I codifiqueu el vostre vídeo com a fitxer FLV. Però Flash no és compatible amb molts dispositius mòbils i moltes persones odien Flash no importa com s'utilitzi (el 25% dels enquestats de la meva enquesta preguntant sobre com us sentiu sobre Flash ha afirmat que no poden suportar Flash de cap manera).
- Així que decideixes carregar el teu vídeo a un lloc d'incrustació de vídeos com YouTube, però teniu els problemes amb YouTube que comentem.
- Finalment, decideix anar amb HTML5, però Internet Explorer no ho admet (no fins a Internet Explorer 9). I fins i tot si ho feu, hi ha dos estàndards de còdec de vídeo que són compatibles i només un navegador que pot utilitzar tots dos. Suport del navegador per a còdecs de vídeo i contenidors
Llavors, què se suposa que has de fer? Alliberar-se al vídeo ja no és una opció per a la majoria dels llocs, ja que el vídeo cada vegada és més important. I molts llocs s'han canviat correctament al vídeo.
Les següents pàgines d'aquest article us ajudaran a afegir-hi un vídeo a les vostres pàgines web que funcionen a Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 i 4, iPhone i Android, Flash i Internet Explorer 7 i 8. Us mostraran també teniu les claus necessàries per afegir compatibilitat amb altres navegadors antics, si cal.
Continueu llegint a continuació
03 de 10Crea i edita el teu vídeo
El primer que necessiteu quan es va a posar un vídeo en una pàgina web és el vídeo real. Podeu disparar contínuament i editar-lo després per crear una funció, o podeu guiar-lo i planificar-lo abans d'hora. De qualsevol manera funciona bé, és el que us trobeu còmode. Si no sap quin tipus de vídeo ha de fer, consulteu aquestes idees a la Guia de vídeos d'escriptori:
- Projectes de vídeo familiar
- Màrqueting i vídeos promocionals
- Video Tours virtuals
- Com fer vídeos
- Videos de casament
Obteniu informació sobre com gravar vídeo d'alta qualitat
Assegureu-vos de saber registrar a l'interior i a l'aire lliure, així com a gravar l'àudio. La il·luminació també és molt important: els trets que són massa brillants fan mal als ulls, i massa foscos semblen fangosos i poc professionals. Fins i tot si només teniu previst tenir un vídeo de 30 segons al vostre lloc, la major qualitat serà el que millor reflectirà al vostre lloc web.
Recordeu també que el dret d'autor s'aplica a qualsevol so o música (a més de material d'arxiu) que voleu utilitzar al vostre vídeo. Si no teniu accés a un amic que pugui escriure i reproduir una cançó per a vostè, haureu de trobar música gratuïta per reproduir-la en segon pla. També hi ha llocs on podeu emmagatzemar imatges per afegir als vostres vídeos.
Edició del vostre vídeo
No importa el programari d'edició que utilitzeu, sempre que estigui familiaritzat amb ell i el pugui utilitzar de manera eficaç. Gretchen, la Guia de vídeos d'escriptori, té alguns consells professionals d'edició de vídeo que us poden ajudar a editar els vostres vídeos perquè es vegin bé.
Desa el teu vídeo a un MOV o AVI (o MPG, CD, DV)
Per a la resta d'aquest tutorial, anem a suposar que teniu el vostre vídeo desat en algun tipus de format d'alta qualitat (no comprimit) com AVI o MOV. Tot i que podeu utilitzar aquests fitxers tal com són, s'executen tots els problemes del vídeo que ja hem comentat. A les pàgines següents s'explica com convertir el vostre fitxer en tres tipus perquè el nombre més gran de navegadors sigui visible.
04 de 10Converteix el vídeo a Ogg per a Firefox
El primer format que convertirem a Ogg (de vegades anomenat Ogg-Theora). Aquest format és el que tots poden veure Firefox 3.5, Opera 10.5 i Chrome 3.
Malauradament, mentre Ogg té compatibilitat amb el navegador, molts dels coneguts programes de vídeo que podeu comprar (Adobe Media Encoder, QuickTime, etc.) no ofereixen una opció de conversió Ogg. Així, l'única manera de convertir el vostre vídeo a Ogg és trobar un programa de conversió a la Xarxa.
Opcions de conversió
Hi ha una eina en línia anomenada Media-Convert que pretén convertir diversos formats de vídeo (i àudio) en altres formats de vídeo (i àudio). Quan ho provem amb el meu vídeo de prova de 3 segons, no podríem aconseguir que funcioni en Mac. Però potser tingueu molta sort. Aquest lloc té la possibilitat de ser gratuït.
Algunes altres eines que hem trobat inclouen:
- Miro Video Converter (Windows Macintosh): aquest programa té la possibilitat de convertir tant a Ogg com a MP4 (H.264) i és de codi obert.
- Koyote Video Converter (Windows)
- Convertidor de vídeos gratuït Creiem que això té tant Windows com una versió de Macintosh, però era difícil dir-ho des del seu lloc
- El codificador simple de Theora (Macintosh): aquest és el que solem utilitzar.
Un cop hagueu desat el vostre vídeo en format Ogg, deseu-lo en una ubicació del vostre lloc web i aneu a la pàgina següent per convertir-lo a altres formats per a altres navegadors.
Continueu llegint a continuació
05 de 10Converteix el vídeo en MP4 per a Safari
El següent format que haureu de convertir el vostre vídeo a és MP4 (vídeo H.264) perquè es pugui reproduir a Safari 3 i 4 i l'iPhone i Android. A més, els vídeos H.264 es poden convertir fàcilment a fitxers FLV per veure'ls a Flash.
Aquest format està més fàcilment disponible en productes comercials i, probablement, ja teniu un programa que es convertirà a MP4 si teniu un editor de vídeo. Si teniu Adobe Premiere, podeu utilitzar el Codificador de vídeo d'Adobe, o si teniu QuickTime Pro que funcionarà també. Molts dels convertidors que comentem a la pàgina anterior també convertiran els vídeos a MP4.
- MediaConvert: una eina AWS en línia.
- Miro Video Converter (Windows Macintosh): aquest programa té la possibilitat de convertir tant a Ogg com a MP4 (H.264) i és de codi obert.
- SUPER (Windows): convertirà molts tipus de fitxers diferents a MP4 i FLV
- Convertidor de vídeos gratuït Creiem que això té tant Windows com una versió de Macintosh, però era difícil dir-ho des del seu lloc.
Deseu el vostre fitxer MP4 al vostre lloc web i, a continuació, haureu de convertir-lo a Flash per a Internet Explorer.
06 de 10Converteix el vídeo en FLV per a Internet Explorer
La manera més senzilla de convertir vídeos a FLV és utilitzar Flash mateix. Així és com convertim els meus vídeos a Flash. Però si no teniu Flash, aquí teniu dues eines populars per convertir fitxers a FLV:
- SUPER (Windows): convertirà molts tipus de fitxers diferents a MP4 i FLV
- ffmpegX (Macintosh): convertirà molts tipus de fitxers diferents a Mp4 i FLV.
Deseu el vostre fitxer FLV al vostre lloc web i la pàgina següent us mostrarà com escriure el codi HTML perquè pugueu reproduir els vostres vídeos.
Continueu llegint a continuació
07 de 10Afegiu l'element de vídeo a la vostra pàgina web
És molt senzill utilitzar HTML 5 per afegir vídeo a pàgines web. La majoria dels navegadors moderns admeten el vídeo HTML 5, tot i que no tots ho suporten de la mateixa manera. Però el que això vol dir és que si deseu el vostre vídeo com a formats Ogg i MP4, podreu escriure només quatre o cinc línies HTML per mostrar-la en la majoria de navegadors moderns (excepte Internet Explorer 8). A continuació s'explica com:
Escriu el marcador HTML 5 doctype perquè els navegadors saben que esperen HTML 5:
- Creeu la vostra pàgina web com normalment la creeu:
- A l'interior del cos, col·loqueu-lo
- Decidiu quins atributs voleu que tingui el vostre vídeo: us recomanem que utilitzeu controls i precàrrega. Utilitzeu l'opció de pòster si el vostre vídeo no té una bona primera escena.
- reproducció automàtica: per començar tan bon punt es baixi
- controls: permet que els lectors controlin el vídeo (pausa, rebobinat, avanç ràpid)
- loop: inicieu el vídeo des del principi quan finalitzi
- precàrrega: pre-descarregueu el vídeo de manera que estigui llest més ràpid quan el client faci clic
- poster - definir la imatge que voleu utilitzar quan es deté el vídeo
- A continuació, afegiu els fitxers de codi font per a les dues versions del vostre vídeo (MP4 i OGG) dins de la
- Obriu la pàgina a Chrome 1, Firefox 3.5, Opera 10 i / o Safari 4 i assegureu-vos que es mostri correctament. Hauríeu de provar-ho com a mínim a Firefox 3.5 i Safari 4, ja que cadascun d'ells utilitza un còdec diferent.
Això és. Un cop tingueu aquest codi al vostre lloc, tindreu un vídeo que funcioni a Firefox 3.5, Safari 4, Opera 10 i Chrome 1. Però què passa amb Internet Explorer?
Internet Explorer no té HTML 5 o el
A la secció següent, parlarem del que podeu fer perquè l'IE 8 es reprodueixi bé amb les etiquetes de vídeo HTML 5 i mostri un vídeo. Heu d'utilitzar Flash.La bona notícia és que s'espera que l'IE 9 suporti HTML 5 i l'etiqueta de vídeo.
08 de 10Afegiu JavaScript i Flash Player per a que Internet Explorer funcioni
És possible que hàgiu notat que a l'HTML de la pàgina anterior, no hi havia cap línia d'origen per al fitxer FLV. I si proveu aquesta pàgina a Internet Explorer, no funcionaria. Això es deu a que Internet Explorer no reconeix HTML 5 i no pot reproduir vídeos OGG ni MP4 de forma nativa. Per tal que Internet Explorer 7 i 8 funcionin, necessiteu que reprodueixi el vídeo com Flash. Però hi ha més passos per aconseguir que funcioni, que simplement afegir el fitxer FLV.
Pas 1: Obteniu un reproductor de vídeo Flash per al vostre lloc web
Us recomanem que obtingueu FlowPlayer perquè és un reproductor de vídeo Flash de font oberta que podeu instal·lar al vostre servidor web i que s'utilitza sempre que tingui Flash video per reproduir-se. La versió gratuïta de FlowPlayer insereix publicitat en els vostres vídeos, però també podeu comprar llicències comercials si els necessiteu.
Seguiu les instruccions del lloc FlowPlayer per instal·lar FlowPlayer al vostre lloc web. En poques paraules, instal·lareu 2 fitxers SWF i un fitxer JavaScript al vostre lloc. A la part inferior del vostre codi HTML (abans del etiqueta) afegiràs una línia:
Però Internet Explorer encara no reproduirà el vídeo, haureu d'ensenyar-li com reconèixer etiquetes HTML 5.
Pas 2: convencer a Internet Explorer de llegir etiquetes HTML 5
Hi ha un script pràctic a Google Code anomenat "HTML Shiv" que ajudarà a IE a reconèixer elements HTML 5. Així que a la
del document HTML que voleu fer referència. El millor és incloure-lo en els comentaris condicionals d'IE perquè els altres navegadors no es confonguin:
D'acord, ara IE reconeixerà la
