Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		Vorhergehende Überarbeitung
Nächste ÜberarbeitungBeide Seiten der Revision
einbinden_von_videos_podcasts_in_eine_webseite [2011/06/15 17:46] – angelegt jz1001einbinden_von_videos_podcasts_in_eine_webseite [2013/10/23 15:39] – mg1023
Zeile 1: Zeile 1:
-<note important>Diese Anleitung gilt nur für Videos, die auf dem Videoserver Podcast2 liegen</note>+====== Einbinden von Videos und (Audio-)Podcasts in eine Webseite ======
  
 +<note important>Diese Anleitung gilt nur für Videos, die auf dem Videoserver Podcast2 liegen</note>
 +Damit das Video mit diesem Skript in eine Webseite eingebunden werden kann, muss die Videodatei zuerst auf den Videoserver hochgeladen werden.
 Das Video liegt bereits in einem passendem Format (MPEG-4, FLV mit Streaming - siehe „[[videokonvertierung|Konvertieren von Videos]]“) vor. Zum hochladen der Videodatei öffnen Sie im Webbrowser folgenden Link: Das Video liegt bereits in einem passendem Format (MPEG-4, FLV mit Streaming - siehe „[[videokonvertierung|Konvertieren von Videos]]“) vor. Zum hochladen der Videodatei öffnen Sie im Webbrowser folgenden Link:
 +
 +====== Hochladen der Audio bzw. Video Datei auf den Podcastserver ======
  
 https://podcast2.ruf.uni-freiburg.de:8170/podcastproducer/capture/login\\ https://podcast2.ruf.uni-freiburg.de:8170/podcastproducer/capture/login\\
Zeile 15: Zeile 19:
  
 Anschließend noch auf Veröffentlichen klicken. Anschließend noch auf Veröffentlichen klicken.
-Ihr Video wird nun auf den Server hochgeladen. +Ihr Video wird nun auf den Server hochgeladen und geprüft. Diese Überprüfung kann je nach Größe der Videodatei einige Zeit in Anspruch nehmen. 
-Sie erhalten nach einigen Minuten automatisch eine Emailbenachrichtigung. +Sie erhalten anschließend eine Emailbenachrichtigung. 
  
-Öffnen Sie den in der Emailbenachrichtigung enthaltenen Link zu Ihrem Video.\\+====== Einbinden in eine Webseite====== 
 + 
 +Öffnen Sie den in der Email enthaltenen Link zu Ihrem Video.\\
 {{:video:pcp2_email.jpg|}}\\ {{:video:pcp2_email.jpg|}}\\
  
Zeile 26: Zeile 32:
 Sie müssen nur den Teil ab movie/.. in das unten stehende Skript kopieren und dieses in Ihre Webseite einbinden.   Sie müssen nur den Teil ab movie/.. in das unten stehende Skript kopieren und dieses in Ihre Webseite einbinden.  
    
 +==== Einbinden von Videos ====
 +Diese Skript kopieren Sie in Ihre Webseite und ändern den Pfad zum Video:
 + 
 +  <script type="text/javascript" src="https://www.streaming.uni-freiburg.de/skripte/flash/embedvideo_new.js"></script> 
 +  <script type="text/javascript">
 +  var embedHTML = new media('movie/UNI-Account/meinVideo.mp4','',360,640,'','','07','player_1');
 +  embedHTML.writeHTML(); 
 +  </script>
  
-Skript zum einbinden des Videos in eine Webseite:+ 
 +Die Zahlen 360,640 hinter dem Videopfad im Skript definieren die Videogröße (Höhe, Breite) auf Ihrer Webseite. Dies können Sie nach Ihren Bedürfnissen anpassen.\\ 
 +\\ 
 +**Beispiel:**\\ 
 +Die HTTP-Adresse im Webbrowser lautet:\\ 
 +http://podcast2.ruf.uni-freiburg.de/movie/jz1099/2011-06-23/meinfilm.mp4\\ 
 +Dann muss in dem Skript die Zeile mit "var embedHTML = new media...." folgendermaßen geändert werden:\\
    
