-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvideo.html
93 lines (74 loc) · 3.43 KB
/
video.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
<!DOCTYPE html>
<html>
<head>
<title>Evolution of baryons and dark matter </title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="fr"/>
<link rel="stylesheet" href="iceberg.css" type="text/css" media="screen"
title="Simple"/>
<style>
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
/* Style for video container */
#video-container {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}
/* Style for video player */
video {
width: 50%;
}
/* Style for video buttons */
.button {
margin: 0 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
font-size: 16px;
cursor: pointer;
}
/* Style for button container */
#button-container {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Evolution of baryons and dark matter</h1>
<p>These videos have been produced for the lectures "cosmology of the dark universe", they show the evolution of baryons and cold dark matter perturbation obtained by solving the Einstein-Boltzmann equation using the numerical code CAMB.</p>
<div id="button-container">
<button class="button" onclick="playVideo('movies/2d_baryons_synchronous_lcdm_pre_decoupling.mp4', 'movies/2d_cdm_synchronous_lcdm_pre_decoupling.mp4')">Play Pre-Decoupling Videos</button>
<button class="button" onclick="playVideo('movies/2d_baryons_synchronous_lcdm_post_decoupling.mp4', 'movies/2d_cdm_synchronous_lcdm_post_decoupling.mp4')">Play Post-Decoupling Videos</button>
</div>
<div id="video-container">
<video id="video1" controls></video>
<video id="video2" controls></video>
</div>
<hr>
<h2>Chat-GPT Conversation Prompts:</h2>
<p>Since I have no html or javascript knowledge I used chat-gpt to write the page for me, after some trial and error, here are the prompts that worked</p>
<pre>
"Can you write the source code for a web page using html and javascript. The page will consist of a title, a paragraph of text, and then a video player with a graphical interface. The graphical interface will help the user to choose which video to play. I have 4 videos, with name format 2d_XXX_synchronous_lcdm_YYY.mp4, where XXX can be {baryons, cdm} and YYY can be {post_decoupling, pre_decoupling}. I want the baryons and cdm video to always be played together side by side, their total combined width will be half a page width. the user will only specify if it's pre or post decoupling, and he/she will use a general play button at the top to play the videos."
"ok this is not bad, but the play button here only switch between pre and post decoupling, but doesn't play the video, can you fix that, also, can you put the play button at the top"
</pre>
<script>
function playVideo(video1Src, video2Src) {
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
video1.src = video1Src;
video2.src = video2Src;
video1.play();
video2.play();
}
</script>
</body>
</html>