javascript - etiqueta - preload video html5

Precargando todos los activos

Question

¿Hay una forma universal única de cargar todos los activos antes de usarlos? Deseo cargar algunas imágenes, archivos de audio y algunos archivos .swf antes de que se inicie mi aplicación. Actualmente, cargo las imágenes creando nuevos elementos <img> y configurando el src en la ruta de la imagen, para los archivos de audio agrego el atributo preload="auto" en la etiqueta <audio> y realizo una solicitud ajax para cargar el .swf s.

¿Hay algún problema (en algunos navegadores no en caché, etc.) con la forma en que estoy cargando mis archivos actualmente y hay una forma de "mejores prácticas" de precargar colectivamente todos estos tipos de archivos antes de mostrar mi contenido?

Answer 1

Estoy realmente feliz con PxLoader: http://thinkpixellab.com/pxloader/

Es un precargador liviano extremadamente fácil de usar para usar en aplicaciones HTML5. Puedes descargar imágenes, audio, o cualquier otro tipo de archivo. Te permite monitorear eventos completados también.

Es de uso gratuito (licencia MIT) y se puede colocar en GitHub.

Hay algunas buenas demostraciones y ejemplos de secuencias de comandos aquí: http://thinkpixellab.com/pxloader/#sample1

Answer 2

Intente usar $(window).load(function(){ /* Use any of your resources */ }); .

Intenté esto y trabajando para mí. this Ya que esta es una simple API de JavaScript, también puede usar como window.onload=function(){/* JavaScriptCode */}; Creo.

Answer 3

La prodeterminación de los activos es una de las tareas más difíciles y simples en un proyecto FLASH o HTML5 porque hemos realizado proyectos de conversión de FLASH a HTML5.

Los tipos de preloaders más fáciles son los preloaders estáticos utilizados para cargar la película en la que existen. Para estos precargadores, todo lo que debe hacer es detener la película en una pantalla de precargador, generalmente el primer fotograma de la película, y mantenerla allí hasta que pueda determinar que la película se ha cargado completamente en el reproductor Flash.

El Precargador también detiene cualquier parpadeo o retraso al cambiar las imágenes no almacenadas en una página web, ya que la misma imagen debe descargarse del servidor cada vez que se necesita mostrarla.

Hemos utilizado jQuery HMTL5 Loader en nuestras aplicaciones web ( HTML5 ), puede ver el repositorio de Github aquí.

Este complemento necesita un archivo JSON para obtener los archivos que tiene que precargar, y puede precargar imágenes, fuentes de audio y video html5, secuencias de comandos y archivos de texto. Además de esto, tiene un tipo diferente de cargadores (circular, línea, contador grande, etc.) y características adicionales, etc.

Se implementa así.

<script>
        var loaderAnimation = $("#html5Loader").LoaderAnimation();
        $.html5Loader({getFilesToLoadJSON:''json file'',
            onUpdate: loaderAnimation.update,
            debugMode:false
        });
    </script>

Funciona perfectamente en diferentes navegadores, incluidos Chrome, FireFox, Safari, Opera, etc. y en navegadores móviles.

Nota: Lo hemos utilizado para nuestras aplicaciones web HTML5 que se ejecutan en diferentes plataformas, incluidas Android y iOS.

Answer 4

Puede usar una biblioteca PreloadJS (es parte de la suite CreateJS). Es ligero, fácil de usar y bastante potente en términos de configuración. Permite colas, conexiones múltiples, pausas, etc. Ofrece acceso a eventos (progreso, completo, etc.).

Si tienes alguna experiencia en Actionscript, esta herramienta debería ser bastante sencilla para ti.

Answer 5

Sí. En realidad, esto se ha hecho en un estándar. Aquí está el RFC relevante. Un movimiento para estandarizar esto para HTML5 está en marcha.

La mayoría de los navegadores modernos soportan prefetching. Aquí hay un breve resumen de cómo se utilizan:

Firefox

Según MDN, puede usar las etiquetas <link> en el encabezado del documento,

<link rel="prefetch" href="/assets/my-preloaded-image.png">

así como establecer el encabezado HTTP Link con la solicitud, o dentro del HTML como una etiqueta meta .

Link: </assets/my-preloaded-image.png>; rel=prefetch
<meta http-equiv="Link" content="</assets/my-preloaded-image.png>; rel=prefetch">
enter code here

No solo esto, sino que también puede dar sugerencias de navegación dentro de la página, como lo que será la página siguiente, etc.

<link rel="next" href="2.html">

IE 11

En Internet Explorer también existe el encabezado Prefetch . Se puede configurar como tal:

<link rel="prefetch" href="http://example.com/style.css" />

Incluso puede realizar consultas de DNS de precarga (resolución previa)

<link rel="dns-prefetch" href="http://example.com/"/>

O, prerender una página web (a-la Google Instant)

<link rel="prerender" href="http://example.com/nextpage.html" />

Cromo

Chrome también hace lo mismo que Firefox e IE en este sentido .

Safari

No he podido encontrar pruebas sólidas de si Safari admite estas cosas. Pero al leer muchas fuentes, sospecho que sí, solo que probablemente Apple no esté tan ansiosa por comercializar Safari como Microsoft está impulsando IE11 (solo una opinión).

Que te diviertas. :)

Fuentes:

• Prefetch
• https://developer.mozilla.org/en/docs/Link_prefetching_FAQ
• http://davidwalsh.name/html5-prefetch
• https://developers.google.com/chrome/whitepapers/prerender
• https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj-6sWLmnjl6TLnaru_WH0LJTjP-o/present#slide=id.g120f70e9a_0140

Actualización: Después de compilar esta respuesta, me topé con una respuesta similar en SO, que brinda más detalles sobre el tema. Por favor, eche un vistazo.

¿Cómo puedo precargar una página usando HTML5?