• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Video Livestream lässt sich nicht in der Größe verändern

Status
Für weitere Antworten geschlossen.
D

dykta

Neues Mitglied
Hallo,
ich baue gerade eine relativ einfache Website für eine Kunstausstellung,
aber stehe vor einem kleinen Problem.
Ich möchte auf einem 17Zoll 4:3 TFT Monitor eine Website mit 5 Video Livestreams laufen lassen,
aber diese lassen sich von der Größe her nicht anpassen.
Ich hab schon einige Möglichkeiten probiert, aber egal was ich eingebe, sie bleiben in der gleichen Größe.
Mir wurde geraten, dass ganze ohne css aufzubauen, da es ja eine relativ simple Seite ist,
keine ahnung, ob der Fehler darin liegt.
Ich hoffe mir kann jemand weiterhelfen.

Hier mal der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>work/life balance</title>
<style>
*body {



}

#div1{
position: absolute;
left: 0px;
top: -15px;
width: 300px;
height: auto;
}


#div2{
position: absolute;
right: 0px;
top: 0px;
width: 300px;
height: auto;



}
#div3 {
position: absolute;
left: 0px;
bottom: 0px;
width: 300px;
height: auto;


}

#div4 {
position: absolute;
right: 0px;
bottom: 0px;
width: 300px;
height: auto;
}



#div5 {
position: absolute;
left: 350px;
top: 100px;
width: 300px;
height: auto;

}

</style>
</head>
<body>

<div id= "div1">
<img id="image0" src="http://212.214.80.169:80/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Sweden, region Vasterbottens Lan, Insjon">
</div>

<div id= "div2">
<img id="image1" src="http://131.155.61.62:80/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Netherlands, region Noord-Brabant, Eindhoven">
</div>

<div id= "div3">
<img id="image2" src="http://123.111.182.60:8080/cam_1.cgi" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Korea, Republic Of, region Seoul-T'Ukpyolsi, Seoul">
</div>

<div id= "div4">

<img id="image3" src="http://93.87.72.254:8090/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Serbia, region Vojvodina, Novi Pazar">
</div>

<div id= "div5">
<img id="image4" src="http://199.89.180.249:8080/?action=stream" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in United States, region Maryland, Annapolis">
</div>


</body>
</html>
 
Werbung:
dykta schrieb:
Hallo,
ich baue gerade eine relativ einfache Website für eine Kunstausstellung,
aber stehe vor einem kleinen Problem.
Ich möchte auf einem 17Zoll 4:3 TFT Monitor eine Website mit 5 Video Livestreams laufen lassen,
aber diese lassen sich von der Größe her nicht anpassen.
Ich hab schon einige Möglichkeiten probiert, aber egal was ich eingebe, sie bleiben in der gleichen Größe.
Mir wurde geraten, dass ganze ohne css aufzubauen, da es ja eine relativ simple Seite ist,
keine ahnung, ob der Fehler darin liegt.
Ich hoffe mir kann jemand weiterhelfen.

Hier mal der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>work/life balance</title>
<style>
*body {



}

#div1{
position: absolute;
left: 0px;
top: -15px;
width: 300px;
height: auto;
}


#div2{
position: absolute;
right: 0px;
top: 0px;
width: 300px;
height: auto;



}
#div3 {
position: absolute;
left: 0px;
bottom: 0px;
width: 300px;
height: auto;


}

#div4 {
position: absolute;
right: 0px;
bottom: 0px;
width: 300px;
height: auto;
}



#div5 {
position: absolute;
left: 350px;
top: 100px;
width: 300px;
height: auto;

}

</style>
</head>
<body>

<div id= "div1">
<img id="image0" src="http://212.214.80.169:80/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Sweden, region Vasterbottens Lan, Insjon">
</div>

<div id= "div2">
<img id="image1" src="http://131.155.61.62:80/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Netherlands, region Noord-Brabant, Eindhoven">
</div>

<div id= "div3">
<img id="image2" src="http://123.111.182.60:8080/cam_1.cgi" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Korea, Republic Of, region Seoul-T'Ukpyolsi, Seoul">
</div>

<div id= "div4">

<img id="image3" src="http://93.87.72.254:8090/mjpg/video.mjpg?COUNTER" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in Serbia, region Vojvodina, Novi Pazar">
</div>

<div id= "div5">
<img id="image4" src="http://199.89.180.249:8080/?action=stream" class="img-responsive img-rounded detailimage" alt="" title="Click here to enter the camera located in United States, region Maryland, Annapolis">
</div>


</body>
</html>
Zum Vergrößern anklicken....

1. hat das nichts mit Videos zu tun.
2. img {width:100%}
 
danke für die schnelle antwort
das hatte ich auch schon probiert, aber ich würde gerne jedem video eine eigene größe zuweisen.
mit img {width:100%} sind die beiden linken videos gut von der größe, aber die beiden rechten (div3 & div4)
viel zu groß und überschneiden sich extrem.
 
Werbung:
Das liegt aber dann wohl eher an den komische Positionsangaben.
Sieh dir das ganze doch mal in den DevTools deines Browsers an, dann sollte schnell klar sein was das Problem verursacht.

Denn, auch wenn ich es "nachbastle" ist mir nicht klar wie es überhaupt aussehen soll:
https://jsfiddle.net/yb9m3jgj/
 
Sorry, dass ich gerade so auf dem schlauch stehe. Bin nicht so html affin und das Problem ist mir irgendwie nicht klar, aber ich brauche doch die poisitionsangaben, damit die videos an der richtigen stelle der seite sind.
Muss ich mit margin vielleicht die größe/auflösung angeben.
Hier mal eine kleine skizze, wie es aussehen sollte.
IMG_3773.JPG
 
dykta schrieb:
Sorry, dass ich gerade so auf dem schlauch stehe. Bin nicht so html affin und das Problem ist mir irgendwie nicht klar, aber ich brauche doch die poisitionsangaben, damit die videos an der richtigen stelle der seite sind.
Muss ich mit margin vielleicht die größe/auflösung angeben.
Hier mal eine kleine skizze, wie es aussehen sollte.
Anhang anzeigen 4528
Zum Vergrößern anklicken....

Die Belehrung bzgl. schlechtem Stil etc. lass ich mal außen vor. Hier eine funktionierende, auflösungsunabhängige, Lösung:
Code: 
div {position:absolute; width:50%; height:50%;}
#div1 {top:0; left:0;}
#div2 {top:0; right:0;}
#div3 {bottom:0; left:0;}
#div4 {bottom:0; right:0;}
#div5 {top:50%; left:50%; transform:translateX(-50%) translateY(-50%);}
img {width:100%; height:100%; object-fit:cover;}

https://jsfiddle.net/yb9m3jgj/1/
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben