{"id":826,"date":"2008-08-21T08:54:38","date_gmt":"2008-08-21T06:54:38","guid":{"rendered":"http:\/\/my.stargazer.at\/?p=826"},"modified":"2008-08-21T08:54:38","modified_gmt":"2008-08-21T06:54:38","slug":"youtube-selfmade-part-2","status":"publish","type":"post","link":"https:\/\/my.stargazer.at\/de\/2008\/08\/21\/youtube-selfmade-part-2\/","title":{"rendered":"YouTube selbst gebaut – Teil 2"},"content":{"rendered":"

Heute wollen wir wie im ersten Teil<\/a> versprochen, Flash Videos selbst basteln. Da ich weder Flash besitze noch jemand die G\u00fcte hatte, mir eine aktuelle Version zu schenken, bleibt mir nur der Weg \u00fcber PHP, indem ich dort ein Flash File schreibe. Also beschwert euch nicht! Dass das geht beweist die MING Library und sieht wie folgt aus:<\/p>\n

setDimension(480, 360);
\n$movie->Background(0,0,0);<\/code><\/p><\/blockquote>\n

Was wir hier gemacht haben ist simpel: Wir haben ein leeres Flash-Objekt instanziert und ihm seine Hintergrundfarbe und Gr\u00f6\u00dfe zugewiesen – in unserem Fall 480×360 Pixel. Damit ist nun der Grundstock da, auf dem wir aufbauen k\u00f6nnen. Dazu binden wir ein Stream-Objekt ein und positionieren es im Feld. Kreativerweise nennen wir es einfach ‚video‘:<\/p>\n

$stream = new SWFVideoStream();
\n$stream->setDimension(480, 350);
\n$item = $movie->add($stream);
\n$item->moveTo(5, 5);
\n$item->setname(\"video\");<\/code><\/p><\/blockquote>\n

Damit ist einmal der Grundstein gelegt und wir k\u00f6nnen das Video selbst – unser flv File – einbinden. Im Prinzip geht das durch ein paar Zeilen ActionScript die wie folgt aussehen:<\/p>\n


\nconnection = new NetConnection();
\nconnection.connect(null);
\nstream = new NetStream(connection);
\nvideo.attachVideo(stream);
\nstream.setBufferTime(10);
\nstream.play('http:\/\/ourhost\/mystream.flv');
\n<\/code><\/p><\/blockquote>\n

Um dem Zeug in PHP Herr zu werden, machen wir es uns einfach und binden den Code statisch ein, da es sich in unserem Fall ja nur um ein Demo handelt. Dazu verpacke ich die obrigen Zeilen in einer Variable genannt $action_string und f\u00fcge sie in unser Script ein:<\/p>\n

$action = new SWFAction($action_string);
\n$movie->add($action);<\/code><\/p><\/blockquote>\n

Doch was ist ein Player ohne die zugeh\u00f6rigen Kn\u00f6pfchen zum rumdr\u00fccken? Wir M\u00e4nner brauchen sowas. Also noch kurz ein paar Grafiken zusammenzimmern und als DBL Datei ablegen oder schlichtweg das png2dbl-Tool von Ming benutzen. Eingebunden wird das Ganze dann wieder in der guten alten PHP Manie:<\/p>\n

$button = new SWFButton();
\n$flags = (SWFBUTTON_UP | SWFBUTTON_HIT | SWFBUTTON_OVER | SWFBUTTON_DOWN);
\n$button->addShape(ImageShape(\"images\/pause.dbl\"), $flags);
\n$action = new SWFAction(\"stream.pause();\");
\n$button->addAction($action, SWFBUTTON_MOUSEDOWN);
\n$button_ref = $movie->add($button);
\n$button_ref->moveTo($x, $y);<\/code><\/p><\/blockquote>\n

Das war der einfachere Teil und ja, ihr habt Recht – es fehlt der obligatorische Fortschrittsbalken. Da ich aber keine Lust habe diesen extra zu malen, machen wir das nun ganz einfach mit PHP:<\/p>\n

$mc = new SWFSprite();
\n$shape = new SWFShape();
\n$shape->setLine(4,25,0,0,128);
\n$shape->movePenTo(0, 5);
\n$shape->drawLineTo(0, 10);
\n$mc->add($shape);
\n$mc->nextFrame();
\n$slider = $movie->add($mc);
\n$slider->moveTo($xMin, $y);
\n<\/code><\/p><\/blockquote>\n

Und damit das Ding auch noch wandert, geben wir ihm folgenden Code mit:<\/p>\n

$a = new SWFAction(\"startDrag(this, $xMin, $y, $xMax, $y, 1); drag = true;\");
\n$slider->addAction($a, SWFACTION_MOUSEDOWN);
\n$a = new SWFAction(\"stopDrag(); drag=flase;\");
\n$slider->addAction($a, SWFACTION_MOUSEUP);<\/code><\/p><\/blockquote>\n

Aber so ganz einfach ist das Ganze dann auch wieder nicht, da wir uns ja durch das Herumziehen eigentlich ein Bewegen im Film erwarten. Aber auch da kann geholfen werden:<\/p>\n

\/\/ width in px
\nwidth = xMax - xMin;<\/p>\n

paused = false;
\nif(drag) {
\n \/\/ pause stream while seeking
\n _global.stream.pause(true);
\n paused = true;
\n x = _root._xmouse - xMin;
\n seekTo = (_global.streamLen \/ width) * x;
\n _global.stream.seek(seekTo);
\n} else {
\n pos = (_global.stream.time * (width \/ _global.streamLen)) + xMin;
\n this._x = pos;
\n this._y = y;
\n}<\/p>\n

\/\/ restart paused stream
\nif(paused) {
\n _global.stream.pause(false);
\n}<\/code><\/p><\/blockquote>\n

Und dann war’s das eigentlich auch schon. Wir schlie\u00dfen den Frame ab und schreiben einfach ein kleines Flash File. Alternativ k\u00f6nnte man es auch direkt das PHP File ein Flash Objekt zum Client senden lassen, aber da ich ja ohnehin nur die statische Adresse zum FLV File drin habe, w\u00e4re das doch zu viel des Guten.<\/p>\n

$movie->nextFrame();
\n$movie->save(\"FLVPlayer.swf\");<\/code><\/p><\/blockquote>\n

Fazit: Die ganze Magie hinter Video-Portalen ist eigentlich eine ganz simple Programmierung, welche sich in wenigen Zeilen realisieren l\u00e4sst.<\/p>","protected":false},"excerpt":{"rendered":"

Heute wollen wir wie im ersten Teil versprochen, Flash Videos selbst basteln. Da ich weder Flash besitze noch jemand die G\u00fcte hatte, mir eine aktuelle Version zu schenken, bleibt mir nur der Weg \u00fcber PHP, indem ich dort ein Flash File schreibe. Also beschwert euch nicht! Dass das geht beweist die MING Library und sieht wie folgt aus:<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[503,496,530],"class_list":["post-826","post","type-post","status-publish","format-standard","hentry","category-it-related-stuff","tag-howto","tag-video","tag-youtube"],"_links":{"self":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts\/826","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/comments?post=826"}],"version-history":[{"count":0,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/posts\/826\/revisions"}],"wp:attachment":[{"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/media?parent=826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/categories?post=826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/my.stargazer.at\/de\/wp-json\/wp\/v2\/tags?post=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}