problema al insertar video en HTML

Avatar

hola a todos. estoy aprendiendo html. quiero insertar un vídeo, pero cuando lo ejecuto en el navegador solo se reproduce el audio. ¿alguien podría ayudarme a solucionar este problema?

11respuestas
Avatar

Para insertar video por medio de la etiqueta HTML5 de video (asumiendo que te refieres a esto)

Sería de este modo

<video  controls>  
	<source src="movie.mp4"  type="video/mp4">  
	<source src="movie.ogg"  type="video/ogg">    
</video>

ACLARACIONES

  • El atributo controls permite que aparezcan los botones de control de reproducción
  • El atributo source va a permitir que de forma múltiple indiques el origen del recurso, es decir desde donde estará invocando al video

MIME TYPES DE VIDEO

  • video/ogg .ogm
  • video/ogg .ogv
  • video/ogg .ogg

Aqui tienes documentación oficial

Revisa que tu navegador soporte la etiqueta de video

Revisa también si tu navegador permite que reproduzcas el tipo de video que tienes o en caso contrario agrega un formato mas en el atributo source para facilitar dicha tarea

Avatar

este es mi codigo

<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Video en HTML</title>
</head>
<body>
	<video controls>
	 <source src="video.mp4" type="video/mp4">
	 <source src="video.ogg" type="video/ogg">	
		<p>tu navegador no soporta este formato 
		 </p>
	</video>
</body>
</html> ```
Avatar

estoy utilizando CROME, y el problema persiste, solo se reproduce el audio

Avatar

Veo en tu código que tienes 2 vídeos, ¿ninguno de los 2 te los muestra en pantalla?

Avatar

no, solo muestra un pequeño rectángulo

Avatar

¿No tienes captura de ese rectángulo?

Avatar

no sé como insertar la imagen aquí

Avatar

Tienes que hacer una nueva publicacion y ahi te sale un icono de una imagen parecido a

Imagen

esta imagen

Avatar

Dentro de las etiquetas vídeo va un mensaje que se mostrara si es que el vídeo no es soportado por el navegador. Es igual que con el atributo alt="" en la etiqueta img. Ademas los atributos source y type van dentro de las llaves, ejemplo:

 Tu navegador no admite el elemento
</video> ```
Avatar

<video source="video.ogg" type="video/mp4" controls>Tu navegador no admite el elemento</video>

Avatar

En algún momento me sucedió lo mismo y después de investigar, llegué a esto, y sirve en todos los navegadores

<video controls="controls" preload="auto" poster="ubicacion-de-tu-Imagen-que-Aparecera-como-poster.png"> <source src="ubicacion-de-tu-video.mp4" type='video/webm; codecs="avc1, mp4a"'> <source src="ubicacion-de-tu-video.webmsd.webm" type='video/webm; codecs="vp8,vorbis"'> </video>
Necesitas iniciar sesión para responder.
¿En qué estamos trabajando?
Fundamentos de Redes

Fundamentos de Redes

Comprende cómo funcionan las direcciones IP y los protocolos de red.