Latest web development tutorials

HTML vídeo (Vídeos) Juego

Hay muchas maneras de jugar el vídeo en HTML método.


HTML vídeo (Vídeos) Juego

Ejemplos

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>

Trate »


Problemas y soluciones

Visualizar el video en HTML no es fácil!

Se necesita una gran cantidad de consejos familiares para asegurarse de que el archivo de vídeo en todos los navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera), y todo el hardware (PC, Mac, iPad, iPhone) se pueden reproducir.

En este capítulo, W3CSchool se resumen los problemas y soluciones.


El uso de la etiqueta <embed>

Papel <embed> es la de insertar elementos multimedia en las páginas HTML.

El siguiente código HTML para mostrar video flash incorporado en la página:

Ejemplos

<embed src="intro.swf" height="200" width="200">

Trate »

problema

  • HTML 4 no reconoce la etiqueta <embed>. Su página no puede ser verificada.
  • Si su navegador no soporta Flash, por lo que el vídeo no se reproduce
  • IPAD y el iPhone no puede mostrar contenido Flash.
  • Si convierte vídeos a otros formatos, todavía no juega en todos los navegadores.

El uso de la etiqueta <object>

Papel etiqueta <object> es la de insertar elementos multimedia en las páginas HTML.

El siguiente fragmento de código HTML muestra un poco de vídeo Flash incrustado en la página:

Ejemplos

<object data="intro.swf" height="200" width="200"></object>

Trate »

problema:

  • Si su navegador no soporta Flash, el vídeo no se reproduce.
  • IPAD y el iPhone no puede mostrar contenido Flash.
  • Si convierte vídeos a otros formatos, todavía no juega en todos los navegadores.

Usando el elemento <video> de HTML5

HTML5 <video> define un video o una película.

<Video> en todos los navegadores modernos son compatibles.

El siguiente fragmento de HTML mostrará una OGG, MP4, vídeo o formato WebM página Web incorporado:

Ejemplos

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>

Trate »

problema:

  • Es necesario para convertir el vídeo en diversos formatos diferentes.
  • <Video> elemento no es válido en los navegadores antiguos.

Mejor Solución de HTML

El siguiente ejemplo utiliza cuatro formatos de vídeo diferentes. HTML 5 <video> elemento trata de jugar mp4, ogg, o formatos WebM es para reproducir el vídeo. Si todo falla, a continuación, caer de nuevo a elemento <embed>.

HTML 5 + <object> + <embed>

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>

Trate »

problema:

  • Debe convertir muchos formatos de vídeo diferentes

Soluciones Youku

La forma más fácil de visualizar vídeos en formato HTML es utilizar Youku y otros sitios de vídeo.

Si desea reproducir vídeo en una página web, puede subir un vídeo a Youku y otros sitios de vídeo, y luego insertar el código HTML para reproducir el vídeo en tu página:

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>

El uso de hipervínculos

Si la página contiene un hipervínculo que apunta a archivos multimedia, la mayoría de los exploradores usan "aplicación de ayuda" para reproducir el archivo.

El siguiente fragmento de código muestra enlaces a archivos AVI. Si el usuario hace clic en el enlace, el navegador se iniciará las "Aplicaciones de ayuda", como Windows Media Player para reproducir el archivo AVI:

Ejemplos

<a href="intro.swf">Play a video file</a>

Trate »


En la descripción del video en línea

Cuando un vídeo se incluye en la página web, se llama línea de vídeo.

Si va a utilizar el vídeo en línea en una aplicación web, es necesario tener en cuenta que muchas personas encuentran molestos vídeos integrados.

También tenga en cuenta que los usuarios deben de haber cerrado su navegador opción de vídeo en línea.

Nuestro mejor consejo es que sólo cuando el usuario quiere ver el video en línea a cabo los contiene. Un ejemplo positivo es que cuando el usuario necesita para ver el vídeo y hacer clic en un enlace, se abrirá la página y reproducir el vídeo.


etiqueta HTML multimedia

Nuevo: HTML5 nuevas etiquetas.

标签 描述
<embed> 定义内嵌对象。HTML4 中不赞成,HTML5 中允许。
<object> 定义内嵌对象。
<param> 定义对象的参数。
<audio> New 定义了声音内容
<video> New 定义一个视频或者影片
<source> New 定义了media元素的多媒体资源(<video> 和 <audio>)
<track> New 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>)