Eingebettetes Quicktime Video

[Mike]

Hallo zusammen!

Bin neu hier, aber hab auch schon ein wenig Erfahrungen gesammelt in diesem Bereich. Ich hab seit längerer Zeit ein Problem, was ich einfach nicht lösen kann.

Ich habe auf blip.tv ein Video hochgeladen, was man auch als Quicktime Stream (die orgiginale .mov datei) anschauen kann.
Das hab ich genau so eingebettet für meine Seite:

<object id="Quicktime" type="video/quicktime" width="450" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"> <param name="src" value="Link zum .mov File" /> <param name="AutoStart" value="false" /> <embed name="Quicktime" src="Link zum .mov file" type="video/quicktime" width="450" height="375"></embed></object>

Jetzt ists das Problem, dass das Video automatisch lädt. Abspielen tuts auch nach ner Weile. Was könnte ich da noch ändern?
Wenn ich auf der seite 10 Videos eingebettet habe, dann werden ja 10 auf einmal geladen...das ist schlecht.

Hab mir schon überlegt ein PNG aufs Objekt zu legen wo drauf steht "play video" und beim klick lädt das video dann. Wie ich das mache weiss ich leider noch nicht.

Würde mich freuen wenn jemand von euch mir weiterhelfen kann!

Grüße,
Mike

 

[Mike]

Ich weiss, bin immer sehr ungeduldig...
Aber hat denn keiner einen Tipp, was ich versuchen könnte?

Wenns nicht klappen sollte, kann mir einer sagen, wie ich ein Bild (Play Video oder einen Thumbnail) drüberlegen könnte, wo er beim Klick dann den Html Text vom eingebetten Video lädt? Wenn ihr nicht wisst was ich meine, fragt nur!

Danke,
Mike

 

[Gilles]

Mit HTML alleine lässt sich dein problem nicht lösen. (zumindest nicht wenn du den Inhalt nachladen willst)
Dafür brauchst du Javascript. Ich weiss nur nicht, ob es funktioniert ein Objekt einzufügen. Das müsstest du dann austesten.
Ajax wirst du wahrscheinlich nicht brauchen, sondern es würde reichen das img mit einem Objekt zu tauschen.
Dafür solltets du dich mal mit den javascript Funktionen createElement, removeChild und appendChild auseinander setzen :)

 

[Mike]

Ahh... danke, dass du geantwortet hast!

Dass ich da um javascript nicht herum komme war mir schon klar.
So weit bin ich schon im Denken. Mal sehn, was sich da machen lässt.

Freue mich aber trotzdem noch auf andere Antworten...

Mike

 

[Gilles]

Du solltest jedoch auch schauen, dass Leute ohne Javascript auch in den genuss der Videos kommen :)
So könnte sich ein neues Fenster öffnen mit dem Video. (Bei einem link wäre das : target="_blank")

 

[Mike]

Also, es soll schon im selben Fenster bleiben.
Das wird am Ende quasi in einem Blog angezeigt. Soll halt ungefähr so sein als würde ich ein youtube Video einbetten. Man klickt auf das "Play-Symbol" und dann lädt das Video. Der Javascript muss also "übersetzt" so aussehen:
[Wenn klick auf "playvideo-image", dann lad "html-Text(object)"]

Wie die Wenn-Dann funktion bei Excel:grin:
Hab schon viel gefunden, aber das richtige leider immer noch nicht.

 

[Gilles]

Also, es soll schon im selben Fenster bleiben.

Wird für einen Nutzer ohne Javascript leide rnicht möglich sein dieses Vorgehen. Mein Beitrag davor hat sich auch nur auf die Nutzer gerichtet, die kein Javascript (aktiviert) haben.

Wie schon erwähnt. Das beste wäre das über Javascript zu machen. Mit appendChild und removeChild müsstest du dann arbeiten. Eine weitere Methode wäre noch mit innerHTML zu arbeiten. Weiss jedoch aus eigener Erfahrung, dass innerHTML manchmal rummuckt, wenn man dieses mit mehreren Elementen versieht. Aber kannst es ja mal testen.

<div>
  <p>Video 1</p>
  <a href="video.php?videoid=12345">
    <img class="quickVideo" src="bildzumvideo.jpg" alt="text" />
  </a>
</div>

// Zuerst einen Event-handler auf die Images legen (bzw auf die links)
// *event-handler drauf leg*
function videochange {
  // Wenn das Event aufgerufen wurde kann man sich mit this auf das Element beziehen

// parent rausholen
var parent = this.parentElement;

var videoId = parent.getElements("a")[0].href;

// Nun den Video-String fertig machen 
 var videoString = '<object id="Quicktime" type="video/quicktime" width="450" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"> <param name="src" value="Link zum .mov File" /> <param name="AutoStart" value="false" /> <embed name="Quicktime" src="'+videoId+'" type="video/quicktime" width="450" height="375"></embed></object>';

parent.innerHTML = videoString;
}

hab dir jetzt nur Teile gezeigt. Das ganze ist aber etwas komplexer. Wenn du dir das vorgenommen hast das umzusetzen, wird das schon paar Stündchen dauern

Edit:
Mit nur einem Video wäre das eine leichte Angelegenheit. Da du das jetzt allgemein für deinen Blog einbauen willst muss man da ein work arround machen, sodass es für alle Elemente möglich ist :)

Solltest du dich nicht mit Javascript auskennen wird das eine lange Reise für dich

 

[Mike]

WOW, danke für die hilfreiche Antwort!
Leider ist das zu viel Arbeit. Ich führe die Seite mit einem Kumpel von mir, der sich mit den Sachen nicht wirklich auskennt. Deswegen hab ich jetzt beschlossen ein Thumbnail auf dem Blog zu posten und beim Klick darauf führt es zu ein Videoverzeichnis, das auf meiner Seite ist.

Aber wenn ich die Zeit und Lust dazu habe, werd ich das auf jeden Fall mal ausprobieren alles!

Echt nettes Forum hier :)
LG,
Mike