Continúe explicando las habilidades de HTML5:
16. Soporte de video
El elemento de audio <udio> es muy similar y admite videos HTML5 en nuevos navegadores. De hecho, recientemente, YouTube anunció una nueva incrustación de video HTML5. Desafortunadamente, dado que la documentación HTML5 no indica un codificador específico para el video, depende principalmente del navegador. Aunque Safari e IE9 pueden admitir videos en formatos H.264, Firefox y Opera todavía se adhieren a los formatos Teora y Vorbis. Por lo tanto, al mostrar videos HTML5, debe proporcionar dos formatos.
17. Video precargado
Primero debe decidir si necesita un navegador para precargar el video. ¿Hay alguna necesidad? Supongamos que un visitante ingresa a una página dedicada a mostrar videos, es muy necesario precargar la página para ahorrar algo de tiempo de espera. Puede precargar el video configurando precargo = precarga o agregar precarga entre ellos.
<Preload de video>
…
</video>
18. Controles de visualización
Es posible que haya notado que con el código anterior, el video solo aparecerá como una imagen sin ningún componente controlable. Para obtener estos controles de reproducción, debemos especificar estas propiedades de control en el elemento de video.
<Controles de precarga de video>
…
</video>
19. Expresiones regulares
Gracias a las propiedades del nuevo patrón, podemos insertar una expresión regular directamente en el código.
<Form Method = Post Action =>
<etiqueta for = username> Crear un nombre de usuario: </etiqueta>
<input id = username type = text name = username placeLokeer = 4 <> 10 ″ requerido = requerido AutOfocus = Autofocus Pattern = [A-Za-Z] {4,10}>
<button type = enviar> go </boton>
</form>
Si está más familiarizado con las expresiones regulares, notará este nuevo patrón: [A-Za-Z] {4,10} solo acepta letras de mayúsculas y minúsculas. Esta cadena debe tener al menos cuatro caracteres, hasta diez caracteres.
20. Detectar el soporte del navegador para atributos
Como se mencionó anteriormente, no todos los navegadores admiten estas propiedades, entonces, ¿hay alguna forma de saber si el navegador puede reconocerlas? Esta pregunta es muy buena. Aquí hay dos formas de presentarte. La primera opción es usar Modernizr para detectar, o también puede crear y analizar estos elementos para ver qué tiene el navegador. Por ejemplo, en el ejemplo anterior, si queremos determinar si el navegador puede ejecutar la propiedad del patrón, podemos agregar JavaScript a la página:
alerta ('patrón' en document.createElement ('input')) // boolean;
De hecho, esta es una forma muy común de determinar la compatibilidad del navegador. La biblioteca jQuery aprovecha este truco. En el código anterior, creamos un nuevo elemento de entrada y confirmamos si se puede reconocer el atributo de patrón. Si se puede reconocer, el navegador admite esta función, de lo contrario no será compatible.
<script>
if (! 'patrón' en document.createElement ('input')) {
// Validación del lado del cliente/servidor
}
</script>
¡Recuerde, esto deberá lograrse confiando en JavaScript!
21. Marcos elementos
La función principal del elemento <Mark> es resaltar el texto en la página que necesita resaltar visualmente su importancia para el usuario. La cadena envuelta en esta etiqueta debe estar relacionada con el comportamiento actual del usuario. Por ejemplo, si busco abrir su mente en algunos blogs, puedo usar JavaScript en la etiqueta <Mark> para envolver cada acción.
<h3> Resultados de búsqueda </h3>
<H6> Fueron interrumpidos, justo después de que Quato dijo, <Mark> Abre tu mente </sk>. </h6>
22. Cuándo usar <Div>
¿Todavía necesitas usar la etiqueta <div>? Por supuesto que es necesario. Por ejemplo, si desea envolver un código en un elemento, especialmente para el posicionamiento de contenido, <Viv> será una opción muy ideal. Sin embargo, si no es la situación anterior, sino para envolver una publicación de blog o una lista de enlaces de pie de página, se recomienda que use los elementos <artículo> y <Al de Nav> respectivamente.