设置默认的“无视频源” /“无视频权限”黑色矩形的样式

Question

当系统提示用户授予Safari权限时，视频元素显示为带有删除线播放按钮的黑色矩形。如何更改此元素的样式？是否有特定的ID /类别/标签？

我正在使用Quagga JS作为条形码扫描仪。 AFAIK Quagga创建一个video元素，然后请求相机许可。最佳结果是使用display:none;隐藏该元素，但我想不出任何方法来实现此目的。一旦扫描仪获得许可，我需要该元素来显示相机供稿，但在此之前，它应该将屏幕涂成黑色或被隐藏。

Answer 1

我已修复该问题，方法是通过JavaScript隐藏它，并在Quagga反馈完成后显示它。请注意，纯CSS解决方案会更漂亮。

// Hide the preview before it's fully initialised.
    $('#videoBoundingBox').hide();
    Quagga.init({
        inputStream: {
            name: "Live",
            type: "LiveStream",
            target: document.querySelector('#videoBoundingBox')
        },
        decoder: {
            readers: [
                "code_128_reader",
                "ean_reader"
            ]
        }
    }, function (err) {
        if (err) {
            console.log(err);
            setResult(err);
            err = err.toString();
            if (err.search("NotFoundError")) {
                // No camera found. The user is probably in an office environment.
                // Redirect to previous orders or show a background image of sorts.
            } else if (err.search("NotAllowedError")) {
                // The user has blocked the permission request.
                // We should ask them again just to be sure or redirect them.
            } else {
                // Some other error.
            }


            return;
        }
        // Hide the preview before it's fully initialised.
        $('#videoBoundingBox').show();
        setResult("Initialization finished. Ready to start");
        console.log("Initialization finished. Ready to start");
        Quagga.start();
        initializeQuaggaFeedback();
    });