svg video

 

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #282828;
        }
    </style>
</head>

<body>
    <svg id="main" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" width="100%" height="100%">
        <foreignObject width="100%" height="100%">

            <body xmlns="http://www.w3.org/1999/xhtml" width="100%" height="100%">
                <div style="    text-align: center;vertical-align: middle;">
                    <video width="100%" height="100%" style="max-height: 600px;" src="tt1.mp4" controls="controls"
                        autoplay="autoplay">
                        your browser does not support the video tag
                    </video>
                </div>

            </body>
        </foreignObject>
    </svg>
    <script type="text/javascript">
        //调整浏览器窗口大小事件 
        window.onresize = function () {
            _autoZoom();
        }
        _autoZoom();
        function _autoZoom() {
            var svg = document.getElementById("main");
            if (svg) {
                svg.setAttribute("preserveAspectRatio", "xMinYMin meet");
                svg.setAttribute("viewBox", "0 0 1500 600");
                svg.style.overflow = "hidden";
                var viewBoxVal = svg.getAttribute("viewBox");
                if (viewBoxVal) {
                    var viewBoxWidth = viewBoxVal.split(" ")[2];
                    var viewBoxHeight = viewBoxVal.split(" ")[3];
                    svg.removeAttribute("width");
                    svg.removeAttribute("height");

                    var setWidth = document.body.clientWidth;
                    var setHeight = setWidth * viewBoxHeight / viewBoxWidth;
                    svg.setAttribute("width", setWidth);
                    svg.setAttribute("height", setHeight);
                }
            }
        }
    </script>
</body>

</html>

　　

posted @ 2022-05-06 17:01  人间春风意  阅读(94)  评论(0)    收藏  举报