Videos in html einbinden

Syl · 29. Mai 2018

Gebe bei html <video src="pfad" type="video/mp4" controls></video> win und gebe hinter src die Verlinkung ein (gibt mir Dreamweaver mit Durchsuchen vor und ich brauche nur draufklicken)

Aber das Video wird nicht angezeigt.

Ich frage mich, ob ich mit dem Video ein weiteres class einrichten muss oder nochmal einen Link.

Außerdem nehme ich an, dass ich da noch irgendwas bei css eintrage sollte.

Html und css gehen ja hier Hand in Hand.

Denn wenn ich bei width und height die Werte verändere, dann verändert er oben das gesamte Bild von der Größe her.

Könnt ihr mir helfen?

Syl · 29. Mai 2018

html-seminar.de/woltlab/attachment/1568/

Da liegt der gesamte Inhalt der Site drin. Also die Verlinkung stimmt. Ich bin mir sicher, es hapertt an den Befehlen.

m.scatello · 29. Mai 2018

Kontrolliere den Pfad im Browser, den Dreamweaver (würg) eingefügt hat.

basti1012 · 29. Mai 2018

hier kannst du sehen das es so laufen sollte.

https://www.w3schools.com/tags…p?filename=tryhtml5_video

Vieleicht macht dreamweaver da irgendwas falsch . Poste doch mal deinen ganzen Code oder Link zur Seite

Syl · 29. Mai 2018

Wo sehe ich den diesen Browser in Dreamweaver?

Schaue eigentlich wie ein Schwein ins Uhrwerk, da absoluter Anfänger und quäle mich seit zwei Wochen damit rum die HP mit Inhalt zu füttern.

Deshalb bin ich weg von meinem MAC und sitze auf dem Balkon um jetzt wenigstens die Textseiten zu füllen.

Der Pfad, der hinter Videos/ steht lautet dann der Titel des Films.mp4 das der Rest der Befehlszeile. Ich habe extra ein Format gewählt, dass möglichst viele Explorer, Safari etc benutzen.

Cen Code inkl Link zur Seite in html und css seit ich nachher mal rein.

Ich setze mich dann morgen wieder mit frischem Kopf ans Problem.

Lieben Dank für Eure Hilfe.

Lupus_III · 29. Mai 2018

Also du hast deinen Film in einem Ordner namens Videos. Also muss der Pfad auf den Film auf jeden Fall mit <source src="videos/deinedatei.mp4" ....> beginnen. Poste doch mal den ganzen Code, wie basti1012 bereits vorgeschlagen hat, dann kann man dir sicher helfen.

Syl · 29. Mai 2018

Ich weiß jetzt nicht so genau, was mir Dreamweaver sagen will, aber mit einem mal funzt es.

Sieht halt ein bisschen groß aus, was nicht so gut ist, denn wes sollen noch 3 weitere Trailer da rein. Ein Bild sagt mehr als 100 Worte.

Ich gucke gleich nochmal in den Link von Basti1012, da war ja irgendetwas mit Größenangabe. Ihr seit echt klasse. Dankehtml-seminar.de/woltlab/attachment/1569/

html-seminar.de/woltlab/attachment/1570/

Syl · 29. Mai 2018

Gebe ich über meine Video html Zeile <video width="320" height="240" controls> zeigt er das Video nicht mehr an.

Syl · 29. Mai 2018

Ich überlege, ob ich nicht auf der selben Seite nochmals ne class anlege, also

und dann bei css

.video{

text-align: left;

width:320;

margin: 270px 280px;

height:240;

position:absolute;

top:1%;

left:0;

right:0;

overflow:scroll;

}

Würde das dann funktionieren?

Syl · 29. Mai 2018

So jetzt hier mal der html code:

HTML

<head>
<link rel="shortcut icon" href="#" />
<title>
Platura e.V.
</title>
<link rel="stylesheet" type="text/css" href="../css/filmfoyerbeiern.css"/>
<meta charset="UTF-8"/>
<lang="de-De"/>
</head>
<body>

<h5 class="Buerozeiten">Auf Grund der neuen Datenschutz-Grundverordnung, die ab 25.5.2018 in Kraft tritt, überarbeiten wir zur Zeit unsere HP!</h5>
<h5 class="filmfoyerbeiern">

<img src="../fonts/Foyer_Logo210410.jpg"/></ br>

<p>besteht seit 2010. Dieses Projekt von PLATURA e.v ermöglecht es uns Semiprofessioneel mit Profis
zusammen zu arbeiten, die sich unserer Projektgruppe angeschlossen haben.</p>
<p> Dies hat den Vorteil, dass Jugendlich hin und wieder mit Profis zusammenarbeitn können. Zu unserem Netzwerk zählen
u.a. Schauspieler/innen, Komponisten, Sänger/innen, Fotografen, Tonexperten, Kameraleute, Independentfilmer, Autoren/innen,
Drehbuchautoren/inn sowie eine Independentfilmerin.</p>
<p> All diese Personen sind im Bundesgebiet verteilt, kommen aber hauptsächlich aus Berlin und Brandenburg.
Wir haben bereits einige Projekte realisiert.</p>



