Diferencia entre revisiones de «Usuario:Juanda/videohtml5/Introducción»

De WikiEducator
Saltar a: navegación, buscar
(→‎Vídeos de youtube, vimeo)
(→‎Video en html5)
Línea 47: Línea 47:
  
 
</div>
 
</div>
−
<div source="html4strict">
+
<div class="slide">
−
 
+
 
===Video responsivo===
 
===Video responsivo===
 
*Declarar dimensiones "estáticas" no es buena idea:  
 
*Declarar dimensiones "estáticas" no es buena idea:  
Línea 73: Línea 72:
  
 
===Vídeos de youtube, vimeo===
 
===Vídeos de youtube, vimeo===
 +
====Obtención de código====
 
*Código inserción vídeos youtube:
 
*Código inserción vídeos youtube:
 
<source lang="html4strict">
 
<source lang="html4strict">
Línea 91: Línea 91:
 
   </embed>
 
   </embed>
 
</object>
 
</object>
−
</source>
 
−
*Para hacer el vídeo responsivo no podemos hacer como en el caso anterior (truco de 100%width).
 
−
 
−
===Librería normalice===
 
−
*Librería que hace que los diferentes elementos renderizados por el navegador se comporten según estándares.
 
−
*Es el equivalente mejorado a librerías anteriores que hacían un reset a los CSS del navegador.
 
−
<source lang="html4strict">
 
−
<link rel="stylesheet" href="css/normalize.css">
 
−
</source>
 
−
 
−
===Librería main.css===
 
−
*Viene con unos css por defecto y aquí es donde podríamos poner lo nuestro.
 
−
<source lang="html4strict">
 
−
<link rel="stylesheet" href="css/main.css">
 
−
</source>
 
−
 
−
===Librería modernizr.js===
 
−
*Librería modernizr ....
 
−
<source lang="html4strict">
 
−
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
 
 
</source>
 
</source>
 
</div>
 
</div>
−
 
 
<div class="slide">
 
<div class="slide">
−
===jQuery: ¿CDN o local?===
+
====Vídeo responsivo por iframe====
−
*Si window.jQuery es undefined habrá habido algún problema al obtenerlo del CDN.
+
*Si no se especifica las dimensiones de un elemento tipo iframe, embed, object y canvas, en navegador lo dimensiona como 300x150px
−
*En este caso, procederemos a insertar en nuestra página la versión local de jQuery.
+
*No se puede utilizar el truco de 100% width, el navegador pondría una altura de 150px que sería normalmente demasiado pequeña.
−
<source lang="javascript">
+
*[http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php Ver solución]
−
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
+
−
</source>
+
−
</div>
+
−
 
+
−
<div class="slide">
+
−
 
+
−
===plugins.js y main.js===
+
−
*plugin.js: Para los plugin que instalemos (también se pueden incluir en el directorio vendor)
+
−
*main.js: Para nuestro propio javascript
+
−
<source lang="javascript">
+
−
        <script src="js/plugins.js"></script>
+
−
        <script src="js/main.js"></script>
+
−
</source>
+
−
</div>
+
−
 
+
−
<div class="slide">
+
−
 
+
−
===Google Analytics===
+
−
*Herramienta de análisis de las visitas a un sitio web.
+
−
*Google recomienda ponerla en la parte superior, para contar todas las visitas
+
−
*En la parte inferior, optimizamos el tiempo de carga de nuestra web.
+
−
<source lang="javascript">
+
−
        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
+
−
        <script>
+
−
            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
+
−
            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+
−
            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+
−
            s.parentNode.insertBefore(g,s)}(document,'script'));
+
−
        </script>
+
−
</source>
+
−
</div>
+
−
<div class="slide">
+
−
===Personalización===
+
−
*Más cosas: sitemap, Canonical URL, Feeds... [https://github.com/h5bp/html5-boilerplate/blob/master/doc/extend.md lee documento de personalización]
+
−
 
+
 
</div>
 
</div>

Revisión de 12:52 31 ene 2013

Usuario:Juanda/html5video/nav

Video en html5

Introducción

<!DOCTYPE HTML>
<html>
<body>
 
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
 
</body>
</html>



Formatos de Vídeo

Decodificación de Vídeo

Video responsivo

  • Declarar dimensiones "estáticas" no es buena idea: 
<video width="400" height="300" ....
  • Utilizaremos porcentajes: el vídeo se adaptará a su elemento contendedor.
  • En html5 es bueno definir solo la anchura para que el video mantenga su proporción: 
<video width="100%" ....
  • Mediante css: 
video {
  width: 100%    !important;
  height: auto   !important;
}

Esto no encajaría en todos los user agent!! Por ejemplo con un mínimo zoom de 0.25 para un display de 240px de anchura, nos quedarían 20px sin poder ver. Leer más sobre el viewport

Vídeos de youtube, vimeo

Obtención de código

  • Código inserción vídeos youtube: 
<iframe width="640" height="480" src="http://www.youtube.com/embed/oDlsOyPKUTM" frameborder="0" allowfullscreen></iframe>
  • Código inserción vídeos vimeo: 
<iframe src="http://player.vimeo.com/video/57444237" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  • También se puede usar object y embed para insertar código no html. Por ejemplo youtube con Flash: 
<object width="640" height="480">
   <param name="movie" value="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&amp;version=3"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/v/oDlsOyPKUTM?hl=es_ES&amp;version=3" type="application/x-shockwave-flash" 
      width="640" height="480" allowscriptaccess="always" allowfullscreen="true">
   </embed>
</object>

</div>

Vídeo responsivo por iframe

  • Si no se especifica las dimensiones de un elemento tipo iframe, embed, object y canvas, en navegador lo dimensiona como 300x150px
  • No se puede utilizar el truco de 100% width, el navegador pondría una altura de 150px que sería normalmente demasiado pequeña.
  • Ver solución
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/videohtml5/Introducción&oldid=11398»