Commit 53c16e60 authored by Jonas Heinrich's avatar Jonas Heinrich

mp4 video fallback support, especially for iphone safari

parent 801a0ef2
...@@ -77,7 +77,7 @@ ...@@ -77,7 +77,7 @@
<span class="grid__item"> <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="profile-img clip" style="background-image: url('/images/profiles/traboulsi-wegner.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <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> <span class="quiet small">Autor, Webseite</span>
</div> </div>
</span> </span>
......
...@@ -211,6 +211,10 @@ h3 { ...@@ -211,6 +211,10 @@ h3 {
opacity: 0.6; opacity: 0.6;
} }
.autorenkürzel {
cursor: pointer;
}
@media only screen and (max-device-width: 480px) { @media only screen and (max-device-width: 480px) {
.container { .container {
......
...@@ -504,9 +504,18 @@ ...@@ -504,9 +504,18 @@
</div> </div>
</h3> </h3>
<video src="video/Ausstellung Virtuell - Demnächst zu erleben.webm" poster="video/Ausstellung Virtuell - Demnächst zu erleben.png" controls></video> <video poster="video/Ausstellung Virtuell - Demnächst zu erleben.png" controls>
<video src="video/Ausstellung Virtuell - Demnächst zu sehen.webm" poster="video/Ausstellung Virtuell - Demnächst zu sehen.png" controls></video> <source src="video/Ausstellung Virtuell - Demnächst zu erleben.webm" type="video/webm">
<video src="video/Ausstellung Virtuell - Ventilator Trailer.webm" poster="video/Ausstellung Virtuell - Ventilator Trailer.png" controls></video> <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> <h3>Partner</h3>
......
...@@ -99,7 +99,10 @@ ...@@ -99,7 +99,10 @@
</head> </head>
<body> <body>
<div id="trailer"> <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> </div>
<article> <article>
<img class="logo" src="presse/img/logos/logo.png"> <img class="logo" src="presse/img/logos/logo.png">
......
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -77,7 +80,7 @@ ...@@ -77,7 +80,7 @@
Lehrer am Bauhaus in Dessau. Lehrer am Bauhaus in Dessau.
</p> </p>
<p style="text-align: right;"> <p style="text-align: right;">
NTW <span class="autorenkürzel" title="Natalja Traboulsi-Wegner">NTW</span>
</p> </p>
<p> <p>
<b> <b>
......
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -87,7 +90,7 @@ ...@@ -87,7 +90,7 @@
Variation. Variation.
</p> </p>
<p style="text-align: right;"> <p style="text-align: right;">
JH <span class="autorenkürzel" title="Jonas Heinrich">JH</span>
</p> </p>
<p> <p>
<b> <b>
......
video1.mp4
\ No newline at end of file
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -86,7 +89,7 @@ ...@@ -86,7 +89,7 @@
scheinen. scheinen.
</p> </p>
<p style="text-align: right;"> <p style="text-align: right;">
AL <span class="autorenkürzel" title="Anke Leiber">AL</span>
</p> </p>
<p> <p>
<b>Verwendete Literatur:</b> <b>Verwendete Literatur:</b>
......
video1.mp4
\ No newline at end of file
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -63,6 +66,9 @@ ...@@ -63,6 +66,9 @@
quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus
voluptatem numquam recusandae et recusandae. voluptatem numquam recusandae et recusandae.
</p> </p>
<p style="text-align: right;">
<span class="autorenkürzel" title="?? ??">??</span>
</p>
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
......
video1.mp4
\ No newline at end of file
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -84,7 +87,7 @@ ...@@ -84,7 +87,7 @@
Genrebilder sind diese Stillleben-Ensembles in ihrer Folge und Varianz charakteristisch. Genrebilder sind diese Stillleben-Ensembles in ihrer Folge und Varianz charakteristisch.
</p> </p>
<p style="text-align: right;"> <p style="text-align: right;">
NTW <span class="autorenkürzel" title="Natalja Traboulsi-Wegner">NTW</span>
</p> </p>
<p> <p>
<b>Verwendete Literatur:</b> <b>Verwendete Literatur:</b>
......
video1.mp4
\ No newline at end of file
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -63,6 +66,9 @@ ...@@ -63,6 +66,9 @@
quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus
voluptatem numquam recusandae et recusandae. voluptatem numquam recusandae et recusandae.
</p> </p>
<p style="text-align: right;">
<span class="autorenkürzel" title="?? ??">??</span>
</p>
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
......
video1.mp4
\ No newline at end of file
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -91,7 +94,7 @@ ...@@ -91,7 +94,7 @@
</sup> </sup>
</p> </p>
<p style="text-align: right;"> <p style="text-align: right;">
HE <span class="autorenkürzel" title="Hanna Eßer">HE</span>
</p> </p>
<hr> <hr>
<p> <p>
......
video1.mp4
\ No newline at end of file
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -63,6 +66,9 @@ ...@@ -63,6 +66,9 @@
quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus
voluptatem numquam recusandae et recusandae. voluptatem numquam recusandae et recusandae.
</p> </p>
<p style="text-align: right;">
<span class="autorenkürzel" title="?? ??">??</span>
</p>
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
......
video1.mp4
\ No newline at end of file
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -63,6 +66,9 @@ ...@@ -63,6 +66,9 @@
quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus quibusdam sed. Cum aspernatur omnis provident reiciendis sunt nemo autem et. Suscipit repellendus
voluptatem numquam recusandae et recusandae. voluptatem numquam recusandae et recusandae.
</p> </p>
<p style="text-align: right;">
<span class="autorenkürzel" title="?? ??">??</span>
</p>
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
......
video1.mp4
\ No newline at end of file
...@@ -6,7 +6,10 @@ ...@@ -6,7 +6,10 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <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>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -86,7 +89,7 @@ ...@@ -86,7 +89,7 @@
präsentiert. präsentiert.
</p> </p>
<p style="text-align: right;"> <p style="text-align: right;">
HS <span class="autorenkürzel" title="Hanna Stetter">HS</span>
</p> </p>
<p> <p>
<b>Verwendete Literatur:</b> <b>Verwendete Literatur:</b>
......
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