HTML 5 Video nacheinander laden

Hallo Leute,

Ich habe eine Seite geschrieben, welche 5 videos direkt untereinander abspielen soll.

-Klappt wunderbar ich habe dafür den HTML 5 Tag benutzt:

<video class="vid" autoplay="true" loop>
   <source src="/vids/1.webm" type="video/webm" /> 
   <source src="/vids/1.mp4" type="video/mp4" /> 
   <source src="/vids/1.ogv" type="video/ogg" /> 
</video>

Doch eine Sache stört mich, sobald man die Seite aufruft lädt der direkt alle videos und erst dann fängt er an das erste abzuspielen.

Ich würde gerne, dass er erst das erste Video lädt - abspielt wenns fertig ist und dann mit dem zweiten weiter macht.

Wie kann ich das so einrichten?

LG

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

29.07.2014, 13:55

Für die Videos, die nicht direkt geladen werden sollen, verwendest du das Attribut "preload='none'". Das "autoplay"-Attribut muss dann natürlich auch raus. Das "controls"-Attribut rein, damit der Besucher das Video auch manuell starten kann.

<video class="vid" preload="none" controls  loop>
   <source src="/vids/1.webm" type="video/webm" /> 
   <source src="/vids/1.mp4" type="video/mp4" /> 
   <source src="/vids/1.ogv" type="video/ogg" /> 
</video>

javinator

Beitragsersteller

12.08.2014, 14:00

Sorry war lange nicht mehr in GF...

Super dann kann ich einfach mittels javascript das danach laden :) Danke dir

29.07.2014, 11:29

Indem Du etwas JavaScript verwendest, um die gewünschte Funktion zu erreichen. Google mal nach Beispielen, Du bist sicher nicht der erste, der sowas versucht. Suchstring Vorschlag "HTML 5 Video Playlist"

Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites

Ähnliche Beiträge

HTML/CSS iPhone Video Tag?

wie verhindere ich das der Mobile Safari Browser automatisch in den Fullscreen Mode geht um ein video abzuspielen?

Habe schon sehr vieles ausprobiert auf Stackoverflow.

und warum funktioniert es manchmal nicht ein Iframe Youtube video einzubetten ?
Liegt es an der Musik oder an der länge des videos ?

HTML Objekte nacheinander anzeigen?

Wie kann ich 2 HTML Objekte am besten nacheinander anzeigen. Also das erste soll ca 5 Sekunden angezeigt werden und dann ein Video (also der HTML-Code vom Video). Geht das irgendwie. LG

HTML: Videos nebeneinander einbetten! Wie?!

Hallo, ich möchte auf meinem eigenem Blog mehrere Youtube Videos statt untereinander, nebeneinander einbetten, sodass die Videos dann auch nebeneinander online erscheinen! Ich habe mich schon im Internet informiert, bisher konnte ich nur das hier auffassen:

eine Art Code für den "nebeneinander-Effekt"... aber wo genau pflanz ich den jetzt rein? Vor dem 1. video code, nach dem Video code? Keine ahnung! unten stehen meine Video Codes, könnt ihr die bitte kopieren und mir den richtigen Code hinschreiben? Wäre nett!

Grüße, Allicious ;-)

Mehrere Videos nacheinander

Gibt es eine App mit der man mehrere Videos hintereinander machen kann sodass es ein Video ist? Für iPhone

Fernsehn spielt keine Filme von USB-Stick ab!

Hallo Liebe gutefrage.net Community!

Ich hab das Problem das mein Fernsehen "Samsung" keine Video Datei abspielt auf mein Laptop kann ich die Aufnahmen wunderbar sehen! Was kann ich dagegen tun? Oder besser gesagt was lässt sich da machen das ich die Videos auf mein Fernsehen angucken kann?!

Danke im voraus!! :D

Wie kann ich Videos von html basierten websiten runterladen?

wenn ich ein rechtsklick auf das video mache kommt nur PLAYERJS 9.83.3

Ich habe versucht diese video mit Video Downloader Professional und dem vlc media player zu downloaden, dies geht aber nicht.

Wie kann ich außer dem Videos von Facebook runterladen?

Digitaler Bilderrahmen, der Powerpoint abspielt?

Hallo zusammen

Für einen Kunden bauen wir einen Messestand, der mehrere digitale Bilderrähmen integriert hat.

Der Kunde wünscht sich nun, dass er Bilder und Videos nacheinander abspielen kann (automatisch und in Endlosschlaufe). Das heisst, es kommen verschiedene Bilder und dazwischen Videos, welche sich automatisch abspielen.

Alternativ könnte eine Powerpoint-Präsi automatisch abgespielt werden (so wäre das Video-Bilder-Video-Bilder-Problem auch gelöst).

Ich finde allerdings kein Gerät, welches das kann... Wer kann mir helfen??

Herzlichen Dank für eure Antworten und ein schönes Wochenende.

Beste Grüsse, Dany

4 divs nebeneinander anordnen

Hallo, ich habe 4 divs, die in einem großen div direkt nebeneinander liegen sollen.

ich hab erstmal ohne stylesheet angefangen:D

http://finnzentgraf.fi.funpic.de/Untitled-1.html

warum leigen die alle untereinander, und sogar außerhalb des großen divs?

bild von youtube video runterladen?

Kann ich irgendwie ein Bild aus einem beliebigen video speichern (die videos besteht meist nur aus 1 Bild) Habe es mit einem HTML viewer versucht aber bin gescheitert. Habe ein Samsung Android gerät auf dem ich das hinkriegen möchte.Am PC ist das so viel einfacher :D

