Mehrere Videos nach aufruf (link) an gleicher stelle in einer Seite abspielen?

  • Hallo,


    bin gerade dabei mir das WebDesignen beizubringen. Habe mir bisher Grundwissen von HTML, CSS und JavaScript angeeignet.


    Als Trainingsaufgabe habe ich mir nun das erstellen einer HTML5 Seite mit 2 Spalten und Banner darüber verordnet, aufbau und funktion sollte wie folgt ausschauen:


    a)Banner oben (erledigt)
    b)einen Navigationsbereich in der linke spalte mit den Links zu den Videodateien.(habe ich in einen div container gepackt)
    c)in der rechten spalte sollen dann die Videos nach klick auf den jeweiligen link abgespielt werden (immer am gleichen platz, das video soll quasi ausgetauscht werden).
    Habe erst mal auch eine div container erstellt, in dem ich vorab mit dem <video> tag ein mp4 eingebunden habe. Das lässt sich auch mit allen gängingen Browsern abspielen.


    Wie schafe ich es nun nach klick auf die Links das entsprechende Video abzuspielen?
    Mit JavaScript kann mann ja z.B. bei Bildern über buttons folgendes machen:



    Ist der Zugriff auf die Video Dateien via JavaScript so auchmöglich? Das Element Video gibt es ja nicht im DOM!
    Verzeit auch wenn ich falsch mit Begriffen um mich rum schmeisse...wie gesagt...ich bin in den anfängen ;( :wacko:

  • @cotton, wo denkst du ist der Fehler?
    und sonnst, darf ich meckern? :D


    Ich mach mal, nimms nicht zu ernst :)


    <!doctype html> .. ;)


    Ich habe mal ein bisschen rumgeschrieben und mich vor Arbeit gedrückt :D


    http://jsfiddle.net/wolfwortmann/sh87h/ lohnt sich anzuschauen :D


    ok, ich mag Smileys.
    hier der Code bisschen modifiziert:



    Um den wert von name direkt zu verwenden..

    JavaScript: 48
    box.value = nr;
  • Der Code von den Bildern sollte funktionieren, ist auch vom meinem Lehrbuch....


    Glaube aber ich bin mißverstanden worden.
    Ich
    will wie bei dem script für die Bilder die Videos "austauschen" können. Die
    sollen quasi über den links am gleichen platz (rechts neben den links)
    abgespielt werden, (natürlich nicht gleichzeitig).
    Der Bereich wo die Videos abgepielt werden soll als "Platzhalter" (wenn man das so sagen darf) für die Videos dienen.
    [Blockierte Grafik: http://img5.fotos-hochladen.net/thumbnail/beispielpftrn3dmo7_thumb.jpg]

  • Ja - wie gesagt in meinem ersten post: http://www.w3schools.com/html/…me=tryhtml5_video_js_prop


    Du brauchst somit:
    - auf der linken Seite die Links (zB mit onlick="...")
    - ein container (also <video>) in der mitte mit einer id="..."
    - per javascript (onclick="...") löst Du eine function aus, die den video container in der Mitte "nimmt" (getElementById) und die src (Zieldatei) ändert
    - dann evtl mit autoplay oder der function play abspielern


    =)

  • Mein kleoiner tipp..
    1) meinen ersten button durch ein video tag tauschen
    2) im js Zeile 48 statt .value --> .src eintragen
    3) in der funktion zeigeBild das aus Cottons link einfügen ABER statt myVideo eben box verwenden..


    einmal richtig lesen..


    Ein bisschen Eigenarbeit kann man erwarten?
    EDIT:
    das ist ein Ansatz, ob es funktioniert weiß ich nicht ^^

  • Zitat

    Ein bisschen Eigenarbeit kann man erwarten?

    Ich bin Koch...ich stelle dich vor dem Herd und drücke dir 20 - 30 zutaten in die Hand, du wirst mir wahrscheinlich etwas Kochen können, aber bist du es gelernt hast landet auch einiges in den Müll. Du wirst froh sein Tipps erst mal zu bekommen! und um so Stolzer wenn du das Zusammenspiel von Lebensmitteln und Gewürzen eigenständig beherscht! ;)

  • natürlich, war auch nicht sehr böse gemeint, wir sind ja auch zum helfen da.
    Aber wenn du meinen Code durchgelesen hättest, wäre dir aufgefallen das der richtige teil schon vorhanden ist ;)


    und zwar, in dem Moment wo du auf einen Button klickst, wird ja das Bild angezeigt, d.h. dort musst du auch die Funktion verwenden, die das Video startet ;)

  • Hab es auch nicht böse aufgenommen :) Ich weis ja das wenn für einen etwas selbstverständlich ist........


    <jammern>
    Aber ich bin auch Stolze (fast) 42 und versuche meinen Geist ein bisi zu bereichern. :wacko: Habe auch nicht vor das Beruflich zu machen, jedoch für meinen Laden mal selber eine Site gestallten.
    Ich bringe mir das Webdesignen via ILS bei, bei JavaScript muss ich ganz ehrlich sagen, das obwohl ich mir den Syntax 100x angeschaut habe und das prinzip der Funktionen, Schleifen u.s.w. relativ verstanden habe, es mir schwer fällt alles zu kombinieren. Brauche erst mal mehrere Beispiele die ich in ruhe lesen, einbauen, verändern kann um langsam die zusammenhänge zu verstehen.
    Habe gerade ein Lehrgangsbuch "erste Schritte in JavaScript" hinter mir, der Name sagt`s wohl schon, besonders geeignet für absolute nobs wie mich finde ich es auch nicht, deswegen bitte, bitte ein bisi ausführlicher für einen alten Mann der im Moment auf den Schlauch sitzt aber aber fest davon überzeugt ist das er das irgenwann kapieren wird ^^
    </jammern>

  • Hast du denn meinen Code(schnipsel) verstanden/umgesetzt? :)
    ich wie snicht ob das wichtig ist aber man sollte in der funktion noch für jedes thumb (foreach) ein pauseVideo durchlaufen lassen, wenn man wechselt. (natürlich bevor man das neue abspielen will :D )

  • Bin auch bei der ILS =) (bin mir aber nicht ganz sicher, ob man die wirklich weiterempfehlen kann, ... anderes Thema)


    Das mit den Zusammenhängen kommt mit der Zeit.
    Ist ja wie eine Fremdsprache. Erst lernst Du die Vokabeln, und später dann kannst Du es fließend sprechen (,schreiben und lesen).

  • Bin auch bei der ILS =) (bin mir aber nicht ganz sicher, ob man die wirklich weiterempfehlen kann, ... anderes Thema)


    Das mit den Zusammenhängen kommt mit der Zeit.
    Ist ja wie eine Fremdsprache. Erst lernst Du die Vokabeln, und später dann kannst Du es fließend sprechen (,schreiben und lesen).

    zum "anderen Thema" na ja.....tel. support lässt zu wünschen über!...
    Ansonsten ...Danke das du mir Mut machst :thumbup:


    Zitat

    Hast du denn meinen Code(schnipsel) verstanden/umgesetzt? :)


    ich wie snicht ob das wichtig ist aber man sollte in der funktion noch
    für jedes thumb (foreach) ein pauseVideo durchlaufen lassen, wenn man
    wechselt. (natürlich bevor man das neue abspielen will :D )

    ehhhhmmm...nein, Teile davon vieleicht! :S


    ich hab etz mal folgendes erreicht...
    mit der Funktion

    Code
    function videoB()
    {
    document.getElementById("player").src = "videos/bbb.mp4";
    }


    und in der html:

    Code
    <body>
    <a href="#" onClick="videoB()">wechsel zu bbb.mp4</a>
    <video  id="player" src="videos/aaa.mp4" controls width="100%" >
    </body>


    ist es zumindest möglich nach klick auf den link das video bbb.mp4 abzuspielen.


    habe versucht mehrere funktionen zu erstellen

    Code
    function videoB()
    {
    document.getElementById("player").src = "videos/bbb.mp4";
    }
    function videoC()
    {
    document.getElementById("player").src = "videos/ccc.mp4";
    }


    damit ich so darauf zugreifen kann:

    Code
    <body>
    <a href="#" onClick="videoB()">wechsel zu bbb.mp4</a>
    <a href="#" onClick="videoC()">wechsel zu ccc.mp4</a>
    <a href="#" onClick="videoD()">wechsel zu ddd.mp4</a>
    <video  id="player" src="videos/aaa.mp4" controls width="100%" >
    </body>


    es funktioniert aber nur der erste link (onClick="videoB()") ?(
    muss ich nun via parameter auf die restlichen videos zugreifen, kann mir das kurz einer erklären?

  • JavaScript
    function changeVideo(source) {
        var video = getElementById("video");
    
    
    
    
        video.src = "videos/" + source + ".mp4";
    }


    HTML
    <a href="#" onClick="changeVideo(bbb)">wechsel zu bbb.mp4</a>
    <a href="#" onClick="changeVideo(ccc)">wechsel zu ccc.mp4</a>
    <a href="#" onClick="changeVideo(ddd)">wechsel zu ddd.mp4</a>
    <video  id="player" src="videos/aaa.mp4" controls width="100%" >


    Probier mal das, ob es funktioniert.

  • Funktioniert so leider auch nicht, sollte die id video nicht in html stehen damit sie angesprochen werden kann?
    Habe (ohne das gewünschte Ergebniss zu erreichen) die id in html auch von "player" in "video" umbenannt. 8| ?(

  • wolf o . andere
    kannst du mir das script evtl. ohne vorschaubilder u.s.w. schreiben? also ganz eifach erst mal, ohne schnick schnack :)
    Also sagen wir lediglich 3 Videos:


    aaa.mp4
    bbb.mp4
    ccc.mp4


    Video aaa.mp4 steht zum abspielen bereit
    <video src="videos/aaa.mp4">
    2 links sorgen für das abspielen der videos bbb und ccc (lösen aaa ab)
    <a href="#" onClick="changeVideo()">wechsel zu bbb.mp4</a>
    <a href="#" onClick="changeVideo()">wechsel zu ccc.mp4</a>

  • Ups, ja, natürlich müssen die IDs im JS und HTML gleich sein, mein Fehler


    Und ich habe nachgeguckt, das sollte jetzt gehen:

    JavaScript
    function changeVideo(source) {
        var video = getElementById("video"); // Die Videobox erkennen
        video.src = "videos/" + source + ".mp4"; // Die Videoquelle ändern
        video.load(); // Den Film (mit neuer Quelle) neu laden
    }


    HTML
    <a href="#" onClick="changeVideo(bbb)">wechsel zu bbb.mp4</a>
    <a href="#" onClick="changeVideo(ccc)">wechsel zu ccc.mp4</a>
    <a href="#" onClick="changeVideo(ddd)">wechsel zu ddd.mp4</a>
    <video id="video" src="videos/aaa.mp4" controls width="100%" >
  • hmmm... funktioniert leider auch nicht


    wobei sogar ich das verstanden habe und es logisch von der syntax klingt!


    Hast du es selber ausprobiert? nicht das ich irgenwo noch ein fehler inne habe.....

  • kann auch garnicht funktionieren...
    changeVideo(ccc) versucht die funkion mit der variable ccc aufzurufen..
    was hällst du von changeVide("ccc"); :)

    Außerdem.. <video> tag muss wieder geschlossen werden </video>
    document.getElementById ...
    http://jsfiddle.net/wolfwortmann/tdw85/



    So, wo ich schon am verbessern bin.. :D
    Html und JS STRIKT trennen ;)


    jetzt muss ich dir noch kurz zeigen, wofür es gut ist, das Element mitzugeben...
    http://jsfiddle.net/wolfwortmann/WHQwX/


    HTML
    <div name="ccc">wechsel zu bbb.mp4</div>
    <div name="ddd">wechsel zu ccc.mp4</div>
    <div name="eee">wechsel zu ddd.mp4</div>
    <video id="video" src="videos/aaa.mp4" controls width="100%" ></video>

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!