Video durch anklicken vergrössern

[Pousten]

Hallo erstmal.

Also, ich hab da ein kleines Problem bei dem Ihr mir vieleicht helfen könnt.
Ich bin gerade an einer Webseite für mein Club. Nun wurde der Wunsch geäussert ein Video einzubauen. Video gemacht, in die Webseite eingebaut. Das ging fix. Doch nun bekam ich Rückmeldungen, dass das Video zu gross sei. Zusammen entschieden wir uns dann für folgende Lösung: Auf der Homeseite wird ein Preview vom Video in der grösse von 200x200 Pixel erstellt. Beim Draufklicken verschwindet dann das Preview und das Video wird in einer grösse von 400x400 Pixel wiedergegeben. Wie ist so was realisierbar? Ich bin total überfordert mit dem. :( Geht das überhaupt irgendwie?

Mit freundlichen Grüssen

Pousten

[ddd]

Hallo erstmal.

Also, ich hab da ein kleines Problem bei dem Ihr mir vieleicht helfen könnt.
Ich bin gerade an einer Webseite für mein Club. Nun wurde der Wunsch geäussert ein Video einzubauen. Video gemacht, in die Webseite eingebaut. Das ging fix. Doch nun bekam ich Rückmeldungen, dass das Video zu gross sei. Zusammen entschieden wir uns dann für folgende Lösung: Auf der Homeseite wird ein Preview vom Video in der grösse von 200x200 Pixel erstellt. Beim Draufklicken verschwindet dann das Preview und das Video wird in einer grösse von 400x400 Pixel wiedergegeben. Wie ist so was realisierbar? Ich bin total überfordert mit dem. :( Geht das überhaupt irgendwie?

Du könntest deinen eingebetteten Webplayer in einen Div-Container packen ...

<div id="MeinKleinerWebplayer">
<..My little embedded video-player..>
</div>

... dann eine Linkliste oder ein Dropdown-Menu einbauen ...

<a href="javascript:wechsel(400,400)">400x400</a>
<a href="javascript:wechsel(200,200)">200x200</a>

... und den Container dann mit der JavaScript-Eigenschaft innerHTML ansprechen ...

function wechsel (breite,hoehe)
{
var xx = document.getElementById('MeinKleinerWebplayer');
xx.innerHTML = '<..My little embedded video-player..>';
}

Statt der Höhen- und Breitenangabe in den Parameter-Einstellungen deines Players in Pixel mußt du nun halt die Funktionsparameter übertragen.
... width='+breite+' height='+hoehe+' ...
Müßte eigentlich funktionieren ...
Was das dann allerdings für Auswirkungen auf dein Seiten-Layout hat kann ich an dieser Stelle nicht beurteilen.
Vielleicht empfiehlt sich hier ausnahmsweise mal ein Pop-Up !?
Gruß ddd

[suit]

<a href="javascript:wechsel(400,400)">400x400</a>
<a href="javascript:wechsel(200,200)">200x200</a>

"javascript:" ist wohl das falscheste wo gibt - dicht gefolgt von links, die keine sind bzw keine verweis im href-attribut haben

[Sven Rautenberg]

Moin!

<a href="javascript:wechsel(400,400)">400x400</a>
<a href="javascript:wechsel(200,200)">200x200</a>

"javascript:" ist wohl das falscheste wo gibt - dicht gefolgt von links, die keine sind bzw keine verweis im href-attribut haben

Angesichts der derzeitigen Realisierung der Flash-Integration sollten deine Reflexe besser nicht so heftig ausfallen.

- Sven Rautenberg

[suit]

Angesichts der derzeitigen Realisierung der Flash-Integration sollten deine Reflexe besser nicht so heftig ausfallen.

dem kann ich nicht ganz folgen - was hat jetzt flash mit eine pseudo-protokoll "javascript:" zu tun? oder mit links, die keine links sind?

[Pousten]

Hallo erstmal.

Also, ich hab da ein kleines Problem bei dem Ihr mir vieleicht helfen könnt.
Ich bin gerade an einer Webseite für mein Club. Nun wurde der Wunsch geäussert ein Video einzubauen. Video gemacht, in die Webseite eingebaut. Das ging fix. Doch nun bekam ich Rückmeldungen, dass das Video zu gross sei. Zusammen entschieden wir uns dann für folgende Lösung: Auf der Homeseite wird ein Preview vom Video in der grösse von 200x200 Pixel erstellt. Beim Draufklicken verschwindet dann das Preview und das Video wird in einer grösse von 400x400 Pixel wiedergegeben. Wie ist so was realisierbar? Ich bin total überfordert mit dem. :( Geht das überhaupt irgendwie?

Du könntest deinen eingebetteten Webplayer in einen Div-Container packen ...

<div id="MeinKleinerWebplayer">
<..My little embedded video-player..>
</div>

... dann eine Linkliste oder ein Dropdown-Menu einbauen ...

<a href="javascript:wechsel(400,400)">400x400</a>
<a href="javascript:wechsel(200,200)">200x200</a>

... und den Container dann mit der JavaScript-Eigenschaft innerHTML ansprechen ...

function wechsel (breite,hoehe)
{
var xx = document.getElementById('MeinKleinerWebplayer');
xx.innerHTML = '<..My little embedded video-player..>';
}

Statt der Höhen- und Breitenangabe in den Parameter-Einstellungen deines Players in Pixel mußt du nun halt die Funktionsparameter übertragen.
... width='+breite+' height='+hoehe+' ...
Müßte eigentlich funktionieren ...
Was das dann allerdings für Auswirkungen auf dein Seiten-Layout hat kann ich an dieser Stelle nicht beurteilen.
Vielleicht empfiehlt sich hier ausnahmsweise mal ein Pop-Up !?
Gruß ddd

Recht Herzlichen Dank für die Promte und Informationsreiche antwort.
Blöd nur versteh ich nicht, was du da alles meinst. ;) Ich hab praktisch keine Ahnung von HTML usw. Aber ich könnt mir auch vorstellen, dass es gar nicht möglich ist. Ich bin nun schon seit 3 oder 4 Tagen am Forschen.
Ich hab da noch ne andere Frage. Wie kann ich ein Preview erstellen. Also anstelle eines schwarzen hintergrund beim Video wenn es noch nicht läuft ein Bild reinstellen. Hier der Code, vildeit spielt das ja ne Rolle, ich weis nicht.

<div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div>  
  
        <script type="text/javascript" src="/video/swfobject.js"></script>  
  
        <script type="text/javascript">  
                var s1 = new SWFObject("/video/player.swf","ply","300","300","9","#FFFFFF");  
                s1.addParam("allowfullscreen","true");  
                s1.addParam("allowscriptaccess","always");  
                s1.addParam("flashvars","file=/video/video.flv");  
                s1.write("container");  
        </script>

MfG

[ritschmanhard]

Hi Pousten!

Lass uns doch erst mal klären:

Doch nun bekam ich Rückmeldungen, dass das Video zu gross sei.

Zu gross:
a) in den Dimensionen der Ausgabe (b*h)?
oder:
b) in seiner Dateigröße (MByte)?

