Video HTML5

De WikiEducator
Saltar a: navegación, buscar

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

Creados por Microsoft para su navegador. Cualquier otro navegador asumirá que es un comentario el código html intermedio: 

<!--[if CONDICION]> Código HTML <![endif]–>

Ejemplo: 

<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->

Para indicar a IExplorer que utilice la última versión de su rendering engine (puede tener varias) o Google Chrome Frame si está instalado: 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

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

  • 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 embed o object para insertar código no html. Por ejemplo youtube con Flash:

Idioma no válido.

Necesita especificar un idioma como esto: <source lang="html4strict">...</source>

lenguajes soportados para sintaxis remarcada:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


<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>

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. 
<link rel="stylesheet" href="css/normalize.css">

Librería main.css

  • Viene con unos css por defecto y aquí es donde podríamos poner lo nuestro. 
<link rel="stylesheet" href="css/main.css">

Librería modernizr.js

  • Librería modernizr .... 
<script src="js/vendor/modernizr-2.6.1.min.js"></script>

</div>

jQuery: ¿CDN o local?

  • Si window.jQuery es undefined habrá habido algún problema al obtenerlo del CDN.
  • En este caso, procederemos a insertar en nuestra página la versión local de jQuery. 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>

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 
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

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. 
        <!-- 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>

Personalización

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/videohtml5/Introducción&oldid=11383»