English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de HTML

HTML 媒体

HTML 参考手册

HTML5 Tutoriales básicos

HTML5 API

HTML5 媒体

Reproducción de videos HTML (Video)

在 HTML 中播放视频有很多种方法。

HTML 视频（Videos）播放

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.webm"　type="video/webm">
　　<object　data="movie.mp4"　width="320"　height="240">
　　　　<embed　width="320"　height="240"　src="movie.swf">
　　</object>
</video>
</body>
</html>
Prueba y mira ‹/›

问题以及解决方法

在 HTML 中播放视频并不容易！

您需要掌握大量技巧，以确保您的视频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac, iPad, iPhone）都能够播放。

在本章，基础教程为您总结了问题和解决方法。

使用 <embed> 标签

标签 <embed> 的作用是在 HTML 页面中嵌入多媒体元素。

以下 HTML 代码显示嵌入网页的 Flash 视频：

Ejemplo en línea

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

Pregunta

  • HTML4 No se puede identificar la etiqueta <embed>. Su página no puede ser verificada.

  • Si el navegador no admite Flash, el video no se reproducirá

  • iPad y iPhone no pueden mostrar videos Flash.

  • Si convierte el video a otro formato, aún no se puede reproducir en todos los navegadores.

Utilice la etiqueta <object>

La etiqueta <object> se utiliza para insertar elementos multimedia en una página HTML.

El siguiente fragmento HTML muestra un video Flash insertado en la página web:

Ejemplo

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

Pregunta:

  • Si el navegador no admite Flash, no se podrá reproducir el video.

  • iPad y iPhone no pueden mostrar videos Flash.

  • Si convierte el video a otro formato, aún no se puede reproducir en todos los navegadores.

Utilice 　HTML5 El elemento <video>

HTML5 La etiqueta <video> define un video o película.

El elemento <video> es compatible en todos los navegadores modernos.

El siguiente fragmento HTML mostrará un segmento嵌入网页 de ogg, mp4 o video en formato webm:

Ejemplo en línea

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.webm"　type="video/webm">
　　Su navegador no admite la propiedad video.
</video>
</body>
</html>
Prueba y mira ‹/›

Pregunta:

  • Debe convertir el video en muchos formatos diferentes

  • El elemento <video> no es válido en navegadores antiguos.

La mejor solución HTML

En el siguiente ejemplo se utiliza 4 HTML 5 El elemento <video> intentará reproducir en varios formatos de video mp4Una de las formas de ogg o webm para reproducir el video. Si todos fallan, retroceda al elemento <embed>.

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Base Tutorial(oldtoolbag.com)</title>　
</head>
<body>
<video　width="320"　height="240"　controls　autoplay>
　　<source　src="movie.ogg"　type="video/ogg">
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.webm"　type="video/webm">
　　<object　data="movie.mp4"　width="320"　height="240">
　　　　<embed　width="320"　height="240"　src="movie.swf">
　　</object>
</video>
</body>
</html>
Prueba y mira ‹/›

Pregunta:

  • Debe convertir el video en muchos formatos diferentes

Solución Youku

La forma más sencilla de mostrar videos en HTML es usar sitios de videos como Youku.

Si desea reproducir un video en una página web, puede subir el video a sitios de videos como Youku y luego insertar el código HTML en su página web para reproducir el video.

Puede encontrar el código HTML incrustado en la entrada de compartir de varios sitios de videos.

<embed src=#39;https://player.youku.com/player.php/sid/XNDQ0MTI1NzE1Mg==/v.swf#39; allowFullScreen=#39; true#39; quality=#39; high#39; width=#39;480#39; height=#39;400#39; align=#39; middle#39; allowScriptAccess=#39; always#39; type=#39;application/x-shockwave-flash#39;></embed>
Prueba y mira ‹/›

Uso de enlaces

Si una página web contiene enlaces a archivos de medios, la mayoría de los navegadores usarán una "aplicación auxiliar" para reproducir los archivos.

El siguiente fragmento de código muestra un enlace a un archivo AVI. Si el usuario hace clic en el enlace, el navegador iniciará una "aplicación auxiliar", como Windows Media Player, para reproducir este archivo AVI:

Ejemplo en línea

<a href="bookmark.swf">Reproducir archivo de video</a>

Descripción del video incrustado

Cuando un video se incluye en una página web, se llama video incrustado.

Si tiene la intención de usar videos incrustados en aplicaciones web, debe ser consciente de que muchas personas encuentran los videos incrustados irritantes.

Al mismo tiempo, tenga en cuenta que es posible que el usuario ya haya cerrado la opción de video incrustado en el navegador.

Nuestra mejor recomendación es incluirlos solo en lugares donde el usuario desee ver videos incrustados. Un ejemplo positivo es cuando el usuario necesita ver un video y hacer clic en un enlace, luego se abre la página y se reproduce el video.

Etiquetas multimedia HTML

EtiquetaDescripción
<embed>Definir objeto incrustado. HTML4 No recomendado, HTML5 Permitido en
<object>Definir objeto incrustado.
<param>Definir parámetros del objeto.
<audio>HTML5Definir contenido de sonido
<video>HTML5Definir un video o película
<source>HTML5Definición de recursos multimedia del elemento media (<video> y <audio>)
<track>HTML5Archivo de subtítulos o otro archivo que contiene texto para el elemento media (video y audio)
大全 de ejemplos HTMLAudio HTML