• Save
Html 5 imágenes y vídeo
Upcoming SlideShare
Loading in...5
×
 

Html 5 imágenes y vídeo

on

  • 1,695 views

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

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

Statistics

Views

Total Views
1,695
Views on SlideShare
1,692
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 3

http://minucraft.enjin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html 5 imágenes y vídeo Html 5 imágenes y vídeo Presentation Transcript

  • HTML 5Imágenes, audio y vídeo
  • 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)
  • 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
  • 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
  • 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.
  • 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.
  • Ejemplo: YouTube III<iframe width="420" height="315"src="http://www.youtube.com/embed/q9q3dYUfFmQ" frameborder="0"allowfullscreen></iframe>
  • 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.
  • 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>
  • 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.
  • 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.
  • 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
  • HTML 5 AUDIO Y VIDEO
  • 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)
  • 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.
  • 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.
  • 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.
  • Ejemplo<videosrc="http://techslides.com/demos/sample-videos/small.webm"width="300" controls></video>
  • 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