Website lädt Datei nicht hoch, warum?

Moin, kennt sich vielleicht jemand mit PHP und Html aus und weiß warum beim Upload der Datei nicht das Script "upload.php" ausgeführt wird? Versuche mich gerade beim Scripten, stehe allerdings gerade voll auf dem Schlauch... Danke!

<?php include 'header.php'; ?>
<?php
if(!isset($_SESSION['email'])){
  header('location:login.php');
  $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
}
 ?>
      <div class="breadcrumb">
        <div class="container">
            <a class="breadcrumb-item" href="index.php">Home</a>
            <span class="breadcrumb-item active">Welecome <?php echo $_SESSION['email'] ?></span>
            <span class="breadcrumb-item active">Upload Video</span>
        </div>
    </div>
    <section class="static about-sec">
        <div class="container">
            <h1>Upload Video</h1>
            <div class="form">
                <form class="" action="videoUpload.php" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <input type="hidden" name="id" value="">
                            <label for="name">Name of Video:</label>
                            <input type="text" name="name" value="" placeholder="Fantasy World" required>
                            <label for="video_url">Video URL</label>
                            <input type="file" name="video_url" required>
                            <label for="description">Description</label>
                            <input type="text" name="description" value="" placeholder="">
                            <label for="category">Category</label>
                            <select name="category">
                              <option value="Classic">Classic</option>
                              <option value="Adventerous">Adventerous</option>
                              <option value="Nature">Nature</option>
                              <option value="Others">Others</option>
                            </select>
                          </div>
                        </div>
							<div class="col-lg-8 col-md-12">
							<form action="upload.php" method="post" enctype="multipart/form-data">
							<input type="submit" class="btn black" value="Upload Image" name="submit">
							</form>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>


    <?php include 'footer.php';?>

OBS - Videos nicht direkt abspielen?

Hallo,

gibt es eine Möglichkeit in OBS die eingefügten Videos beim Start der Szene nicht direkt abzuspielen?

LG

HTML Code für Weiterleitung nachdem schauen eines Videos?

Also ich möchte in meine Website ein Video einbauen das dich erst nachdem man es ganz zu Ende geguckt hat ohne zu Skippen automatisch auf eine andere Website weitergeleitet wird kennt jemand den HTML Code dafür?

CSS Buttons verschieben?

Hallo, ich möchte auf meiner Website, dass die Buttons untereinander und nicht nebeneinander angezeigt werden wie hier:

habe schon einiges probiert aber nichts funktioniert richtig...

mein html Code ist das hier:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="style_bypass.css" rel="stylesheet">
    <title>Bypass</title>
</head>
<body id="links">


<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Set Lockscreen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Einstellungen</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Test Video</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Galaxy Store</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Google Quick Search</button></a>
<a href=""><button style="--color:#00ccff;--border:2px;--slant:.5em">Youtube</button></a>



</body>

Und mein CSS Code der hier:

button {
    --border: 5px;    /* the border width */
    --slant: 0.7em;   /* control the slanted corners */
    --color: #37E8FC; /* the color */
    
    font-size: 35px;
    padding: 0.4em 1.2em;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: var(--color);
    background: 
       linear-gradient(to bottom left,var(--color)  50%,#0000 50.1%) top right,
       linear-gradient(to top   right,var(--color)  50%,#0000 50.1%) bottom left;
    background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
    background-repeat: no-repeat;
    box-shadow:
      0 0 0 200px inset var(--s,#0000),
      0 0 0 var(--border) inset var(--color);
    clip-path: 
        polygon(0 0, calc(100% - var(--slant)) 0, 100% var(--slant),
                100% 100%, var(--slant) 100%,0 calc(100% - var(--slant))
               );
    transition: color var(--t,0.3s), background-size 0.3s;
  }
  button:hover,
  button:active{
    background-size: 100% 100%;
    color: #fff;
    --t: 0.2s 0.1s;
  }
  button:focus-visible {
    outline-offset: calc(-1*var(--border));
    outline: var(--border) solid #000a;
  }
  button:active {
    --s: #0005;
    transition: none;
  }
  
  
  
  body#links {
    display:grid;
    grid-auto-flow:column;
    grid-gap:px;
    place-content:center;
    margin:0;
    height:100vh;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  }

Was genau muss ich in der CSS Datei bearbeiten, dass die Buttons nicht nebeneinander sondern untereinander angezeigt werden?

Youtube video einbetten?

Hallo, ich möchte in meiner HTML-Datei gerne ein Youtube-Video einbetten. Mit dem normalen Einbettungscode von Youtube und dem Code vom Custom Video Embed Generator wird nur eine Fehlermeldung von Youtube angezeigt, dass das Video nicht angezeigt werden kann und man es auf dem Anbieter selber abrufen soll. Ich bin mir nicht sicher, glaube aber dass es an den Voreinstellungen des Videos liegt, andere Videos werden nämlich Problemlos angezeigt. Müsste eine Einbettung nicht trotzdem Möglich sein? Auf https://www.classynemesis.com/projects/ytembed// kann man die Videovorschau nämlich auf der Seite selber anschauen...

Danke im Vorraus!

Was möchtest Du wissen?

Deine Frage stellen

gf-shortened-block.is-short { max-height: none !important; } gf-shortened-block.is-short::after { display: none !important; } body { font-family: 'Roboto',sans-serif !important; } h1,h2,h3,h4,h5,h6 { font-family: 'Roboto Slab',serif !important; }