HTML Videos untereinander setzten?

Bei mir ist das Problem, dass sich dann immer wieder durch ein neues <article> ein neuer Kasten bildet und wenn ich die 3 Videos mit <source src="" type="" controls> versuche zu erstellen, dass dann nur noch das erste Sichtbar ist und nicht funktioniert...

Bild zum Beitrag

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

korbi27

21.09.2019, 19:53

Guten Tag.

Sie müssen für jedes einzelne Video ein <Video> tag öffnen. Ansonsten wird auch immer nur das erste angezeigt werden, glaube ich zumindest.

Was die Funktionstüchtigkeit angeht: Probieren Sie mal, das Attribut controls in das Video Tag zu setzen!

Woher ich das weiß:Hobby – Tägliche kleinere Webprojekte

verreisterNutzer

21.09.2019, 22:13

Kannst Du mir es eventuell etwas beschreiben wie, oder einen Link schicken? Weil ich bin noch nicht ganz fortgeschritten😁

korbi27

21.09.2019, 22:36

@verreisterNutzer

Also, statt einem <video> machst du daraus 3:

<video controls>
<source src="vd.mp4" type="video/mp4">
</video>

<video controls>
<source src="vd1.mp4" type="video/mp4">
</video>

<video controls>
<source src="vd2.mp4" type="video/mp4">
</video>

Den Alternativtext falls das Video nicht angezeigt werden kann fügst du einfach darunter hinzu...

Die Benutzung von <source> ist übrigens nicht dazu gedacht, mehrere Videos nacheinander einzubinden, sondern mehrere Formate des Videos (.mp4, .wmv, .avi) anzugeben. Das hat mit der Verwendung verschiedener Browser zu tun, da nicht alle Browser die selben Dateiformate unterstützen. Unterstützt ein Browser beispielsweise keine .mp4 Formate (ungewöhnlich) hat er hier noch eine erweiterte Auswahl, ehe der Alternativtext ausgegeben wird.

hboff

21.09.2019, 22:34

<video>

</video>

<video>

</video>

Einfach den Video tag mehrmals schreiben.

https://www.w3schools.com/html/html5_video.asp

verreisterNutzer

21.09.2019, 23:13

Dann entsteht komischer Weise jedes mal ein neuer Kasten lol

oder es funktioniert gar nicht mehr keine Ahnung gerade

hboff

21.09.2019, 23:52

@verreisterNutzer

Dann solltest du mehr Code zeigen, mit so wenig kann man nix anfangen. Hellsehen kann leider keiner von uns =)

Aber keine Sorge dein Problem wird zu lösen sein ;)

verreisterNutzer

22.09.2019, 00:00

@hboff

Ich werde dir (lol eben 00:00 geworden xD) (also heute) einen Link zum Code schicken😁Wenn der Fehler denn nicht davor schon gelöst wurde ^^

korbi27

22.09.2019, 00:34

@verreisterNutzer

Was den Kasteneffekt angeht, hast du doch sicherlich was im CSS für video festgelegt?

Hallo,

ich habe noch einmal eine Frage. Wie schaffe ich es, dass ein Text in HTML neben meinem Video ist?

Bisher habe ich das:

<video width="420" height="280" controls>
  <source src="katzenvideo.mp4" type="video/mp4">
</video>
<p style="float: right;">Hier ist dann der Text der neben dem Video erscheinen soll und nicht darunter.</p>
<div style="clear: both;"></div>

Jetzt ist der Text allerdings zu weit rechts. Ich hätte gerne, dass der direkt neben dem Video ist.

Was muss ich ändern? Kennt jemand den Code?

Danke im Voraus. :)

...zur Frage

Wie erstelle ich eine Seite,wo das Audiodatei automatisch spielt?

Hallo Leute,

Zurzeit beschäftige ich mich mit Javascript und möchte,dass bei einer Seite die Audiodatei automatisch anfängt zu spielen,sobald ich die seite öffne.

Das ist mein Javascript Code:

function ton() {

var audio=document.getElementById("audio");

audio.innerHTML='<audio autoplay><source src="WIN_20211211_16_26_17_Pro.mp4" type="audio/mpeg"/></audio>';

}

</script>

...zur Frage

Javascript: Audio automatisch abspielen?

Hallo

wie schaffe ich es, dass die audio datei versteckt und automatisch läuft ohne das der Benutzer auf play klicken muss?

Danke

</audio>

Ich habe es mit dem hier probiert funktioniert allerdings nicht

...zur Frage

HTML BILD HOCHLADEN UND ANZEIGEN LASSEN?

Hi.

Ich möchte eine Seite mit HTML erstellen, welche einen UPLOAD Button enthält, der das hochgeladene Bild unendlich oft (oder 1000 mal) untereinander anzeigt.

Mein Code im Moment ist dieser.

Mein momentanes Problem: Ich hab keine Ahnung wie ich das Bild unten anzeigen lasse :/.

Danke im Vorraus

