Youtube-Video erst durch Klick vergrößern

[ProCoder2025]

Hallo, ich hab mal wieder eine Frage, diesmal geht es um ein Thema in Bereich PHP aber auch Javascript und Ajax. Leider habe ich in dem Bereich JS und Ajax absolut keine Ahnung, muss mal schauen das ich das irgendwie hin bekomme.

Es ist wie folgt. Ich möchte auf einer Seite anbieten, das ein Link von ein Videoportal gepostet werden kann, nehmen wir hier mal youtube, das Video soll dann erstmal klein angezeigt werden und erst durch Klick vergrößert werden. (Genau wie bei Facebook).
Das posten des Links mit Anzeige auf Seite habe ich in php schon geschrieben.

Habe festgestellt dass das Video an sich nicht verkleinert werden kann wenn das per Klick wieder groß werden soll. In dem Fall ist nur ein Screenshot möglich. Ein Blick in den Code von Facebook bestätigt mir das.

<img class="img" 
src="http://external.ak.fbcdn.net/safe_image.php?d=9f21391e5acf6ceec8364e6fc781260a&amp;
w=130&amp;
h=130&amp;
url=http%3A%2F%2Fi3.ytimg.com%2Fvi%2Fn2J0ME4nQyI%2Fdefault.jpg" alt="">

Jedoch habe ich gerade keine ID wie ich erstens, automatisch ein Bild von dem Video erstelle und ich zweitens das dann vergrößere.
Zweitens werde ich aber sicherlich googlen können, nur wie ist es mit dem Screenshot? Wie bekomme ich automatisch nach dem posten des Links ein Screenshot? Die Frage ist jetzt, ist es eher ein Javascript-Thema oder doch php?

Falls eher JS oder Ajax, bitte ich freundlicherweise um Verschiebung.

Falls jemand eine Idee oder einen Ansatz für mich hat, würde ich mich sehr freuen.

Hier kurz ein kleiner Ausschnitt meines PHP-Codes zwecks Youtube-Einbindung. Ist noch nicht die feinste Sache, da das Einbinden andere Videos von. z.B. MyVideo somit nicht möglich ist. Das muss ich noch irgendwie hinbekommen.

 $video_link = $inhalt['video'];
         preg_match( '/[\\?\\&]v=([^\\?\\&]+)/', $video_link, $matches );
         $video_id = $matches[1];
         $youtube_url ='http://www.youtube.com/v/';
         $url = "$youtube_url$video_id";

$video = '<iframe width="375" height="300" src="'.$url.'" frameborder="0" allowfullscreen></iframe>'; 

Viele Grüße

Thomas

[TobiaZ]

Wie du schon richtig erkannt hast, sind es in der Tat zwei Themen:
1) Screenshot von Video
2) Vergrößern (= Screenshot durch Videoplayer ersetzen)

Ersteres dürfte für dich der kompliziertere Teil werden. PHP bietet hierfür von Haus aus keine Möglichkeit, auch JS fällt da weg. Hierfür müsstest du entweder ein Zusatzprogramm auf deinem Server installieren oder den (bereits vorhandenen) Screenshot von den Seiten der Videoplatformen grabben. Letzteres ist mit Sicherheit der einfachere Weg und dürfte sich auch irgendwie mit den Nutzungsbedingungen regeln lassen (Bitte selbst informieren!)

Zu 2) hast du recht, einfach mal googlen. Aber dann besser nicht nach vergrößern, sondern nach ersetzen.

[ProCoder2025]

Hey Tobiaz, vielen dank für die schnell Antwort.
Na da habe ich doch mal nen guten Ansatz. Da werde ich mich mal schlau machen zwecks Screenshot von jeweiligen Portal zu bekommen. Konnte mir nicht vorstellen das so etwas geht ^^.

Besten dank, wenn ich eine Lösung habe, gebe ich wieder bescheid.

[wahsaga]

Ersteres dürfte für dich der kompliziertere Teil werden.

