<html window-icon="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB1UlEQVR4nJWTP2hTcRDHP3epS4TqqHHtVNNCFzNFaZD8sxQkKQrOUnCLBoIoOIkG0nYQBbO4OiRLadpEIQ6dxEGxcdclg6Ngpt/vPZd78vqwBQ+O3933vtz97o4TEvKodDkP3ADyQNbgCXAIDJ6Ovh3G+RIZD0vZDNAENoF0MrHJDHgNdJ6NJlMABWiVljIBshUgjQBJB8iHANkMEAKkZu/QYo0A2WqVljJ/E3i06dHbHv3u0QceXWuPjroexaP99uhIPFqz2NS4TQBplFfywPCUb0fS2xl+3miUV+4CXWunnLqycOleiKyGSC1EboUIJ+hibiEzDZFiiCyGyJkQ+Tnn0LxV6Ccq/gBemv0YmAeKQB2oGT+vDs06FIcuvxp+ErNx6HmHVhxadui8YRcc2nNo3/ysOklhKgAx/5yT1KqTVCGGvegOP244SS1HmHp0YtO+ZhuJ9ItHczbxCHtinK/mT+RO5epzoAX8sj6TkgPenxBrq0MHDp3F+kyqOvTNP/CZQwcCUK8UtoFGbLpnewfjWbxUvVJIA79jnJ3ewfj+HIAX7QAXY6vcu1m9vguMzS94WI+t+y3QgdgxrVeL/3VMu/vvpscSRLJWLZ16znv7o2Pn/AeeJco8j/W3vQAAAABJRU5ErkJggg==">
<head>
<title>Video behavior demo</title>
<style>
body { background: gold; padding: 5dip; margin: 0; }
form { margin: 5dip; }
p { padding: 4dip; }
video.generator {
behavior: video-generator video;
border: 1px solid orange;
size: *;
foreground-size: contain;
}
</style>
<script type="text/tiscript">
$(video).onSize = function() {
var (w,h) = this.box(#dimension);
$(form).value = { width: w, height: h };
}
function self.ready() {
var (w,h) = this.box(#dimension);
$(form).value = { width: w, height: h };
}
event click $(#snapshot) {
var curframe = $(video).style.foregroundImage;
var fname = view.selectFile(#save, "Images|*.png;*.jpg|All files|*.*", "png");
if (fname) {
var image = curframe.toBytes();
image.save(fname);
}
}
var video = $(video);
var host;
var body = $(body);
event click $(#show-detached) {
if (body && !video.parent) {
// recreate element
video = body.$append(<video class="generator" />);
}
// It creates a new window and moves the current video element to it.
if( this.value )
{
host = view.window {
type: View.TOOL_WINDOW,
html: $(#templates).text,
width: 640,
height: 480,
alignment: 5,
};
video.detach();
host.root.$(body).append(video);
host.on("closing", function(evt) {
// detach
video.detach();
body.append(video);
$(#show-detached).value = false;
});
} else {
// and back
video.detach();
body.append(video);
host.close();
}
}
</script>
<script id="templates" type="text/html+template">
<html window-resizable>
<head>
<title>Hosted element</title>
<style>
body { margin: 0; padding: 0; }
video.generator {
display: block;
behavior: video-generator video;
size: *;
foreground-size: contain;
}
</style>
</head>
<body>
</body>
</html>
</script>
</head>
<body>
<p>This demo simulates partial video frame update.
On each frame (24 FPS) it updates another portion of the frame.</p>
<div>
<button id="snapshot">Save the current frame</button>
<button type=checkbox id="show-detached">Show video in a separate window</button>
</div>
<div>
<form>frame size: <output name=width /> x <output name=height /></form>
</div>
<video class="generator" />
</body>
</html>
