如何在视频标签中设置视频内容的精确宽度和高度

Question

有这个视频标签：

<video id="video" width="300" height="300" autoplay></video>

和

var video = document.getElementById('video') as any;
var mediaConfig = { video: true };

// Put video listeners into place
navigator.mediaDevices.getUserMedia(mediaConfig).then(function (stream) {
  video.src = window.URL.createObjectURL(stream);
  video.play();
}, (e) => {
  console.log('An error has occurred!', e)
});

我在video标签上显示我的摄像头流。然而，300px的宽度和高度是整个标签的宽度，并且视频本身有一些底部/顶部填充，但是这种填充不在CSS中。如何才能使视频大小精确到300x300？

Answer 1

这就是你要找的吗？我刚刚尝试了在300px*300px的视频上重叠一个div。也许这会帮助you..Try一次。

​

<div style="width: 300px; height:300px; overflow: hidden;">
    <video loop="loop" style="width: 100%;" autoplay="autoplay">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
        <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"/>        
    </video>
</div>

​