Проблема решилась предварительной загрузкой в скрытом
iframe, но загрузка изображения теперь занимает много времени.
При клике по изображению оно масштабируется, а в фрейм загружается пустая страница.
Возможно ли загружать "http://admin:admin@айпишник/video.cgi"
в плохом качестве, или есть другое решение?
<html>
<head>
<title>
</title>
<script>
function sizePic() {
size = document.getElementById("size").value;
img = document.getElementById("pic");
img.width = 60 + 20*size;
}
</script>
<style>
img.zoom {
-moz-user-select: none; user-select: none;
}
img.zoom:hover {
display: block;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: auto;
height: 100%;
max-width: 99%;
max-height: 99%;
border: solid rgba(210,210,210,.4);
border-width: 100vh 100vw;
cursor: zoom-out;
}
:not(:active) > img.zoom:not(:hover), img.zoom:active {
pointer-events: none;
}
</style>
<style>
.link {
width: 300px;
height: 200px;
background: white;
}
.link a {
display: block;
text-align: center;
height: 100%;
color: white;
}
</style>
</head>
<body>
<iframe src="http://admin:admin@айпишник/video.cgi" width="1" height="1" align="left" name="iframe_a" style="display:none"></iframe>
<p>Размер изображения <input type="range" min="1" max="100" id="size"
oninput="sizePic()" value="3"></p>
<div class="link">
<a href="" target="iframe_a""><img src="http://admin:admin@айпишник/video.cgi" alt="" id="pic" class="zoom"></a>
</div>
</html>