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)
});

我在视频标签上显示我的相机流。然而，宽度＆amp; 300px的高度是整个标签的宽度，视频本身有一些底部/顶部填充，但是这个填充不在CSS中。如何将视频大小精确地设置为300x300？

Answer 1

这是你在找什么？我只是尝试在300px * 300px的视频上重叠div。可能这会帮助你......尝试一次。

＆＃13;

<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>

＆＃13;

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

1 个答案: