Hallo, ich versuche, ein Video hochzuladen, so dass es in den gängigsten Browsern abgespielt werden kann. Das Video liegt in den Formaten mp4, webm und ogg vor, leider scheint es aber nur auf meinem Mac mit Safari richtig zu funktionieren. Ich habe hier etwas zusammengebastelt (siehe unten): Direkter Link führt zu Posterbild, Klick darauf öffnet separates Videofenster. Kann jemand den / die Fehler erkennen und mir bitte weiter helfen?
Vielen Dank,
Christoph
index.html:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Golden Wedding Anniversary</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script LANGUAGE="JavaScript">
function videofenster() {
fenster = window.open("video.html","PopUp","width=640,height=380,menubar=no,toolbar=no,scrollbars=no,status=no,resizable=no,location=no,hotkeys=no")
}
</script>
</head>
<body>
<div class="content">
<a href="JavaScript:videofenster()"><img border="0" src="poster.jpg"</a>
</div>
<body>
</html>
video.html:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>50</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body bgcolor="#0A2A12">
<div class="video">
<video controls="controls" autoplay="autoplay" width="640" height="360">
<source src="goldenanniversary.mp4" type="video/mp4" />
<source src="goldenanniversary.ogv" type="video/ogv" />
<source src="goldenanniversary.webm" type="video/webm" />
Ihr Browser unterstützt leider kein HTML5
</video>
</div>
<body>
</html>
style.css:
body {
font: 12px/1.5 "Lucida Grande", Lucida, Verdana, sans-serif;
padding: 0;
cursor: default;
margin: 0;
color: white;
}
.video {
margin: 0px auto;
text-align: left;
width: 640px;
top: 10px;
position: relative;
}
.content {
margin: 10px auto;
text-align: left;
width: 640px;
position: relative;
top: 0px;
}
Vielen Dank,
Christoph
index.html:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Golden Wedding Anniversary</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script LANGUAGE="JavaScript">
function videofenster() {
fenster = window.open("video.html","PopUp","width=640,height=380,menubar=no,toolbar=no,scrollbars=no,status=no,resizable=no,location=no,hotkeys=no")
}
</script>
</head>
<body>
<div class="content">
<a href="JavaScript:videofenster()"><img border="0" src="poster.jpg"</a>
</div>
<body>
</html>
video.html:
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>50</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
</head>
<body bgcolor="#0A2A12">
<div class="video">
<video controls="controls" autoplay="autoplay" width="640" height="360">
<source src="goldenanniversary.mp4" type="video/mp4" />
<source src="goldenanniversary.ogv" type="video/ogv" />
<source src="goldenanniversary.webm" type="video/webm" />
Ihr Browser unterstützt leider kein HTML5
</video>
</div>
<body>
</html>
style.css:
body {
font: 12px/1.5 "Lucida Grande", Lucida, Verdana, sans-serif;
padding: 0;
cursor: default;
margin: 0;
color: white;
}
.video {
margin: 0px auto;
text-align: left;
width: 640px;
top: 10px;
position: relative;
}
.content {
margin: 10px auto;
text-align: left;
width: 640px;
position: relative;
top: 0px;
}
