-
Notifications
You must be signed in to change notification settings - Fork 0
/
videos.html
92 lines (77 loc) · 3.21 KB
/
videos.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Personal webpage">
<meta name="author" content="Domingos Dellamonica Jr.">
<title>Domingos Dellamonica Jr.</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body onload="loadContent()">
<div class="container">
<h1 class="my-4">Vídeos de família</small></h1>
<div id="video_list">
</div>
</div>
<script>
async function loadContent() {
const key = window.location.search.substr("?key=".length);
const sas = "?sv=2020-04-08&st=2021-04-09T10%3A07%3A31Z&se=2200-04-10T10%3A07%3A00Z&sr=c&sp=rl&sig=" + key;
const root = "https://fvideos.blob.core.windows.net/familia/";
const response = await fetch(root + "videos.json" + sas);
const data = await response.json();
// Create content data based on videos.json and update the div.
const videos = data.Videos;
let inner = "<h3>Atualizado em " + data.LastUpdate + " (" + videos.length + " videos)</h3>";
const parent = document.getElementById("video_list");
videos.sort((a, b) => a.Date > b.Date ? 1 : -1);
let id = 0;
for (const v of videos) {
inner += createVideoItem(++id, v, root, sas);
}
parent.innerHTML = inner;
}
function videoJumpTo(id, time) {
const values = time.split(':');
let seconds = 0;
let m = 1;
for (i = values.length - 1; i >= 0; --i)
{
seconds += m * parseInt(values[i]);
m *= 60;
}
if (!isNaN(seconds)) {
const target = document.getElementById("video_" + id);
target.load();
target.currentTime = seconds;
target.play();
}
}
function createVideoItem(id, v, root, sas) {
const timeline = v.Timeline.map(
t => `<li class="list-group-item">
<a href="#" onclick="videoJumpTo(${id}, '${t.Timestamp}'); return false;">${t.Timestamp}</a> ${t.Description}</li>`
)
.join('');
const families = v.Families.sort().map(
f => `<span class="badge rounded-pill bg-primary">${f}</span>`
)
.join(' ');
return `<div class="card col-md-6">
<video id="video_${id}" controls preload="none">
<source src="${root + v.File + sas}" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="card-body">
<h5 class="card-title">${v.Date} - ${v.Title}</h5>
<p>${families}</p>
<p class="card-text">${v.Subtitle}</p>
</div>
<ul class="list-group list-group-flush">${timeline}</ul>
</div>`
}
</script>
</body>
</html>