Nur, wenn man's blödsinnigerweise selber machen will. Aber wäre doch gelacht, wenn Youtube das nicht selber schon anbietet ... und siehe da, Ergebnis nach 10 Sekunden googlen*:

JQuery HowTo: How to get a YouTube video screenshot image (thumbnail) URL using JavaScript


* lernt das mal, Kinder - kann man immer wieder brauchen!

[TobiaZ]

Ähm...

oder den (bereits vorhandenen) Screenshot von den Seiten der Videoplatformen grabben. Letzteres ist mit Sicherheit der einfachere Weg

[ProCoder2025]

Hehe genial danke, ich muss glaube noch das richtige googlen erlernen :-).

Na da werde ich mal bissel rumbasteln, vielen dank an euch beide für eure Mühe...

[ProCoder2025]

Wollte meine Frage jetzt nicht wieder hier in das Forum schicken, da ich nicht der Typ bin der ständig die gleichen Leute nerven will :-), Selbsthilfe ist das beste, aber leider komme ich nicht weiter.

Ist wie gesagt jetzt eher komplett das Thema Javascript, Verschiebung wäre nett.

Ich bin soweit, das der Link in php bearbeitet wird und das Video "groß" abgespielt wird.
Zusätzlich habe ich ein Plugin von JQuery das mir ermöglich den Screenshot des Videos zu machen. Jetzt steh ich vor der Frage wie ich die erzeugte Variable aus der .js Datei nach php senden kann.
Da ja php auf dem Server verarbeitet wird und JS nicht, kann ich entweder auf AJAX oder auf ein hidden-field zurückgreifen. Da mein wissen mit AJAX bei 0 liegt, habe ich mich für zweitens entschieden.

Leider sind meine Javascript-Kentnisse auch nur sehr gering so das ich es schwieriger habe Lösungen zu finden.

Ich steh jetzt davor, wie ich die erzeugte Variable aus .js in die HTML, wo das Formular ist, wieder bekomme und zusätzlich sofort in VALUE von das Hidden-field einfüge.

Hier mal die Codes bzw. Ausschnitte:
Formular:

<html>
<script src="jquery.js"></script>
<script src="jyoutube.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Get youtube video thumbnail on user click
    var url = '';
    $('#send').click(function(){
        // Check for empty input field
        if($('#video').val() != ''){
            // Get youtube video's thumbnail url
            // using jYoutube jQuery plugin
            url = $.jYoutube($('#video').val());
            //url = $.jYoutube($('#url').val());
            // Now append this image to <div id="thumbs">
            $('#video_bild').append($('<a href="'+url+'" />'));
            //$('#thumbs').append($('<img src="'+url+'" />'));

         }

});

});

</script>

 <!-- Hier ist Zeichenbegrenzung beendet  -->
 <!--<textarea name="nachricht" rows="5" cols="40" >
</textarea>  -->
<br /><br />
<div id="thumbs"> </div>
<div id="name">
Name:* <br />
<input type="text" name="name" value="" size="20" maxlength="100" />
</div>
<div id="stadt">
Stadt:* <br />
<input type="text" name="stadt" value="" size="20" maxlength="100" />
</div>
<br />
<div id="video2">
Videolink: <br />
<input type="text" name= "video" id="video" value="" size="47" maxlength="" />
<script type="text/javascript">
    document.write( '<input type="hidden" id = "video_bild "name="video_bild" value="' + url + '">' );
  </script>


<!--  <input type="hidden" name="video_bild" value=""/>-->
</div>
<div id="url">

<p class="nosee">
  <label for="url">Bitte hier NICHTS eintragen!</label>
  <br />
  <input id="url" name="url" size="50" value=""  />
</p>
</div>

<br />
<br />
<div id="submit">
<input type="submit" name="send" id="send" value="Teil es mit" />
</div>
</form>
</html>

JS-Datei

$.extend({
  jYoutube: function( url, size ){
    if(url === null){ return ""; }

    size = (size === null) ? "big" : size;
    var vid;
    var results;

    results = url.match("[\\?&]v=([^&#]*)");

    vid = ( results === null ) ? url : results[1];

    if(size == "small"){

     return "http://img.youtube.com/vi/"+vid+"/2.jpg";


    }else {

       return "http://img.youtube.com/vi/"+vid+"/2.jpg";

    }
    //musste mit den gleichen Links das Skript etwas austricksen, da sonst nur große Bilder angezeigt wurden, wird noch bearbeitet
  }

});

Es soll dann an die php (habe ich jetzt nicht extra mit aufgeschrieben) per POST übergeben werden.

PHP

<php? 
$video_bild = $_POST['video_bild']; 

 echo $video_bild; 
?> 

Also der zweite Code (JS) verarbeitet nach submit den LINK von Youtube und erstellt ein Screenshot von Video das wird dann wieder in HTML übergeben, eigentlich gibt das Plugin dann sofort das Bild aus, dies will ich aber nicht, da das Bild erst in der Datenbank gespeichert werden soll, also muss dann die Variable url an den PHP-Code gegeben werden wo auch schon der Rest bearbeitet wird.

Habe schon einige Varianten ausprobiert, entweder es hat soweit funktioniert, nur es wurde kein Inhalt übergeben oder wie bei dem aktuellen Code kommt sofort eine Fehlermeldung das Variable 'URL' in HTML-Code nicht definiert ist. Logisch, da JS-Datei das Ergebnis noch nicht geschickt hat. Und wenn ich das Formular trotz Fehlermeldung ausfülle dann kommt das in PHP-Datei $video_bild nicht definiert ist.

Hat jemand eine Idee bzw. sieht den Fehler oder kann mir helfen?

Viele Grüße Thomas

[c0restalker]

Also dafür würde ich dir jQuery / Ajax echt empfehlen. Ist wesentlich einfacher!
Du kannst damit sowohl über GET als auch Post Variablen an dein Script übergeben.

Ajax/jQuery.post - jQuery JavaScript Library

Hoffe das hilft dir

[ProCoder2025]

Ich dank dir, ja ich glaub langsam auch das ich es damit versuchen sollte ^^. Denn derzeit fische ich noch trocken und somit ohne Ergebnis :-). Werde mich morgen mal belesen und es damit versuchen.

Besten dank für deine Hilfe

[c0restalker]

Ich dank dir, ja ich glaub langsam auch das ich es damit versuchen sollte ^^. Denn derzeit fische ich noch trocken und somit ohne Ergebnis :-). Werde mich morgen mal belesen und es damit versuchen.

Besten dank für deine Hilfe

Viel Erfolg. Ist meiner Meinung nach der einfachste und schnellste Weg. Hast eben alle Funktionen schon vordefiniert und abrufbereit. Da muss man nicht mehr viel basteln. An die Syntax gewöhnt man sich auch schnell!

Lg

[sili]

Ein Beispiel, welches (sofern ich dich richtig verstanden habe) genau das tut, was du möchtest, findest du auch hier: "YouTube - Pulp Fiction Soundtrack - Opening Theme (Dick ..." and 1 other links | Share links with linkIO.us. Vielleicht hilft dir der Code (mit jQuery) etwas weiter. Problematisch daran ist aber die Abhängigkeit von Flash. Youtube setzt dies ja nicht mehr für alle Videos voraus.

[ProCoder2025]

Hey Silli, jo genau so möchte ich es auch bei mir haben. Ich habe mich die letzten Tage noch nicht mit Ajax beschäftigt , da ich erstmal andere Sachen realisiert habe bis ich mich dem Thema wieder widme, aber die Seite macht es mit nem hidden-field. Ich habe ja nur bis jetzt das Problem mit den variablen, damit die auch in das hidden-field eingetragen werden. Ich werde die Tage dann aber nochmal c0restalker Tipp befolgen und mich mit Ajax beschäftigen, aber ich habe das erstmal nach hinten gelegt, erstmal werde ich andere Dinge auf der Website fertig machen und dann widme ich mich nochmal dem Thema.