-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
62 lines (57 loc) · 7.36 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!--
Using video playback to keep the Android chrome on is a hack,
and hence this may not work in the future.
I have read this technique from the Internet, but unfortunately, I have forgot the source.
-->
<html>
<head>
<meta charset="utf-8">
<title>No Screen Timeout Fullscreen Webpage Boilerplate</title>
<link rel="icon" href="data:,"> <!-- Disable browser favicon request by hard coding an local empty image -->
</head>
<body>
<div class="center_wrapper">
Hello World!
</div>
<video loop id="keep_screenon_video">
<!--
- Generate a 1 second long 2x2 resolution sized pure black video with ffmpeg:
ffmpeg -f lavfi -i "color=color=black[black_video];[black_video]scale=2:2" -t 1 -c:v libx264 black.mp4
- Convert video file to base64 string with PowerShell:
$FileContent = Get-Content -Path black.mp4; $Bytes = [System.Text.Encoding]::Unicode.GetBytes($FileContent); "data:video/mp4;base64," + [Convert]::ToBase64String($Bytes)
-->
<source src="data:video/mp4;base64,AAAAAAAAIABmAHQAeQBwAGkAcwBvAG0AAAAAAAIAAABpAHMAbwBtAGkAcwBvADIAYQB2AGMAMQBtAHAANAAxAAAAAAAAAAgAZgByAGUAZQAAAAAABAAHAG0AZABhAHQAAAAAAAIA/f8GAAUA/f/9//3//f9FAP3//f/9/0gA/f/9/ywA/f8gAP3/IwD9//3/eAAyADYANAAgAC0AIABjAG8AcgBlACAAMQA2ADAAIAAtACAASAAuADIANgA0AC8ATQBQAEUARwAtADQAIABBAFYAQwAgAGMAbwBkAGUAYwAgAC0AIABDAG8AcAB5AGwAZQBmAHQAIAAyADAAMAAzAC0AMgAwADIAMAAgAC0AIABoAHQAdABwADoALwAvAHcAdwB3AC4AdgBpAGQAZQBvAGwAYQBuAC4AbwByAGcALwB4ADIANgA0AC4AaAB0AG0AbAAgAC0AIABvAHAAdABpAG8AbgBzADoAIABjAGEAYgBhAGMAPQAxACAAcgBlAGYAPQAzACAAZABlAGIAbABvAGMAawA9ADEAOgAwADoAMAAgAGEAbgBhAGwAeQBzAGUAPQAwAHgAMwA6ADAAeAAxADEAMwAgAG0AZQA9AGgAZQB4ACAAcwB1AGIAbQBlAD0ANwAgAHAAcwB5AD0AMQAgAHAAcwB5AF8AcgBkAD0AMQAuADAAMAA6ADAALgAwADAAIABtAGkAeABlAGQAXwByAGUAZgA9ADEAIABtAGUAXwByAGEAbgBnAGUAPQAxADYAIABjAGgAcgBvAG0AYQBfAG0AZQA9ADEAIAB0AHIAZQBsAGwAaQBzAD0AMQAgADgAeAA4AGQAYwB0AD0AMQAgAGMAcQBtAD0AMAAgAGQAZQBhAGQAegBvAG4AZQA9ADIAMQAsADEAMQAgAGYAYQBzAHQAXwBwAHMAawBpAHAAPQAxACAAYwBoAHIAbwBtAGEAXwBxAHAAXwBvAGYAZgBzAGUAdAA9AC0AMgAgAHQAaAByAGUAYQBkAHMAPQAxACAAbABvAG8AawBhAGgAZQBhAGQAXwB0AGgAcgBlAGEAZABzAD0AMQAgAHMAbABpAGMAZQBkAF8AdABoAHIAZQBhAGQAcwA9ADAAIABuAHIAPQAwACAAZABlAGMAaQBtAGEAdABlAD0AMQAgAGkAbgB0AGUAcgBsAGEAYwBlAGQAPQAwACAA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">
</video>
</body>
<script>
function main(){
click2Routine(); // to reduce UI elements
}
function click2Routine(){
document.body.addEventListener('click', function(){
document.body.webkitRequestFullScreen(); // init fullscreen, to reduce video
document.querySelector("#keep_screenon_video").play(); // init video playback, to keep screen on
});
}
main();
</script>
<style>
body {
background-color: black;
color: white;
width: 100vw;
}
.center_wrapper {
font-size: 6em;
margin: 0px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
#keep_screenon_video {
opacity: 0;
}
</style>
</html>