-
Notifications
You must be signed in to change notification settings - Fork 0
/
media.html
170 lines (145 loc) · 7.93 KB
/
media.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="author" content="George Warren Jr">
<meta name="discription" content="This is the media webpage for Rising Thunder Servers">
<title>Rising Thunder Alpha Test</title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="images/rtfavicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<h1>Rising Thunder Alpha Test</h1>
<h2>A "Career Level" DCS World Server Series</h2>
</header>
<nav>
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="statistics/statistics.html">Statistics</a></li>
<li><a href="pdfs/documents.html">Documents Page</a></li>
<li><a href="contacts.html">Contacts Page</a></li>
<li><a href="code/code.html">Code Repository</a></li>
<li><a href="blogs/news.html">News & Blogs</a></li>
<li>Media</li>
<li><a href="forms/forms.html">Input Forms</a></li>
</ul>
<hr>
</nav>
<main>
<section>
<h5>Media</h5>
<p>The purpose of this page is soley for my personal learning exercises in using multmedia assests within html,
<br>hence the shamless ripping, although resized and/or croped, images from the DCS webpages.
<br>Hopfully ED will view this as free advertising and not get too bent up...</p>
<hr>
</section>
<section>
<h5>Responsive Media</h5>
<h6>(Resolution switching: Different sizes)</h6>
<figure>
<!-- This is an example of Resolution switching: Different sizes. -->
<!-- When checking images via the Responsive Design Mode, input resolution in width box for correct result. -->
<img srcset="images/f14-480.jpg 480w,
images/f14-800.jpg 800w,
images/f14-1000.jpg 1000w"
sizes="(max-width: 520px) 480px,
(max-width: 840px) 800px,
1000px"
src="images/f14-1000.jpg" alt="F-14 taking off from an aircraft carrier">
<!-- When using resolution switching images, width & height attributes cannot be used -->
<figcaption>A Heatblur F-14 Taking Off.</figcaption>
</figure>
<br>
<figure>
<img src="/images/yak52-1000.jpg" width="1000" height="306" alt="A Yak-52 taking off">
<figcaption>A DCS Yak-52</figcaption>
</figure>
<br>
<h6>(Resolution switching: Same size, different resolutions)</h6>
<!-- In this example CSS is applied to the image so that it will have a width of 640px pixels on the screen (also called CSS pixels) -->
<!-- I set the CSS width to 640px, and set the fire-truck-320w.png to 2x, and the fire-truck-640w.png to 1x by leaving it blank,
basically opposite of what the given example html is showing at https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Same_size_different_resolutions . -->
<img srcset="images/fire-truck-320w.png 2x,
images/fire-truck-480w.png 1.5x,
images/fire-truck-640w.png"
src="images/fire-truck-640w.png" alt=" Image of a URAL 4320 fire truck AA-8.0" id="firetruckimg"><br>
<img srcset="images/fire-truck-320.png 2x,
images/fire-truck-640.png"
src="images/fire-truck-640.png" alt="Image of a URAL 4320 fire truck AA-08 why" id="firetruckimg"><br>
<h6>(Art direction)</h6>
<picture>
<source media="(max-width: 799px)" srcset="images/f14-crew-crop.jpg">
<source media="(min-width: 800px)" srcset="images/f14-crew.jpg"> <!-- This element is really unnecessary & redundent -->
<img src="images/f14-crew.jpg" alt="an F14 crew lighting the fires">
</picture><br>
<picture>
<source media="(max-width: 799px)" srcset="images/yak-52-crew-crop.jpg">
<source media="(min-width: 800px)" srcset="images/yak-52-crew.jpg">
<img src="images/yak-52-crew.jpg" alt="Yak-52 Instructor and student">
<!-- The width attribute does not seem to work with the srcset attribute, which means that the images cannot be resized and must be the correct size nativitally -->
</picture>
<hr>
</section>
<section>
<h5>Favorite DCS Videos</h5>
<video controls loop width="330" height="270" poster="images/deck-crew-poster.png">
<source src="images/deck-crew.webm" type="video/webm">
<p>Your browser doesn't support HTML video. Here is a <a href="images/deck-crew.webm">link to the video </a>instead</p>
<track kind="subtitles" src="images/deck-crew.vtt" default srclang="en">
</video>
<video controls autoplay loop muted width="330" height="270">
<source src="images/engine-start.webm" type="video/webm">
<source src="images/engine-start.mp4" type="video/mp4">
<p>Your browser doesn't support HTML video. Here is a <a href="images/engine-start.mp4">link to the video</a>instead</p>
</video>
<iframe width="330" height="228" src="https://www.youtube.com/embed/732Y62VZIGc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr>
</section>
<section>
<h5>Maps</h5>
<!-- You may adjust width and height attribures within the ifame element as desired. -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1436826.7672685129!2d33.43927477946804!3d45.30231912897546!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40eac2a37171b3f7%3A0x2a6f09e02affbaeb!2sCrimean%20Peninsula!5e0!3m2!1sen!2sus!4v1572304107754!5m2!1sen!2sus" width="1000" height="280" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7725.426931605761!2d-115.81173599726586!3d37.238123399834144!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sus!4v1573599646026!5m2!1sen!2sus" width="1000" height="280" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
<hr>
</section>
<section>
<svg width="1000" height="40">
<rect width="100%" height="100%" fill=green />
<circle cx="25%" cy="50%" r="18" fill="blue"/>
<circle cx="75%" cy="50%" r="18" fill="red" />
<image href="images/lightning.svg" x="25%" y="1" height="36" />
<image href="images/lightning.svg" x="75%" y="1" height="36" />
<text x="32%" y="32" font-size="36" fill="yellow">Rising Thunder Servers</text>
<!-- to do, replace lightning bolts with svg polygon's, see https://wiki.developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon -->
</svg>
<img src="images/construction.svg" width="80" alt="a construction sign" class="center" />
<svg width="1000" height="40">
<rect width="100%" height="100%" fill="green" />
<text x="32%" y="32" font-size="36" fill="yellow">~Comming Eventually~</text>
</svg>
<hr>
</section>
<section>
<h5>Audio</h5>
<p>Turn down the thunder if your frightened :-) .</p>
<audio id="thunderAudio" controls autoplay loop>
<source src="images/thunderstorm-audio.webm" type="audio/webm">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="images/deck-crew.webm"> link to the audio</a> instead. Update for the latest <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox browser</a>!</p>
</audio>
<audio controls autoplay loop>
<source src="images/rain-on-roof.mp3" type="audio/ogg">
<p>Your browser doesn't support HTML audio. Here is a <a href="images/musicintro.ogg">link to the audio</a> instead</p>
</audio>
</section>
</main>
<footer>
<!-- To keep padding under the revision date paragraph (the text in the blue field), adjust the body bottom padding in the css file. As to why this must be done is unknown to me for now -->
<p class="revisionDate" class="paragrah2">Revision Date, see the Javascript file</p>
</footer>
<script>document.getElementById('thunderAudio').volume = 0.6;</script>
<script src="scripts/revision.js"></script>
</body>
</html>