Skip to content

GitLab

W
web-ausstellung-virtuell.de
Commit 53c16e60 authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files
Options

mp4 video fallback support, especially for iphone safari

parent 801a0ef2
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 21 deletions
about.html
View file @ 53c16e60
......@@ -77,7 +77,7 @@
<span class="grid__item">
<div class="profile-img clip" style="background-image: url('/images/profiles/traboulsi-wegner.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center">
<h3 class="meta__title">Natalija Traboulsi-Wegner</h3>
<h3 class="meta__title">Natalja Traboulsi-Wegner</h3>
<span class="quiet small">Autor, Webseite</span>
</div>
</span>
......
css/main.css
View file @ 53c16e60
......@@ -211,6 +211,10 @@ h3 {
opacity: 0.6;
}
.autorenkürzel {
cursor: pointer;
}
@media only screen and (max-device-width: 480px) {
.container {
......
presse/index.html
View file @ 53c16e60
......@@ -504,9 +504,18 @@
</div>
</h3>
<video src="video/Ausstellung Virtuell - Demnächst zu erleben.webm" poster="video/Ausstellung Virtuell - Demnächst zu erleben.png" controls></video>
<video src="video/Ausstellung Virtuell - Demnächst zu sehen.webm" poster="video/Ausstellung Virtuell - Demnächst zu sehen.png" controls></video>
<video src="video/Ausstellung Virtuell - Ventilator Trailer.webm" poster="video/Ausstellung Virtuell - Ventilator Trailer.png" controls></video>
<video poster="video/Ausstellung Virtuell - Demnächst zu erleben.png" controls>
<source src="video/Ausstellung Virtuell - Demnächst zu erleben.webm" type="video/webm">
<source src="video/Ausstellung Virtuell - Demnächst zu erleben.mp4" type="video/mp4">
</video>
<video poster="video/Ausstellung Virtuell - Demnächst zu sehen.png" controls>
<source src="video/Ausstellung Virtuell - Demnächst zu sehen.webm" type="video/webm">
<source src="video/Ausstellung Virtuell - Demnächst zu sehen.mp4" type="video/mp4">
</video>
<video poster="video/Ausstellung Virtuell - Ventilator Trailer.png" controls>
<source src="video/Ausstellung Virtuell - Ventilator Trailer.webm" type="video/webm">
<source src="video/Ausstellung Virtuell - Ventilator Trailer.mp4" type="video/mp4">
</video>
<h3>Partner</h3>
......
preview.html
View file @ 53c16e60
......@@ -99,7 +99,10 @@
</head>
<body>
<div id="trailer">
<video src="presse/video/Ausstellung Virtuell - Demnächst zu sehen.webm" poster="presse/video/Ausstellung Virtuell - Demnächst zu sehen.png" controls></video>
<video poster="presse/video/Ausstellung Virtuell - Demnächst zu sehen.png" controls>
<source src="presse/video/Ausstellung Virtuell - Demnächst zu sehen.webm" type="video/webm">
<source src="presse/video/Ausstellung Virtuell - Demnächst zu sehen.mp4" type="video/mp4">
</video>
</div>
<article>
<img class="logo" src="presse/img/logos/logo.png">
......
video/video1.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video1.webm" id="html-player" style="width: 100%;" poster="/video/video1.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video1.jpg">
<source src="/video/video1.webm" type="video/webm">
<source src="/video/video1.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -77,7 +80,7 @@
Lehrer am Bauhaus in Dessau.
</p>
<p style="text-align: right;">
NTW
<span class="autorenkürzel" title="Natalja Traboulsi-Wegner">NTW</span>
</p>
<p>
<b>
......
video/video10.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video10.webm" id="html-player" style="width: 100%;" poster="/video/video10.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video10.jpg">
<source src="/video/video10.webm" type="video/webm">
<source src="/video/video10.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -87,7 +90,7 @@
Variation.
</p>
<p style="text-align: right;">
JH
<span class="autorenkürzel" title="Jonas Heinrich">JH</span>
</p>
<p>
<b>
......
video/video10.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
video/video2.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video2.webm" id="html-player" style="width: 100%;"poster="/video/video2.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video2.jpg">
<source src="/video/video2.webm" type="video/webm">
<source src="/video/video2.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -86,7 +89,7 @@
scheinen.
</p>
<p style="text-align: right;">
AL
<span class="autorenkürzel" title="Anke Leiber">AL</span>
</p>
<p>
<b>Verwendete Literatur:</b>
......
video/video2.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
video/video3.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video3.webm" id="html-player" style="width: 100%;" poster="/video/video3.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video3.jpg">
<source src="/video/video3.webm" type="video/webm">
<source src="/video/video3.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -63,6 +66,9 @@
quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus
voluptatem numquam recusandae et recusandae.
</p>
<p style="text-align: right;">
<span class="autorenkürzel" title="?? ??">??</span>
</p>
</div>
<div class="video-navigation">
......
video/video3.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
video/video4.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video4.webm" id="html-player" style="width: 100%;" poster="/video/video4.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video4.jpg">
<source src="/video/video4.webm" type="video/webm">
<source src="/video/video4.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -84,7 +87,7 @@
Genrebilder sind diese Stillleben-Ensembles in ihrer Folge und Varianz charakteristisch.
</p>
<p style="text-align: right;">
NTW
<span class="autorenkürzel" title="Natalja Traboulsi-Wegner">NTW</span>
</p>
<p>
<b>Verwendete Literatur:</b>
......
video/video4.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
video/video5.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video5.webm" id="html-player" style="width: 100%;" poster="/video/video5.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video5.jpg">
<source src="/video/video5.webm" type="video/webm">
<source src="/video/video5.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -63,6 +66,9 @@
quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus
voluptatem numquam recusandae et recusandae.
</p>
<p style="text-align: right;">
<span class="autorenkürzel" title="?? ??">??</span>
</p>
</div>
<div class="video-navigation">
......
video/video5.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
video/video6.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video6.webm" id="html-player" style="width: 100%;" poster="/video/video6.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video6.jpg">
<source src="/video/video6.webm" type="video/webm">
<source src="/video/video6.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -91,7 +94,7 @@
</sup>
</p>
<p style="text-align: right;">
HE
<span class="autorenkürzel" title="Hanna Eßer">HE</span>
</p>
<hr>
<p>
......
video/video6.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
video/video7.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video7.webm" id="html-player" style="width: 100%;" poster="/video/video7.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video7.jpg">
<source src="/video/video7.webm" type="video/webm">
<source src="/video/video7.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -63,6 +66,9 @@
quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus
voluptatem numquam recusandae et recusandae.
</p>
<p style="text-align: right;">
<span class="autorenkürzel" title="?? ??">??</span>
</p>
</div>
<div class="video-navigation">
......
video/video7.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
video/video8.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video8.webm" id="html-player" style="width: 100%;" poster="/video/video8.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video8.jpg">
<source src="/video/video8.webm" type="video/webm">
<source src="/video/video8.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -63,6 +66,9 @@
quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus
voluptatem numquam recusandae et recusandae.
</p>
<p style="text-align: right;">
<span class="autorenkürzel" title="?? ??">??</span>
</p>
</div>
<div class="video-navigation">
......
video/video8.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
video/video9.html
View file @ 53c16e60
......@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="/video/video9.webm" id="html-player" style="width: 100%;" poster="/video/video9.jpg"></video>
<video id="html-player" style="width: 100%;" poster="/video/video9.jpg">
<source src="/video/video9.webm" type="video/webm">
<source src="/video/video9.mp4" type="video/mp4">
</video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -86,7 +89,7 @@
präsentiert.
</p>
<p style="text-align: right;">
HS
<span class="autorenkürzel" title="Hanna Stetter">HS</span>
</p>
<p>
<b>Verwendete Literatur:</b>
......
video/video9.mp4 0 → 120000
View file @ 53c16e60
video1.mp4
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment