A etiqueta de vídeo HTML 5 fai que sexa fácil engadir un vídeo ás túas páxinas web . Pero, aínda que pareza fácil na superficie, hai moitas cousas que cómpre facer para que o seu video funcione. Este tutorial lévache os pasos para crear unha páxina en HTML 5 que executará o video en todos os navegadores modernos.
- Aloxamento do teu propio HTML 5 Video vs. Usando YouTube
- Descrición rápida da Soporte de vídeo na web
- Crea e edita o teu vídeo
- Converte o vídeo en Ogg para Firefox
- Converte o vídeo en MP4 para Safari
- Converte o vídeo en FLV para Internet Explorer
- Engade o elemento de vídeo á túa páxina web
- Engade o JavaScript e Flash Player para que Internet Explorer funcione como parte 1
- Proba en tantos navegadores como poidas
01 de 10
Aloxamento do teu propio HTML 5 Video vs. Usando YouTube
YouTube é un gran sitio. Facilita a integración de vídeo nas páxinas web rapidamente e con algunhas excepcións menores é bastante sinxela na súa execución. Se publica un vídeo en YouTube, pode estar bastante seguro de que calquera pode velo.
Pero usar YouTube para incrustar os teus vídeos ten algúns inconvenientes
A maioría dos problemas con YouTube son do lado do consumidor, e non do lado do deseñador, como:
- Busca e indexación lentas
- Cortes de servidor
- O contido está a ser eliminado (aparentemente) arbitrariamente
- Moi mal contido
Pero hai algúns motivos polos que YouTube tamén é malo para os desenvolvedores de contidos, incluíndo:
- Duración máxima de 10 minutos para videos (para contas gratuítas)
- Pobre rendemento de carga
- YouTube gaña dereitos de uso ilimitados para o teu vídeo
- Calquera usuario de YouTube gaña dereitos de uso ilimitados para o teu vídeo
O video de HTML 5 dá algunhas vantaxes sobre YouTube
O uso de HTML 5 para vídeo permítelle controlar todos os aspectos do teu vídeo, desde quen o pode ver, canto tempo é, que contén o contido, onde está hospedado e como funciona o servidor. O vídeo HTML 5 ofrécelle a oportunidade de codificar o teu vídeo en tantos formatos como debes asegurarte de que o número máximo de persoas poida velo. Os teus clientes non necesitan un plugin nin esperan ata que YouTube publique unha versión máis nova.
Por suposto, HTML 5 Video ofrece algúns inconvenientes
Estes inclúen:
- Debes codificar o teu vídeo en polo menos tres códecs diferentes
- Debes incluír algún JavaScript para garantir que os navegadores que non sexan compatibles con HTML 5 funcionarán
- O seu servidor ten que ser capaz de manexar os requisitos de ancho de banda dos vídeos de hospedaxe
02 de 10
Descrición rápida da Soporte de vídeo na web
Engadir un vídeo a páxinas web foi un proceso difícil. Había tantas cousas que podían dar mal:
- En primeiro lugar, usa a etiqueta
- Polo tanto, cambia á etiqueta
- Entón pensas " Flash !" E codifique o teu vídeo como un arquivo FLV. Pero o Flash non é compatible con moitos dispositivos móbiles e moitas persoas odian Flash sen importar o seu uso (o 25% dos entrevistados na miña enquisa preguntando sobre como se sente sobre Flash declarou que non poden soportar Flash de ningún xeito).
- Entón decide subir o seu vídeo a un sitio de inserción de vídeos como YouTube, pero entón tes os problemas con YouTube que comentamos.
- Finalmente, decide ir con HTML 5, pero Internet Explorer non o soporta (non ata Internet Explorer 9). E aínda que o fai, hai dous estándares de códecs de video compatibles e só un navegador que pode usar ambos. Soporte para o navegador para códecs e contedores de video
Entón, que se supón que debe facer? Dar a coñecer o vídeo xa non é unha opción para a maioría dos sitios, xa que o vídeo é cada vez máis importante. E moitos sitios cambiaron con éxito ao vídeo.
As seguintes páxinas deste artigo axudaranlle a engadir un vídeo ás súas páxinas web que funcionan en Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 e 4, iPhone e Android, Flash e Internet Explorer 7 e 8. Vai tamén ten as chaves que precisa para engadir soporte para outros navegadores máis antigos, se fose necesario.
03 de 10
Crea e edita o teu vídeo
O primeiro que necesitas cando vas a poñer un vídeo nunha páxina web é o vídeo real. Pode disparar continuamente e editar posteriormente para crear unha función, ou pode guioná-la e planificala antes de tempo. De calquera xeito funciona ben, é só o que está cómodo. Se non sabe que tipo de vídeo debería facer, consulte estas ideas desde a Guía de video de escritorio:
- Proxectos de vídeo familiar
- Marketing e Vídeos promocionais
- Video Virtual Tours
- Como facer videos
- Videos de matrimonio
Aprende como gravar vídeo de alta calidade
Asegúrese de saber gravar no interior e exterior, así como gravar o audio. A iluminación tamén é moi importante: os disparos que son moi brillantes danen os ollos e son moi escuros e non lucrativos. Aínda que só pretende ter un vídeo de 30 segundos no seu sitio, a maior calidade será mellor que se reflicta no seu sitio web.
Lembre tamén que o copyright aplícase a calquera son ou música (así como material de almacenamento) que pode querer usar no seu vídeo. Se non tes acceso a un amigo que poida escribir e reproducir unha canción para ti, necesitarás atopar música sen dereitos de autor para reproducir en segundo plano. Tamén hai prazas onde podes almacenar imaxes para engadir aos teus vídeos.
Edición do teu vídeo
Non importa o software de edición que use, sempre que estea familiarizado con el e poida usalo de forma eficaz. Gretchen, a Guía de video de escritorio, ten algúns consellos de edición de video profesional que poden axudarche a editar os teus videos para que estean ben.
Garda o teu vídeo nun MOV ou AVI (ou MPG, CD, DV)
Para o resto deste tutorial, imos asumir que ten o seu vídeo gardado en algún tipo de formato de alta calidade (non comprimido) como AVI ou MOV. Mentres podes usar estes ficheiros como son, atopas todos os problemas co vídeo que xa falamos. As seguintes páxinas explicarán como converter o teu ficheiro en tres tipos para que o número de navegadores sexa máis visible.
04 de 10
Converte o vídeo en Ogg para Firefox
O primeiro formato que imos converter é Ogg (ás veces chamado Ogg-Theora). Este formato é o que todos poden ver Firefox 3.5, Opera 10.5 e Chrome 3.
Desafortunadamente, mentres Ogg ten soporte para o navegador, moitos dos programas de vídeo coñecidos que pode comprar (Adobe Media Encoder, QuickTime, etc.) non ofrecen unha opción de conversión Ogg. Polo tanto, a única forma de converter o teu vídeo a Ogg é atopar un programa de conversión na web.
Opcións de conversión
Hai unha ferramenta en liña chamada Media-Convert que pretende converter varios formatos de vídeo (e audio) noutros formatos de vídeo (e audio). Cando o probamos co meu vídeo de proba de 3 segundos, non poderiamos que funcione no meu Mac. Pero podes ter mellor sorte. Este sitio ten a vantaxe de ser gratuíto.
Outras ferramentas que atopamos inclúen:
- Miro Video Converter (Windows Macintosh) - Este programa ten a vantaxe de converter a Ogg e MP4 (H.264) e é de código aberto.
- Koyote Video Converter (Windows)
- Free Video Converter Pensamos que isto ten tanto unha versión Windows e Macintosh, pero era difícil dicir desde o seu sitio
- O codificador de Theora simple (Macintosh) - este é o que tendemos a usar.
Unha vez que teña gardado o teu video no formato Ogg, gárdeo nunha localización no teu sitio web e diríxete á seguinte páxina para convertela noutros formatos para outros navegadores.
05 de 10
Converte o vídeo en MP4 para Safari
O seguinte formato que debe converter o seu vídeo é MP4 (vídeo H.264) para que se poida reproducir en Safari 3 e 4 e no iPhone e Android. Ademais, os videos H.264 pódense converter facilmente a ficheiros FLV para ver en Flash.
Este formato está máis dispoñible nos produtos comerciais e probablemente xa tes un programa que converterá a MP4 se tes un editor de vídeo. Se ten Adobe Premiere pode usar o codificador de vídeo Adobe, ou se ten QuickTime Pro que funcionará tamén. Moitos dos conversores que discutimos na páxina anterior tamén converterán videos a MP4.
- Media-Convert - unha ferramenta en liña
- Miro Video Converter (Windows Macintosh) - Este programa ten a vantaxe de converter a Ogg e MP4 (H.264) e é de código aberto.
- SUPER (Windows): converterá moitos tipos de arquivos diferentes a MP4 e FLV
- Free Video Converter Pensamos que isto ten tanto unha versión Windows e Macintosh, pero era difícil dicir desde o seu sitio
Garda o teu ficheiro MP4 no teu sitio web e entón necesitarás converterlo en Flash para que use Internet Explorer.
06 de 10
Converte o vídeo en FLV para Internet Explorer
A forma máis sinxela de converter vídeos a FLV é usar o propio Flash. Así é como converteron os meus videos a Flash. Pero se non tes Flash, aquí tes dúas ferramentas populares para converter arquivos a FLV:
- SUPER (Windows): converterá moitos tipos de arquivos diferentes a MP4 e FLV
- ffmpegX (Macintosh): converterá moitos tipos de arquivos diferentes a Mp4 e FLV.
Garda o teu arquivo FLV no teu sitio web e a seguinte páxina mostrarache como escribir o HTML para que poidas reproducir os teus vídeos.
07 de 10
Engade o elemento de vídeo á túa páxina web
É moi sinxelo usar HTML 5 para engadir vídeo ás páxinas web. A maioría dos navegadores modernos admiten o vídeo HTML 5, aínda que non todos o apoian do mesmo xeito. Pero o que isto significa é que se gardas o teu vídeo como formatos Ogg e MP4, poderás escribir só catro ou cinco liñas de HTML para que apareza na maioría dos navegadores modernos (excepto Internet Explorer 8). Vexa como:
- Escriba o marcador de HTML 5 doctype para que os navegadores saiban que esperan HTML 5:
- Crea a túa páxina web como normalmente o crearías:
title>
head>
body>
html> - Dentro do corpo, coloque a etiqueta
- Decide cales atributos queres que o teu vídeo teña:
- autoplay - para comezar tan pronto como se descargue
- controis: permite aos teus lectores controlar o vídeo (pausa, rebobinar, avance rápido)
- loop - inicia o video desde o principio cando remata
- preload - pre-descarga o vídeo para que estea listo máis rápido cando o cliente faga clic nel
- poster - defina a imaxe que desexa usar cando o vídeo se pare
video> - A continuación, engade os ficheiros fonte para as dúas versións do seu vídeo (MP4 e OGG) dentro do elemento
:
video> - Abra a páxina en Chrome 1, Firefox 3.5, Opera 10 e / ou Safari 4 e asegúrese de que se amose correctamente. Debes probalo en polo menos Firefox 3.5 e Safari 4, xa que cada un usa un códec diferente.
É iso. Unha vez que teña este código no seu lugar terá un vídeo que funcionará en Firefox 3.5, Safari 4, Opera 10 e Chrome 1. Pero que hai con Internet Explorer?
Internet Explorer non lle gusta HTML 5 ou a etiqueta
Na seguinte sección, falaremos do que podes facer para que o IE 8 poida xogar ben coas túas etiquetas de video HTML 5 e amosar un vídeo. Tes que usar Flash. A boa noticia é que se espera que o IE 9 soporte HTML 5 e a etiqueta de video.
08 de 10
Engade o JavaScript e Flash Player para que Internet Explorer funcione
Pode ter notado que no HTML da páxina anterior non había ningunha liña de orixe para o ficheiro FLV. E se probou esa páxina en Internet Explorer non funcionaría. Isto é porque Internet Explorer non recoñece HTML 5 e non pode reproducir vídeos de OGG ou MP4 de forma nativa. Para que Internet Explorer 7 e 8 funcionen, necesitas que xogue o vídeo como Flash. Pero hai máis pasos para facelo funcionar que engadir o ficheiro FLV.
Paso 1: Obter un reprodutor de video Flash para o seu sitio web
Recomendamos obter FlowPlayer porque é un reprodutor de video Flash de código aberto que podes instalar no teu servidor web e usar sempre que teña Flash video para reproducir. A versión gratuíta de FlowPlayer insire publicidade nos teus videos, pero tamén podes mercar licenzas comerciais se o necesitas.
Siga as instrucións do sitio FlowPlayer para instalar FlowPlayer no seu sitio web. En poucas palabras, instalarás 2 ficheiros SWF e un arquivo de JavaScript no teu sitio. Na parte inferior do seu HTML (antes da etiqueta body>) engadirá unha liña: