Establecer altura de video en HTML5

Puede ser una pregunta simple, pero realmente me está volviendo loco. Solo quiero establecer el alto y el ancho del video HTML5.Establecer altura de video en HTML5

estoy utilizando este código:

<video controls="controls" width="1000" id="video"> 
      <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
      <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
    </video>

Resultado: enter image description here

Si sumo atributo de altura

<video controls="controls" width="1000" height="300" id="video"> 
       <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
       <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video>

Resultado: enter image description here

som Así que me estoy perdiendo ¿Todo aquí?

¿Alguien puede corregir el error que estoy cometiendo?

Fuente

2012-04-04 coder

Ha intentado establecer las dimensiones de CSS en su lugar? Podría ser más fácil modificarlos desde allí. También podría configurar el video para que se ajuste al tamaño de sus padres (video {ancho: 100%; altura: 100%;}) y edite las dimensiones de sus padres sobre la marcha. No lo he probado. ¡Solo una idea! – Oriol

No se puede cambiar la relación de aspecto en <video> etiqueta.

Sin embargo, puede leer el contenido de su video y escribirlo en el elemento <canvas>.

Por ejemplo:

<canvas id="canvas" height="768" width="1024"></canvas>

y JS:

function updateVideo() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var myVideo = document.getElementById('video'); 
    ctx.drawImage(myVideo, 0, 0, 640, 480); 
} 
setInterval (updateVideo, 24);

Fuente

2012-04-04 12:57:34 antyrat

-3

Puede usar CSS para evitar.

#video { 
    width:1000px; 
    height:auto; 
}

Fuente

2012-04-04 13:05:00 Dips

@ User1193749-Lo he intentado pero es lo mismo. – coder

Aquí hay un simple truco de CSS, no necesita agregar ningún código de JavaScript o jQuery. Use object-fit propiedad de CSS en la etiqueta de video.

HTML

<video controls="controls" id="video"> 
<source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
<source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video>

CSS

#video{ 
    object-fit: initial; 
    width: 400px; 
    height: 300px; 
}

See Fiddle

Fuente

2016-01-25 11:04:49 Musa

Nunca había oído hablar de esta propiedad antes, había estado sufriendo a través de video extrañamente posicionado durante horas antes de encontrar esto, gracias –

trabajando para mí, +1, usé objest-fit: cubierta, pero esto funcionó. –

Establecer altura de video en HTML5

Respuesta

Cuestiones relacionadas