<video src="../videos/Trailer_Tropfen_2014.mp4" type="video/mp4" controls></video>



</h5>

<aside>
<section class="top">
<a href="index.html">home</a>
</section>

<section class="header">
<img src="../bilder/Platura_e_V_logo.png" />
</section>
<section class="mainlinks">
<a href="news.html">news</a>
<a href="courses.html">seminare + workshops</a>
<a href="projects.html">projekte</a>
<a href="filmfoyerbeiern.html">film foyer berlin</a>
<a href="club.html">verein</a>
<a href="members.html">mitglieder</a>
<a href="partners.html">netztwerke + links</a>
<a href="referenzen.html">referenzen</a>
</section>
</aside>

<footer>
<a href="filmfoyerbeiern.html"</a>
</footer>
</body>
</html>

Alles anzeigen

Und der Css Code:

CSS

body{
background:#ffffff;
font-family:Arial;
}

aside{
width:15%;
height:auto;
text-transform:uppercase;
}

aside section{
margin-top:2%;
}

aside section.top{
background:#C31A36;
width:100%;
padding-top:5%;
padding-bottom:10%;

}
.Buerozeiten{
text-align: center;
width:calc(100% - 0%);
margin: 20px 80px;
height:auto;
position:absolute;
top:2%;
left:0;
right:0;

}

.filmfoyerbeiern{
text-align: left;
width:calc(100% - %);
margin: 270px 280px;
height:auto;
position:absolute;
top:1%;
left:0;
right:0;
overflow:scroll;


}
aside section.top a{
background:#ffffff;
font-size:2vh;
text-decoration:none;
color:#000000;
margin: 10% 0% 0% 0%;
display:block;
text-align:right;
}

aside section.header{
background:#ffffff;
width:669%;
margin-top:0%;
border-top: solid 4px #c31a36;
border-bottom: solid 32px #c31a36;
}

aside section.header img{
margin:1% 0% 0% 30%;
width:70%;
padding-bottom:1%;
}

aside section.mainlinks{
background:#C31A36;
width:100%;
margin-top:-2%;
padding-top:5%;
padding-bottom:12%;
}

aside section.mainlinks a{
background:#ffffff;
font-size:2vh;
text-decoration:none;
color:#000000;
margin: 10% 0% 0% 0%;
display:block;
text-align:right;
}


footer{
background:#ffffff;
border-top: solid 4px #C31A36;
text-align:right;
padding-top:0.5%;

}

footer a{
color:#C31A36;
margin-right:1.5%;
text-decoration:none;
font-size:3vh;
text-transform:uppercase;
font-weight:lighter;
}

Alles anzeigen

basti1012 · 29. Mai 2018

das würde funktionieren wenn das video laufen würde. Da es jetzt schon nicht läuft wird es mit Klasse auch nicht laufen .

Aber versuch ist es wert dann kannst du auch vernünftig die grösse und position ändern und so

Aber schick doch mal deinen ganzen code .Mal sehen was da falsch ist warum das nicht läuft.

Siehst du den wennigsten s den Player oder ist der erst gar nicht da ?

Syl · 29. Mai 2018

Das ist ganz merkwürdig. Ich bin bei Dreamweaver raus, hatte die Platte abgezogen und am PC die Texte bearbeitet. Danach an meinem Mac angeschlossen und da ging das Video mit einmal. Also es funzt. Nur wenn ich die Größe verändert, dann verändert sic auch das Ganze Textfeld. Deshalb kam ich auf die Idee ne neue Klasse anzulegen, weil ja noch drei Videos hinzukommen.

Ich probiere es jetzt einfach mal mit der neuen Klasse.

basti1012 · 29. Mai 2018

Ups was habe ich den da geschrieben .

Ja hier siehst du ja das es geht

*** Link entfernt, weil nicht mehr erreichbar ***

Zitat von Syl

Also es funzt. Nur wenn ich die Größe verändert, dann verändert sic auch das Ganze Textfeld. Deshalb kam ich auf die Idee ne neue Klasse anzulegen, weil ja noch drei Videos hinzukommen.

Ich probiere es jetzt einfach mal mit der neuen Klasse.

Ja dann musst du das alles responsiv machen und für die Handy Größen nimmst du @media queren

Syl · 29. Mai 2018

Hi, vielen Dank für Eure Hilfe. Ihr seit echt klasse.

Morgen erkläre ich Euch mal wieso ich so kämpfen musste.

Habt noch einen schönen Tag. LG aus Berlin

Syl · 30. Mai 2018

Die letzte Seite ist dran und jetzt will ich eine pdf Datei einfügen. Unsere Vereinssatzung- die ist llaaannnggg.

Ich gebe <a href="dann die Datei">PDF Datei<a> ein und dann verschiebt sic das ganze Design.

Meine Frage, muss ich da noch etwas in css eingeben?

{

pdf

}

oder so etwas?

basti1012 · 30. Mai 2018

dazu müsstest du malö deine ganzen Code posten weil so kann man dir nicht viel helfen

Syl · 30. Mai 2018

Sorry, hast Recht. Hier die html und die css

