DIR : /home/kozerus/public_html/go/konva8.html

/home/kozerus/public_html/go

Konva Video Demo view raw

<!DOCTYPE html>
<html>
<head>

<!--    <script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script> -->
	<script id=script_konva src="/go/js/konva_min.js"></script>
	<meta charset="utf-8" />
	<title>Konva GIF Demo</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
//			background-color: #f0f0f0;
			background-color: "linen";
			}
		</style>
	</head>

<body>
	<button id="play">Play</button><button id="pause">Pause</button>
	<div id="container"></div>
	<script>
		var width = window.innerWidth;
		var height = window.innerHeight;

		var stage = new Konva.Stage({
			container: 'container',
			width: width,
			height: height,
			});

		var layer = new Konva.Layer();
		stage.add(layer);

		var video = document.createElement('video');
		video.src =
			'https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm';

		var image = new Konva.Image({
			image: video,
			draggable: true,
			x: 50,
			y: 20,
			});
		layer.add(image);

		var text = new Konva.Text({
			text: 'Loading video...',
			width: stage.width(),
			height: stage.height(),
			align: 'center',
			verticalAlign: 'middle',
			});
		layer.add(text);

// do nothing, animation just need to update the layer
		var anim = new Konva.Animation(function () { }, layer);

// update Konva.Image size when meta is loaded
		video.addEventListener('loadedmetadata', function (e) {
			text.text('play...');
			image.width(video.videoWidth);
			image.height(video.videoHeight);
			});

		document.getElementById('play').addEventListener('click', function () {
			text.destroy();
			video.play();
			anim.start();
			});
		document.getElementById('pause').addEventListener('click', function () {
			video.pause();
			anim.stop();
			});
		</script>
	</body>
	<html>

koh5_pano

Drag mouse to navigate.

Navigation

Left/Right Mouse drag: Changes camera heading.
Up/Sown Mouse drag: Changes camera pitch.
Scroll wheel: Changes camera field of view.
I-Key: Displays Info panel with canvas size, image size and FPS.

17.Aug.2010, Martin Wengenmayer