-<note tip><script type="text/javascript" src="http://www.streaming.uni-freiburg.de/skripte/flash/embedvideo.js"></script> +  <script type="text/javascript" src="https://www.streaming.uni-freiburg.de/skripte/flash/embedvideo_new.js"></script>  
-<script type="text/javascript"> +  <script type="text/javascript"> 
- var embedHTML = new media('movie/Ihr_UNI-ACCOUNT_Name/DATUMSORDNER/VIDEONAME.mov',240,320,'','00'); +  var embedHTML = new media('movie/jz1099/2013-02-23/meinfilm.mp4','',360,640,'','','07','player_1'); 
- embedHTML.writeHTML();  +  embedHTML.writeHTML();  
-</script> +  </script> 
-</note>+   
 +\\ 
 + 
 +**Erklärung der Zeile new media:**\\ 
 +\\ 
 +Zwischen den einzelnen Hochkommas '' können Sie unterschiedliche Informationen oder Parameter mitgeben. Das ganze baut sich folgendermaßen auf:\\ 
 + 
 +('Pfad Videodatei','HD-Version',360(Player-Höhe),640(Player-Breite),'Vorschaubild','Playbutton-Titel','07(Skript-ID),'eindeutige Player ID')\\ 
 +\\ 
 + 
 +**Beispiel mit Posterbild:**\\ 
 +Kopieren Sie Ihr Posterbild auf Ihren Webserver und fügen die vollständige URL in das Skript hinter der Videogröße und zwischen den zwei Hochkommas '' ein. Beispiel Pfad zum Posterbild:\\ 
 +http://www.webserver.de/ordner/posterbild.jpg\\ 
 +Dann muss in dem Skript die Zeile mit "var embedHTML = new media...." folgendermaßen geändert werden:\\ 
 +  
 +  <script type="text/javascript" src="https://www.streaming.uni-freiburg.de/skripte/flash/embedvideo_new.js"></script>  
 +  <script type="text/javascript"> 
 +  var embedHTML = new media('movie/jz1099/2013-02-23/meinfilm.mp4','',360,640,'http://www.webserver.de/ordner/posterbild.jpg','','07','player_1'); 
 +  embedHTML.writeHTML();  
 +  </script> 
 +   
 +   
 +**Beispiel mit Posterbild und mit Playbutton-Titel:**\\ 
 +Sie können am Playbutton einen Titel einfügen zum Beispiel "Play Podcast"\\ 
 +Dann muss in dem Skript die Zeile mit "var embedHTML = new media...." folgendermaßen geändert werden:\\ 
 +  
 +  <script type="text/javascript" src="https://www.streaming.uni-freiburg.de/skripte/flash/embedvideo_new.js"></script>  
 +  <script type="text/javascript"> 
 +  var embedHTML = new media('movie/jz1099/2013-02-23/meinfilm.mp4','',360,640,'/Bilder/playerbackground.jpg','Play Podcast','07','player_1'); 
 +  embedHTML.writeHTML();  
 +  </script> 
 + 
 +Dann sieht der Player folgendermaßen aus:\\ 
 +\\ 
 +{{:video:playbutton.png?200|}}\\ 
 +\\ 
 +**Mehrere Videos gleichzeitig auf eine HTML-Seite einbinden**\\ 
 +\\ 
 +Jedes Video benötigt eine eindeutige und gültige Player-ID. Wenn Sie also mehrere Videos auf eine einzige HTML-Seite einbinden möchten, dann müssen Sie jedem Video eine eindeutige ID geben. Ändern Sie dazu am Ende der Zeile "var embedHTML = new media..." die Player-ID und zählen für jedes Video hoch, also 'player_1' und für das nächste Video 'player_2'.\\ 
 + 
 +==== Einbidnen von mp3 Audiodateien ==== 
 +Sie könne Audiodateien auf zwei verschiedene Arten einbidnen: zum einen als flachen, einzeiligen Player und zum anderen als "Quasi"-Player mit schwarzen Hintergrund:
  
 +=== Flacher Player ===
  
-Die Zahlen 240,320 hinter dem Videopfad im Skript definieren die Videogröße (Höhe, Breite) auf Ihrer Webseite. Dies können Sie nach Ihren Bedürfnissen anpassen.+Dieses Skript kopieren Sie in den Quelltext (HTML) ihrer Webseite und ändern den Pfad zur Audiodatei: 
 +  
 +  <script type="text/javascript" src="https://www.streaming.uni-freiburg.de/skripte/flash/embedvideo_new.js"></script>  
 +  <script type="text/javascript"> 
 +  var embedHTML = new media('movie/UNI-Account/meinAudio.mp3','',,300,'','','20','player_1'); 
 +  embedHTML.writeHTML();  
 +  </script>
  
-{{tag>video streaming}}+{{tag>video streaming podcasts}}

Zuletzt angesehen:

QR-Code
QR-Code einbinden_von_videos_podcasts_in_eine_webseite (erstellt für aktuelle Seite)