Video und Audio in eigene Webseiten einbetten

siehe auch:

IFrame

Wenn man in Youtube ein Video mit der rechten Maustaste anklickt, dann öffnet sich ein Menü, welches einen Menüpunkt "Einbettungscode kopieren" anbietet. Nach Anklicken dieses Menüpunktes kann man den kopierten HTML-Code in eine eigene HTML-Datei einbetten. Wenn man den Quelltext brauchbar formatiert,
dann sieht er z.B. wie folgt aus:
<iframe width="640"
        height="360"
        src="http://www.youtube.com/embed/jZXqHLK0_SQ?feature=player_detailpage"
        frameborder="0"
        allowfullscreen>
</iframe>
Ein einfacher Player, welcher diesen Quelltext mit mehreren Videos nutzen kann sieht dann z.B. folgendermassen aus:
<!DOCTYPE html>
<html>
 
<head>
  <title>Music Player</title>
  <meta charset="utf-8">
 
  <script type="text/javascript">
 
    var meinemusik = new Array( "9oRNAYjdzEY", "5DVreiztOqg", "sSRQCMq1gB8" );
 
    function auswert( wert )
    {
      // Youtube iframe-Code mit ausgewählter ID aus dem Array zusammensetzen
      var iframetag =
            '<iframe width="640" height="360" src="http://www.youtube.com/embed/'
          + meinemusik[wert]
          + '?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>';
      document.getElementById("ausgabe").innerHTML = iframetag;
    }
 
  </script>
 
</head>
 
<body>
 
  <h1>Music Player</h1>
 
  <!-- Im Formular wird das abzuspielende Video ausgewählt -->
  <form name="auswahl">
 
    <select onblur="auswert(this.value)">
      <option value="0">Roy Black</option>
      <option value="1">Grady Tate</option>
      <option value="2">Black Sabbath</option>
    </select>
 
  </form>
 
  <!-- Im folgenden div-Tag wird das Video ausgegeben -->
  <div id="ausgabe">
 
  </div>
 
</body>
 
</html>
 

Object

Eine andere Art und Weise, den Einbettungscode als Flashmovie direkt in der eigenen Seite zu nutzen, sieht folgendermassen aus:
<object
         style = "  height: 390px;
                    width:  640px    ">
 
  <param
         name ="movie"
         value="http://www.youtube.com/v/2Mjc-D1PDRM?version=3&feature=player_detailpage">
  <param
         name ="allowFullScreen"
         value="true">
  <param
         name ="allowScriptAccess"
         value="always">
  <embed
         src="http://www.youtube.com/v/2Mjc-D1PDRM?version=3&feature=player_detailpage"
         type="application/x-shockwave-flash"
         allowfullscreen="true"
         allowScriptAccess="always"
         width="640"
         height="360">
 
</object>
Ein weiteres Beispiel:
<object
    height: 390px;
    width:  640px;
>
 
<param
   name="movie"
   value="http://www.youtube.com/v/Z0VI6xq5Pew?version=3&feature=player_detailpage"
>
 
  <param
    name="allowFullScreen"
    value="true"
  >
 
  <param
    name="allowScriptAccess"
    value="always">
 
  <embed
    src="http://www.youtube.com/v/Z0VI6xq5Pew?version=3&feature=player_detailpage"
    type="application/x-shockwave-flash"
    allowfullscreen="true"
    allowScriptAccess="always"
    width="640"
    height="360">
 
</object>
Der Quelltext besteht aus dem HTML-Tag object, welches Sie bisher noch nicht kannten. Dieses Tag wird benötigt, um Dateien fast beliebigen Ursprungs (Objekte) in HTML-Seiten einzubauen. Hierzu gehören auch Flash-Videos, wie sie von Youtube angeboten werden. Die innerhalb des Tags object vorhandenen param-Tags werden zur genaueren Beschreibung des einzubettenden Objekts verwendet.

Objekt

siehe
http://www.w3schools.com/html/html_object.asp
http://de.selfhtml.org/html/multimedia/objekte.htm
http://www.w3schools.com/tags/tag_object.asp
http://www.w3.org/TR/html401/struct/objects.html
http://www.mediaevent.de/2009/05/pdf-einbinden/ PDF

Beispiele

Youtube Video

Wenn man den Quelltext in seine Seite richtig eingebaut hat, dann sieht das Ganze in der eigenen Seite wie folgt aus:


Image

Mit dem folgenden Quelltext kann man z.B. auch eine JPG-Datei einbinden (alternativ zum IMG-Tag):
<object
   data="http://www.denkmal-berlin.de/2010/wp-content/uploads/osz-kim_web.jpg"
   type="image/jpeg"
>
  OSZ KIM
</object>
Und das sieht dann so aus:
OSZ KIM

Arbeit mit der Youtube API

Wer direkt Einfluss auf den Player nehmen und ihn direkt steuern möchte, der benötigt das sogenannte Youtube API (application programming interface).

Beispiele:
  1. https://developers.google.com/youtube/youtube_player_demo
  2. https://developers.google.com/youtube/js_api_reference
  3. https://developers.google.com/youtube/player_parameters#Embedding_a_Player
  4. http://stackoverflow.com/questions/7522997/using-jquery-to-play-stop-youtube-multiple-iframe-players
  5. http://www.video-flash.de/index/swfobject-uber-google-ajax-libraries-laden/
  6. http://www.video-flash.de/index/swfobject-20-final-swfobject-zum-einbetten-von-flash-swf-in-html/
  7. http://blog.interactive-pioneers.de/swfobject2/
  8. http://www.video-flash.de/
  9. http://www.flashforum.de/forum/flash-einsteiger/flash-player-mittels-swf-object-einbinden-294229.html#post1986836

Die Einbettung von Flash-Objekten (*.swf-Dateien) in HTML-Seiten wird auf der folgenden Seite beschrieben:

Ein anderer schöner Flash-Player:

Flash Videos in statische HTML-Seiten einbinden

(mit Flowplayer)

Das Video-Tag (HTML5)


Andere Inhalte in HTML einbinden (z.B. PDF)

<embed src="lalala.pdf" type="application/pdf">

Bewertungsschluessel-fuer-d...chulen.p