<html>
    <head>
        <title>INFINITIZER</title>
        <meta></meta>
    </head>
    <body>
    
        <div id="header">
            <hr color="red"/>
            <center>
                <h1><font color="red" face="Impact">INFINITIZER</font></h1>
            <hr color="red"/>
            </center>
        </div>
    
    
        <div id="upload">
            <center>
                
                    <form method="post" enctype="multipart/form-data">
                        <label>CHOOSE A PICTURE
                            <input name="datei" type="file" size="50" accept="video/*,image/*">&nbsp;
                        </label>&nbsp;&nbsp;
                        
                        <button>SEND</button>
                    </form>
                    
            </center>
        </div>
        
        
        <div id="pic">
            <img src="datei" alt="No picture">
        </div>
        
    </body>

</html>

...zur Frage

Eine Pornoseite machen?

Hallo bin M18 und Hobbyprogrammierer.

Ich kenne mich gut mit HTML und CSS aus.

Mit Java einigermaßen.

Mit PHP auch einigermaßen.

Ich habe vor, eine Pornoseite zu programmieren. Aber ohne eine Datenbank. Das heißt, man muss sich nicht einloggen oder man kann nichts hochladen.

Das erleichtert mir den Prozess richtig.

Ich muss nur HTML, CSS und Java benutzen.

Die Videos würde ich dann per E-Mail geschickt bekommen wollen und ich integriere die Videos in den Code.

Ist das eine gute Idee?

Ich stelle diese Frage, weil am Ende des Tages die Benutzer da sein sollen. Wärt ihr dabei?

Es ist wirklich keine Spaßfrage. Ich habe schon eine Startseite mit Lückenfüllervideos von Autos.

...zur Frage

Was findet ihr besser, um programmieren zu lernen?

Findet ihr Bücher gut oder lieber YouTube Videos und Google?

...zur Frage

Html und Javascritp Gif ein und ausblenden lassen?

Ich möchte mit Html und Javascript ein Gif per button einfügen lassen. Ich habe schon einiges ausprobiert aber es funktioniert nicht, ich würde mich gerne über Hilfe freuen. (Die Aufgabe war es einen Kopfrechentrainer zu programmieren, als Zusatz ein Bild einfügen,...)

<html>
	<head>
		<title> Kopfrechentrainer Ultimate </title>
	</head>
	<body>
<script language=javascript>


{	var a;
	var b;
	var c;
	var d;
	var f=0;
	var r=0;
	var x;
}	
	function random()
	
{
	a=Math.floor(Math.random()*90)+10;
	document.rechnen.eingabe1.value=a;
	
	b=Math.floor(Math.random()*9)+1;
	document.rechnen.eingabe2.value=b;	
}


	function kontrolle()
{
	c=document.rechnen.vergleich.value;
	if(a*b==c){r++;document.rechnen.richtig.value=""+r}
	if(a*b!=c){f++;document.rechnen.falsch.value=""+f}


	if(r+f==50)
{
	if(r==0){alert('soos')}
	else if(0<r<=10){alert('saas')}
	else if(10<r<=20){alert('sees')}
	else if(20<r<=30){alert('siis')}
	else if(30<r<=40){alert('suus')}
	else if(40<r<=50){alert('fiif')}
}


}
	function zurück()
{
	document.rechnen.richtig.value=""
	document.rechnen.falsch.value=""
}


	function shutdown()
{
	window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
}


	function bka()
{
   	var audio = new Audio('sirene.mp3');
   	audio.play();


	document.getElementById("bkaf").style.display="none";
}


</script>








	
		<font color ="red"> <h2 align = center>  Kopfrechentrainer Ultimate </h2> </font>
		<br>
		<p align = center> <b>  
		Du kannst hier Multiplikationsaufgaben üben. <br>
		Beim Klicken auf den Button werden dir dir nacheinander 50 Aufgaben gestellt.
		</p> </b>
		<br>
		<br>
		<h1 align = center> Bereit? </h1>
		<br>
	<form name="rechnen">
		<input type=button value="Start" onclick=random()>
		<br> <br>
		<INPUT type=text name=eingabe1 value=""> *
		<INPUT type=text name=eingabe2 value=""> =
		<INPUT type=text name=vergleich value="">
		
			<input type=button value="Kontrolle" onclick=kontrolle()>
			<input type=button value="Zurücksetzen" onclick=zurück()>
				
		<br> <br> 
	<p align = center> <b>
		Richtig gelöst Falsch gelöst
	</b> 
		<br> <br>
		<INPUT type=text name=richtig value=""> 
		<INPUT type=text name=falsch value="">
	<br> <br>
		<input type=button value="shutdown" onclick=shutdown()>
	<br> <br>
		<input type=button value="BKA Modus" onclick=bka()>
		
		<audio autoplay>
 		 <source src="sirene.mp3" type="audio/mpeg">
		</audio>
		<br>
	<div id="bkaf">
	<img id="blaulicht" src="blaulicht.gif">	
	</div>


	</form>










	</body>
</html>

...zur Frage

Größe für Videos automatisch auf Geräte anpassen HTML?

Hi,

