Question

我想知道如何将缩放添加到HTML5视频渲染，我想说的是我已经能够渲染视频了，我也可以从视频流中捕获图像，但我想知道的是有一个缩放当前渲染视频的选项？

目前这就是我设法捕捉图像的方式

jQuery('#enable_camera').on('click', function() {
    var video = document.querySelector("#vid");
    var onCameraFail = function(e) {
        console.log('Camera did not work.', e);
    };
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
        jQuery('#enable_camera').hide();
        jQuery('#search_image').show();
        jQuery('#take_picture').show();
    }, onCameraFail);

    jQuery('#take_picture').on('click', function() {
        if (localMediaStream != null) {
            ctx.fillRect(0, 0, w, h);
            document.getElementById('canvas_img').src = video.src;
            ctx.drawImage(video, 0, 0, w, h);
            jQuery('#show_canvas').show();
            jQuery('#show_vid').hide();
        }
    });

});

Answer 1

您可以将CSS样式应用于视频以进行缩放。例如，<video style="width:800px">会将其大小调整为800px，或<video style="width:100%">会使其大小适合（进入网站的当前布局）。宽高比保留，因此高度会相应改变。

但是，这也会使视频在页面布局中占用更多空间。也许你真正想要的是保持屏幕上视频的大小相同，而是缩放到视频的一部分。在这种情况下，您可以将视频放入<div>，其中包含固定的with和height以及overflow:hidden属性。然后，您可以使用CSS定位在该div中移动视频以控制其中显示的部分。此示例将视频放在512 * 384的框中，将其放大到2倍放大率并仅显示其中心部分：

<div style="width:512px; height:384px; overflow:hidden">
    <video controls style="width:200%; left:-50%; top:-25%; position:relative">
        <source src="video.mp4">
    </video>
</div>

到目前为止，还有vanilla HTML + CSS解决方案。如何使用jQuery设置CSS样式属性留给读者练习。

如何将缩放添加到HTML5视频渲染？

1 个答案: