Daten aus Datensätze in Echtzeit verwenden

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
12 Mai 2017
144
2
18
#1
Hallo,

Der folgende Code sorgt dafür, dass beim Klicken auf ein Bild ein Tab geöffnet wird mit entsprechendem Link:

HTML:
<h1 style="text-align:center;">Music</h1>
<br>
<div class="row">
    @if (count($musics) > 0)
        @foreach ($musics as $music)
            <div class="col-md-3" style="margin-bottom:15px;padding-top:10px" onmouseover="this.style.border='1px solid';" onmouseout="this.style.border='none';">
                <a href="{{$music->link_path}}" target="_newtab"><img src="{{$music->pic_path}}" style="width:100%;height:200px;" alt="time"></a>
                <br><br>
                <h3>{{$music->title}}</h3>
Es werden hauptsächlich Youtube-Videos geöffnet. Youtube bietet einen Code zum Einbetten an, wie z.B. der hier:
HTML:
<iframe width="560" height="315" src="https://www.youtube.com/embed/09R8_2nJtjg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Mir wäre es lieber, wenn der einzubettende Code benutzt werden würde und bei einem Klick der Link in der src-Sektion geändert wird und das Video sichtbar wird. Sobald ein anderes Bild angeklickt wird (zu jedem Bild wird ein Link zugeordnet) soll der neue Link eingefügt werden und das neue Video soll abgespielt werden. Der einzubettende Code würde dann folgendermaßen aussehen:

HTML:
<iframe width="560" height="315" src="{{$music-link_path}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Die Frage ist, wie ich es hinbekomme, dass ein neues Video angezeigt wird nach einem neuen Klick? Jede Änderung müsste ja in Echtzeit überprüft werden und der Einträg des neuen Datensatzes ausfindig gemacht und in den Code eingesetzt werden. Wie genau bekomme ich das hin?

PS: Ich benutze das Framework Laravel 5.6
 

scbawik

Senior HTML'ler
14 Juli 2011
2.494
437
83
#2
Hallo,

Der folgende Code sorgt dafür, dass beim Klicken auf ein Bild ein Tab geöffnet wird mit entsprechendem Link:

HTML:
<h1 style="text-align:center;">Music</h1>
<br>
<div class="row">
    @if (count($musics) > 0)
        @foreach ($musics as $music)
            <div class="col-md-3" style="margin-bottom:15px;padding-top:10px" onmouseover="this.style.border='1px solid';" onmouseout="this.style.border='none';">
                <a href="{{$music->link_path}}" target="_newtab"><img src="{{$music->pic_path}}" style="width:100%;height:200px;" alt="time"></a>
                <br><br>
                <h3>{{$music->title}}</h3>
Es werden hauptsächlich Youtube-Videos geöffnet. Youtube bietet einen Code zum Einbetten an, wie z.B. der hier:
HTML:
<iframe width="560" height="315" src="https://www.youtube.com/embed/09R8_2nJtjg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Mir wäre es lieber, wenn der einzubettende Code benutzt werden würde und bei einem Klick der Link in der src-Sektion geändert wird und das Video sichtbar wird. Sobald ein anderes Bild angeklickt wird (zu jedem Bild wird ein Link zugeordnet) soll der neue Link eingefügt werden und das neue Video soll abgespielt werden. Der einzubettende Code würde dann folgendermaßen aussehen:

HTML:
<iframe width="560" height="315" src="{{$music-link_path}}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Die Frage ist, wie ich es hinbekomme, dass ein neues Video angezeigt wird nach einem neuen Klick? Jede Änderung müsste ja in Echtzeit überprüft werden und der Einträg des neuen Datensatzes ausfindig gemacht und in den Code eingesetzt werden. Wie genau bekomme ich das hin?

PS: Ich benutze das Framework Laravel 5.6
Was ist jetzt aber die konkrete Frage?
Dein Vorschlag geht ja schon in die richtige Richtung (Bis auf den Syntaxfehler: {{$music->link_path}})
 
Zustimmungen: Tabula_Rasa
12 Mai 2017
144
2
18
#3
Was ist jetzt aber die konkrete Frage?
Dein Vorschlag geht ja schon in die richtige Richtung (Bis auf den Syntaxfehler: {{$music->link_path}})
Ich möchte nicht mehr, dass bei einem Klick auf das Bild auf die Youtube Seite mit dem entsprechendem Link in einem neuen Tab geöffnet wird, sondern dass bei einem Klick auf das Bild der Youtube Player auf derselben Seite sich öffnet und das Video auf derselben Seite abspielt und bei einem Klick auf ein anderes Bild soll der Youtube Player auf das andere Video wechseln. Wie genau bekomm ich das hin? Ich bräuchte da Ansätze..
 
12 Mai 2017
144
2
18
#6
Habe es geschafft. Nur noch zwei Fragen. Ich benutze zweimal iframe: Die Werte beider werden geändert. Kann ich spezifizieren, was verändert wird mittels id oder dergleichen? 2. Auch wenn nichts ausgewählt wurde nimmt iframe Platz ein. Kann ich dafür sorgen, dass nur wenn ein Wert vorhanden ist das Video auftaucht und wenn nicht verschwindet es komplett und der Platz, der eingenommen wird, ebenfalls?

Edit: Problem 1 gelöst mithilfe einer id. Problem 2 besteht
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
742
70
28
37
Minden
chat.sebastian1012.bplaced.net
#7
zu1 ja id geht natürlich.
zu 2 display none würde helfen
http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte_juni2018/youtube_einbinden.php

Der blendet jetzt am Anfang das iframe aus und wenn du die Bilder anklicks ist es wieder sichtbar.Iframe hat jetzt eine id.

Es gibt eine Function die beim Ende des Videos Feuert. Damit könnte man den Iframe am Ende eines Videos automatisch ausbelnden lassen.
Ich bekomme es aber nur über den <video> Tag hin und nicht über den Iframe.
Wenn hier einer das ließt und weiß wie man das Event beim Ende die Videos feuern läßt dann bitte posten,bzw mit in das Script rein bauen.

Ich werde das auch mal weiter testen ob das irgendwie geht.Aber ohne <video> Tag und dann noch im Iframe weiß ich nicht ob und wie das geht.Ich werde mal googeln und wenn ich oder wer anders was weiß können wir die Funktion da noch mit einbauen.
 
Zustimmungen: Tabula_Rasa
12 Mai 2017
144
2
18
#8
zu1 ja id geht natürlich.
zu 2 display none würde helfen
http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte_juni2018/youtube_einbinden.php

Der blendet jetzt am Anfang das iframe aus und wenn du die Bilder anklicks ist es wieder sichtbar.Iframe hat jetzt eine id.

Es gibt eine Function die beim Ende des Videos Feuert. Damit könnte man den Iframe am Ende eines Videos automatisch ausbelnden lassen.
Ich bekomme es aber nur über den <video> Tag hin und nicht über den Iframe.
Wenn hier einer das ließt und weiß wie man das Event beim Ende die Videos feuern läßt dann bitte posten,bzw mit in das Script rein bauen.

Ich werde das auch mal weiter testen ob das irgendwie geht.Aber ohne <video> Tag und dann noch im Iframe weiß ich nicht ob und wie das geht.Ich werde mal googeln und wenn ich oder wer anders was weiß können wir die Funktion da noch mit einbauen.
Danke dir! Solange lass ich es auf dem Display mittels Css nicht anzeigen :).