-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
131 lines (83 loc) · 3.12 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<title>🙈 Phobia Safe Video Player</title>
<style>
video {
height: 400px;
}
#video-container {
position: relative;
width: fit-content;
}
#pobia-shield {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: gray;
pointer-events:none;
}
#pobia-shield.show {
opacity: 1;
}
</style>
</head>
<body>
<h1>🙈 Phobia Safe Video Player</h1>
<div id="video-container">
<video controls src="5-generation-bakers.mp4"></video>
<div id="pobia-shield"></div>
</div>
<h5>What is your deepest fear?... <input /></h5>
<script>
const SCARY_PADDING_SECONDS = 1
const video = document.getElementsByTagName('video')[0]
const phobia_shield = document.getElementById('pobia-shield')
const enitity_frames = {}
var scary_parts = []
function process_labels(json) {
const annotations = json.annotation_results[0].frame_label_annotations
annotations.forEach(annotation => {
if (!(annotation.entity.description in enitity_frames)) {
enitity_frames[annotation.entity.description] = []
}
annotation.frames.forEach(frame => {
enitity_frames[annotation.entity.description].push(frame.time_offset.seconds || 0)
});
});
console.log(annotations)
}
// load video annotation fril from Google Cloud Video Intelligence API
$.getJSON("output.json", (json) => {
process_labels(json)
scary_parts = enitity_frames['baker']
})
// watch for video time changes
video.addEventListener('timeupdate', () => {
const time_to_check = video.currentTime
var found_scary_part = false
for (let index = 0; index < scary_parts.length; index++) {
const scary_time = scary_parts[index];
if (Math.abs(scary_time - time_to_check) <= SCARY_PADDING_SECONDS) {
found_scary_part = true
break
}
}
if (found_scary_part) {
// hid video playing
console.log("🙈")
phobia_shield.classList.add("show")
} else {
console.log('removing cloass')
phobia_shield.classList.remove("show")
}
console.log(video.currentTime)
})
</script>
</body>