ich programmiere grade an Videos also wie ich diese anzeigen kann ohne YouTube. Und da es komisch auf dem Handy aussieht wollte ich fragen, ob es eine Möglichkeit gibt, dass sich die Größe des Videos automatisch auf das gerät anpasst?

...zur Frage

HTML & CSS Button-breite anpassen?

Hey, im voraus möchte ich schonmal erwähnen das ich hier absoluter Neuling bin.

Seit ein paar Tagen "spiele" ich etwas mit HTML und CSS herum, ich hab einen Button eingefügt dem ich ein img hinzugefügt habe, nun bekomme ich die Breite des Buttons aber nicht angepasst, entweder es ändert sich garnichts oder der Button bedeckt die vollständige Seite.

Ist es überhaupt möglich den Buttn in % zu skalieren oder muss ich mit px arbeiten?

Hoffe mich kann jemand aufklären :)

Habe mir das ganze nochmal angeschaut, macht den Eindruck als würde "width" vollständig ignoriert. Wenn ich "height" verändere passt sich "width" automatisch an um die Proportionen beizubehalten.

...zur Frage

CSS/Javascript: mit :hover ein anderes Element sichtbar machen?

Hallo ihr lieben,

ich hänge gerade an einem Programmierproblem. Ich möchte versuchen Banner Mapping zu programmieren und finde meinen (vermutlich dummen kleinen)Fehler nicht.

Hier der "bisherige" Code:

<html>

jQuery('#hoverdiv').hoverdiv(

function() {$('#Kindelement').show();},

function() {$('#Kindelement').hide();}

);

</script>

<style>

.hover

{

background-color: red;

z-index: 1;

}

.Kindelement

{

position: absolute;

top:0;

background-color: blue;

-moz-transition: all 0.5s ease 0s;

-webkit-transition: all 0.5s ease 0s;

transition: all 0.5s ease 0s;

opacity: 0;

z-index: 2;

}

.hoverdiv

{

position: relative;

}

.hoverdiv:hover + .Kindelement

{

opacity: 1;

}

</style>

</head>

<body>

<div id="hoverdiv" style="background: grey;

color: white;

border-radius: 50px !important;

font-family: "Helvetica Neue",

Arial, sans-serif !important;

float: none !important;" ;>

<div id="Kindelement"

style="color: white;

background: grey;

position: absolute;

top: 770px !important;

opacity: 0;">

</div>

</body>

</html>

Habe sehr viel probiert, aber finde keine Lösung in Google :( bei <a> ist der link natprlich ein richtiger link - nur aus Datenschutz zensiert :)

Es soll auf das hoverdiv gehovert werden und dadurch das Kindelement angezeigt werden - wenn man wieder mit der Maus davon runter geht soll es wieder verschwinden..

Dankeschön schonmal!

...zur Frage

Frage zu CSS background-image?

Hallo Gutefrage,

links mein Code, rechts wie es aussehen soll:

Der Bildschirm soll an den Bild-Rand abgeschnitten werden.

Ich habe es versucht, indem ich die with verkleinert habe, dann wird das Bilder aber nur rechts abgeschnitten.

So sieht das Bild bei mir aus:

Also es wir rechts abgeschnitten, wenn ich die width verkleinere. Kann ich das irgendwie umdrehen, dass es links abgeschnitten wird und trotzdem links ab Bild-Rand bleibt?

...zur Frage

PDF Datei auf Website zum Download bereitstellen?

Hallo zusammen,

ich möchte auf meiner Website PDF Dateien zum Download anbieten. Der Nutzer soll also auf ein Img oder einen Button klicken und die entsprechende Datei downloaden.

Wie kann ich das in HTML, CSS, JS und oder PHP umsetzen?

Vielen Dank!

...zur Frage

CSS: Items untereinander sortieren?

Hallo zusammen,

ich brauche etwas Hilfe mit CSS. Ich habe mir mit HTML ein Div erstellt, und ein paar Social Media Buttons reingepackt:

<div class="social-media-buttons">
<a class="btn" href="https://github.com/dominikdev-m">
<i class="fab fa-github"></i>
</a>
<a class="btn" href="https://twitter.com/DominikMiskovi7">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="https://instagram.com/dominik_rxb">
<i class="fab fa-instagram"></i>
</a>
</div>

Dann habe ich mit CSS versucht diese Social Media Buttons untereinander zu sortieren, falls der Nutzer auf einem Gerät ist das maximal 400 Pixel breit ist:

@media only screen and (max-width: 400px) {
    .social-media-buttons {         display: inline-block;     }

Leider funktioniert der CSS Code nicht, die Buttons werden irgendwie komisch sortiert auf dem Smartphone und nicht untereinander. Könnt ihr mir sagen was ich falsch gemacht habe?

Danke im Voraus.

LG, Dominik

...zur Frage

Text unsichtbar html css?

Hi, ich prgrammiere eine website in html und css.

ich habe einen container und eine box erstellt und will dass man nur das hintergundbilt und ein text sieht sieht und wenn man drauf geht mit :hover dass dann ein andere text erscheint. wäre dass möglich?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen