我解决了这个问题。 只需计算标签的视频比例和一些偏移值即可。

<video id="video" width="100%" height="100%" controls src="test.mp4"></video>
<svg id="svg" width="100%" height="100%" style="position: absolute; left:0px; background:gray; opacity:0.5; pointer-events: none;"></svg>

<script>
    const svgHandler = (e) => {
        let v = document.getElementById("video");

        let v_w = v.videoWidth;
        let v_h = v.videoHeight;
        let c_w = v.clientWidth;
        let c_h = v.clientHeight;

        let v_rate = v_h / v_w;
        let c_rate = c_h / c_w;

        // 1. get real playing area

        let r_w;
        let r_h;

        if (v_rate < c_rate) {
            r_w = c_w;
            r_h = c_w * v_rate;
        } else {
            r_h = c_h;
            r_w = parseInt(r_h / v_rate);
        }

        // 2. arrange an SVG tag to the above of the real playing area

        let v_off = getOffset(v);

        let left_padding = (c_w - r_w) / 2 + v_off.left;
        if (e.type == "loadeddata") {
            let v_panel_off = getOffset(document.body);
            left_padding += v_panel_off.left;
        }

        let top_padding = (c_h - r_h) / 2 + v_off.top;

        let s = document.getElementById("svg");
        s.style.position = 'absolute';
        s.style.top = parseInt(top_padding);
        s.style.left = parseInt(left_padding);
        s.style.width = parseInt(r_w);
        s.style.height = parseInt(r_h);
        s.style.pointerEvents = "none";
    }

    const getOffset = (el) => {
        const rect = el.getBoundingClientRect();
        return {
            left: rect.left + window.scrollX,top: rect.top + window.scrollY
        };
    }

    document.getElementById("video").addEventListener('loadeddata',svgHandler);
    window.onresize = svgHandler;
</script>