首页视频框大小为800X600,位置居中，

视频框大小为800X600,位置居中，

时间: 2024-04-17 09:23:33 浏览: 119

要将视频框的大小设置为800x600并居中，您可以使用CSS来实现。以下是一个示例的HTML和CSS代码： ```html <!DOCTYPE html> <html> <head> <title>打开摄像头</title> <style> #videoContainer { width: 800px; height: 600px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #videoElement { width: 100%; height: 100%; } </style> </head> <body> <div id="videoContainer"> <video id="videoElement" autoplay></video> </div> <script> navigator.mediaDevices.getUserMedia({ video: true }) .then(function (stream) { var video = document.getElementById("videoElement"); video.srcObject = stream; }) .catch(function (error) { console.log("无法访问摄像头: ", error); }); </script> </body> </html> ``` 在上面的代码中，我们创建了一个名为`videoContainer`的`<div>`元素，它具有800x600的固定大小，并通过CSS属性`position: absolute`和`top/left`将其置于页面的中心位置。使用`transform: translate(-50%, -50%)`来对齐元素。在`videoContainer`内部，我们放置了一个`<video>`元素，使用CSS属性`width: 100%`和`height: 100%`来使其填充整个父容器的空间。这样，视频框的大小将被设置为800x600，并且居中显示在网页上。

阅读全文