2020/manual/mtm1080.html (58 lines of code) (raw):
<!DOCTYPE html>
<!--
Copyright 2018 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
<title>Map-To-Mesh Demo</title>
<style>
#v {
width: 100%;
height: 100%;
filter: map-to-mesh(equirectangular, 100deg 60deg,
matrix3d(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1));
}
.instructions {
position: absolute;
left: 0;
background-color: white;
color: black;
}
@keyframes blink {
from {
background-color: white;
}
to {
background-color: black;
}
}
.spinner {
position: absolute;
left: 0;
bottom: 0;
animation: blink 1s infinite alternate;
width: 20px;
height: 20px;
}
#fps {
position: absolute;
left: 50px;
bottom: 0;
background-color: white;
color: black;
font-size: 150%;
}
</style>
</head>
<body>
<video autoplay loop id="v" src="https://storage.googleapis.com/ytlr-cert.appspot.com/test-materials/media/manual/mtm/spherical_h264_1080p_progressive.mp4"></video>
<div class="instructions">
Use either the keyboard keys, direction keys, or analog joystick/thumbstick to look around.
</div>
<!--
The spinner is required in order to get around an implementation detail of
the 'Renderer.Rasterize.DurationInterval.Avg' cval that we rely on
for measuring the framerate. In a nutshell, that cval is only updated
when a CSS animation is active, but not when a video is playing, even
though both of these things result in a continual re-rasterization of
the UI/video.
-->
<div class="spinner"></div>
<div id="fps"></div>
<script src="../harness/key.js"></script>
<script src="../harness/keyEvent.js"></script>
<script src="../lib/manual/mtm.js"></script>
</body>
</html>