Html 5 imágenes y vídeo

1,919 views

Published on

Descripción de los elementos para incluir imágenes y vídeo

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,919
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html 5 imágenes y vídeo

  1. 1. HTML 5Imágenes, audio y vídeo
  2. 2. El elemento <img> Para hacer referencia a una imagen seutiliza el elemento <img>, junto con elatributo src que indica donde puede serlocalizado (el valor es una url). El atributo alt se utiliza para proporcionaruna descripción sobre la imagen. Los atributos width y height permitenespecificar la altura y anchura de laimagen (en pixels o porcentajes)
  3. 3. Enlaces con imágenes Es posible utilizar como enlace unaimagen en vez de un texto,insertando un elemento entre lasetiquetas del elemento <a>.<a href="http://www.google.com"><img src="http://www.google.es/images/srpr/logo2w.png"width="50"></a>URL del enlaceURL de la imagen que permite acceder al enlace
  4. 4. Incluir audio y vídeo Actualmente, con el incremento de losdispositivos móviles que pueden acceder ala web, la forma de reproducir audio yvídeo utilizando Adobe Flash no es la masconveniente aunque sigue siendo válida. En la actualidad puede resultar másconveniente utilizar los nuevos elementosque proporciona HTML 5
  5. 5. Ejemplo: YouTube I La forma mas usual de alojar ycompartir vídeos es el servicioYouTube de Google. Es posible embeber un vídeo deYouTube insertando el enlaceproporcionado por el servicio.
  6. 6. Ejemplo: YouTube II El código proporcionado por elservicio YouTube únicamentecontiene un elemento <inframe> queno hace nada más que mostrar elcontenido de una página en otra.
  7. 7. Ejemplo: YouTube III<iframe width="420" height="315"src="http://www.youtube.com/embed/q9q3dYUfFmQ" frameborder="0"allowfullscreen></iframe>
  8. 8. Añadir vídeo flash con elelemento <object> Si se desea invocar desde undocumento html un archivo swf, sepuede utilizar el elemento <object>junto con un conjunto de elementoshijo que permiten especificar lascaracterísticas de la película.
  9. 9. Ejemplo elemento <object> conelemento swf<object width="590" height="90"><param name="allowScriptAccess"value="always"/><param name="allowFullScreen"value="false"/><param name="movie"value="swf_files/Car-speakers-590x90.swf"/><param name="loop" value="false"/><embed src="swf_files/Car-speakers-590x90.swf" loop="false"/></object>
  10. 10. Utilizar JavaScript para invocaruna vídeo flash Es también usual utilizar códigoJavaScript para incluir un vídeo enformato flash. Este código se encarga de verificar siel plug-in necesario para lareproducción se encuentra instaladoen el browser.
  11. 11. El objeto SWFObject La función JavaScript para incluir unvídeo flash se encuentra en:http://code.google.com/p/swfobject/ Para utilizar el código no esnecesario saber JavaScript. Únicamente hay queproporcionar los parámetros auna función.
  12. 12. Ejemplo SWFObject<script type="text/javascript"src="js/swfobject/swfobject.js"></script><script type="text/javascript">swfobject.embedSWF("swf_files/Car-speakers-590x90.swf","flash_movie","590","90","8.0.0");</script>Carga de la libreríaswfobject.jsInvocación del objeto quemostrará el vídeo
  13. 13. HTML 5 AUDIO Y VIDEO
  14. 14. Formatos de vídeo I El vídeo en la web está basado enformatos de contenido y en codecs. Un contenedor es un recubrimientoque agrupa los datos necesarios paraque se pueda acceder al vídeo. Algunos formatos son Flash Vídeo(.flv), MPEG-4 (.mp4 o .m4v) y AVI(.avi)
  15. 15. Formatos de vídeo II El contenedor de vídeo almacenapistas para el audio, el vídeo conmarcadores que ayudan a susincronización junto con metadatos(idioma, descripción de contenido …). Los formatos de video relevantes enHTML 5 son MPEG-4, Ogg y WebM.
  16. 16. Codecs Un codec define un algoritmo paracodificar y decodificar el flujo dedatos de audio o vídeo, segúncorresponda. Los codecs de vídeo más destacadosen relación a HTML 5 son H.264, VP8y Theora. Analogamente, para audio son AAC yVorbis.
  17. 17. El elemento <video> La forma mas simple de incluir vídeoes utilizar este elemento, cuyosatributos mas importantes son width,height y controls. Los dos primeros atributosespecifican las dimensiones,mientras que el tercero indica que semuestren los controles que permitenal usuario ajustar su reproducción.
  18. 18. Ejemplo<videosrc="http://techslides.com/demos/sample-videos/small.webm"width="300" controls></video>
  19. 19. Atributos del elemento <video> preload, posibles valores auto, none ymetadata autoplay loop poster, el valor a asignar será una imagen audio controls, permite activar los controlesnativos

×