Sollte a) der Fall sein, dann hat ddd dir schon den richtigen Tip gegeben (die Grösse des players folgt aus den Parametern XXX, YYY:
   var s1 = new SWFObject("/video/player.swf","ply","XXX","YYY","9","#FFFFFF");
schreib also deinen script Code in eine Funktion und rufe diese entsprechend auf:
function setPlayer(size)
{
  var s1 = new SWFObject("/video/player.swf","ply",size,size,"9","#FFFFFF");
  s1.addParam("allowfullscreen","true");
  s1.addParam("allowscriptaccess","always");
  s1.addParam("flashvars","file=/video/video.flv");
  s1.write("container");
}
<input type="button" value="gross" onclick="setPlayer('400')" />
<input type="button" value="kein" onclick="setPlayer('200')" />

(Nebenbei bemerkt: es gibt auch SWF player für FLVs, die "Fullscreen" unterstützen (das findest du mit google schnell und ist etvl eine brauchbare Alternative) - denkbar wäre es auch mittels Actionscript+flex einen eigenen SWF Player zu schreiben, der einen eigenen Togglebutton für den Wechsel der Ausgabegrößen bietet - das würde die Größenänderung erlauben, ohne dass das Video neu gestartet wird...)

Falls es um b) geht, gibt es bessere Parameter an denen man was drehen kann, als die Ausgabegrösse - z.B. der Codec (h264), die Qualität, die fps usw.
Und natürlich kann man den Browser ein Video mit Auflösung 200*200 auch mit 400*400 ausgeben lassen, d.h. in diesem Fall wäre nicht der html content, sondern das Videomaterial neu zu codieren.

Grüße,
Richard

[Pousten]

Hi Pousten!

Lass uns doch erst mal klären:

Doch nun bekam ich Rückmeldungen, dass das Video zu gross sei.
Zu gross:
a) in den Dimensionen der Ausgabe (b*h)?

Genau ich meinte es in Breite x Höhe zu gross.

Sollte a) der Fall sein, dann hat ddd dir schon den richtigen Tip gegeben (die Grösse des players folgt aus den Parametern XXX, YYY:
   var s1 = new SWFObject("/video/player.swf","ply","XXX","YYY","9","#FFFFFF");
schreib also deinen script Code in eine Funktion und rufe diese entsprechend auf:
function setPlayer(size)
{
  var s1 = new SWFObject("/video/player.swf","ply",size,size,"9","#FFFFFF");
  s1.addParam("allowfullscreen","true");
  s1.addParam("allowscriptaccess","always");
  s1.addParam("flashvars","file=/video/video.flv");
  s1.write("container");
}
<input type="button" value="gross" onclick="setPlayer('400')" />
<input type="button" value="kein" onclick="setPlayer('200')" />

Okes das sieht schon toll aus, aber. (Jetzt kommt das aber)
Gewünscht ist eigentlich das ein Preview 200x200 Pixel(kann ja auch nur ein Bild sein) auf der Homepage angezeigt wird. Und dann beim Klick auf das Bild wird dann aus dem Bild ein Video in der Grösse von 400x400 Pixel. Jemand hat mir mal gesagt mit Iframe soll das gehen, aber ich blick da nicht so ganz durch. :(

[Malcolm Beck´s]

hi,

Gewünscht ist eigentlich das ein Preview 200x200 Pixel(kann ja auch nur ein Bild sein) auf der Homepage angezeigt wird. Und dann beim Klick auf das Bild wird dann aus dem Bild ein Video in der Grösse von 400x400 Pixel.

Dann müssen wir erstmal klären, was du Serverseitig drauf hast. Möglich ist das schon, einfach noch mehr, erfordert aber ein wenig Programmierung.

Jemand hat mir mal gesagt mit Iframe soll das gehen,

Nein, diese Behauptung ist reine Blasphemie.

mfg

[pousten]

Also ich hab nun eine lösung für mein Problem gefunden. Es klappte doch mit Iframe. Hier eine kurze erläuterung:

Auf der Homeseite wurde ein Iframe(400x400 Pixel) erstellt. Als src preview.html. In diesem preview.html dann ein Bild (200x200 Pixel) verlinkt auf video.html. Und dann in diesem Video.html die Videodatei eingebaut.

mit freundlichen Grüssen

Pousten

PS: Nochmals herzlichen Dank an alle die mir mitgeholfen haben.