basti1012 · 30. Mai 2018

Kannst du mal den Code richtig posten ,damit kann ich so nix anfangen.Wir haben hier doch die Code Tags ,das hast du doch in post #10 auch richtig gemacht ..

Aber noch was ..

Ein pdf öffnet sich eigentlich in einen extra Fenster,sehen wir ja schön an deine Datei jetzt ..

Wie möchtest du die den da auf der Seite haben ,? Mit Iframe ??

Oder soll da nur ein Link rein ? , der zum Pdf weiterleitet??

Schick mal den Code richtig bitte.

Dann hast du,,

1. body auf position:relative ??

2. deine impressum Verlinkung ist hinter den </html>??

3. width:calc(100%-0%); Was soll den das ?? Außerdem kann das nicht gehen weil Links und Recht neben den Minus Platz sein muß.

4. width:669%; Tippfehler ??

Deine über Demensionale margin Angaben die kann man sicher auch anders Regeln.

Wie gesagt Schick mal Code ,mal sehen was sich machen läßt

Syl · 30. Mai 2018

Es soll lediglich ein Link rein.

Ich habe alles lediglich mit Inhalt gefüllt.

Das Design hat unsere zweite Vorsitzende entworfen (die macht CI beruflich)

und das Ganze umgesetzt in html und css hat jemand anderes (ein junger Mann e in der Ausbildung war

und selbige abgebrochen hat, weil diese Arbeit wohl doch nicht das richtige war) hat es umgesetzt.

Und ich stand da. War schier am verzweifeln. Drei Tage habe ich rumprobiert.

Nix ging. Nix funktionierte. Ist mit 61 Jahren auch nicht mehr so easy. Mir schwirrt der Kopf.

Bis ich schließlich den jungen Mann erneut kontaktiert habe und der mir dann

den css Code korrigiert und mir ab und zu auf die Sprünge geholfen hat.

Ich kopieren die Codes mal hier rein:

html.

<!Doctype HTML>

<head>

<title>

Platura e.V.

</title>

<lang="de-De"/>

</head>

<body>

<h5 class="Buerozeiten">Auf Grund der neuen Datenschutz-Grundverordnung, die ab 25.5.2018 in Kraft tritt, überarbeiten wir zur Zeit unsere HP!</h5>

HIER SOLL DIE VEREINSSATZUNG ALS PDF REIN!!!!!!!!!

</h5>

<aside>

</section>

</section>

<a href="courses.html">seminare + workshops</a>

<a href="projects.html">projekte</a>

<a href="filmfoyerbeiern.html">film foyer berlin</a>

<a href="club.html">verein</a>

<a href="members.html">mitglieder</a>

<a href="partners.html">netztwerke + links</a>

<a href="referenzen.html">referenzen</a>

</section>

</aside>

<a href="impressum.html">Satzung + Impressum</a>

</footer>

</body>

</html>

css

*{

box-sizing:border-box;

margin:0;

padding:0;

}

body{

background:#ffffff;

font-family:Arial;

position:relative;

}

aside{

width:15%;

height:auto;

text-transform:uppercase;

}

aside section{

margin-top:2%;

}

aside section.top{

background:#C31A36;

width:calc(100% - 0%);

padding:5% 0 10% 0;

}

.Buerozeiten{

text-align: center;

width:calc(100% - 0%);

margin: 20px 80px;

height:auto;

position:absolute;

top:2%;

left:0;

right:0;

}

.impressum{

text-align: left;

width:calc(100% - %);

margin: 280px 260px;

height:280px;

position:absolute;

top:2%;

left:0;

right:0;

overflow: scroll

}

aside section.top a{

background:#ffffff;

font-size:2vh;

text-decoration:none;

color:#000000;

margin: 10% auto;

display:block;

text-align:right;

}

aside section.header{

background:#ffffff;

width:669%;

margin-top:0;

border-top: solid 4px #c31a36;

border-bottom: solid 32px #c31a36;

}

aside section.header img{

margin:1% 0 0 30%;

width:calc(100% - 30%);

padding-bottom:1%;

}

aside section.mainlinks{

background:#C31A36;

width:calc(100% - 0%);

margin-top:-2%;

padding-top:5%;

padding-bottom:12%;

}

aside section.mainlinks a{

background:#ffffff;

font-size:2vh;

text-decoration:none;

color:#000000;

margin: 10% 0 0 0;

display:block;

text-align:right;

}

footer{

background:#ffffff;

border-top: solid 4px #C31A36;

text-align:right;

padding-top:0.5%;

}

footer a{

color:#C31A36;

margin-right:1.5%;

text-decoration:none;

font-size:3vh;

text-transform: uppercase;

font-weight:lighter;

}

basti1012 · 30. Mai 2018

sag mal hast du ein Bild wie das aussehen soll wenn es fertig ist .Mit die ganzen Angaben kann ich nur schätzen. Was für ein Bild soll da oben rein ? Wie gross ist das ,weil da keine größen Angaben stehen ?

EDIT img Werte habe ich jetzt doch gefunden

Videos in html einbinden

Jetzt mitmachen!

Teilen