Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
Letzte ÜberarbeitungBeide Seiten der Revision
einbinden_von_videos_podcasts_in_eine_webseite [2013/10/23 19:09] – [Einbidnen von mp3 Audiodateien] mg1023einbinden_von_videos_podcasts_in_eine_webseite [2016/01/25 16:23] jz1001
Zeile 1: Zeile 1:
-====== Einbinden von Videos und (Audio-)Podcasts in eine Webseite ======+====== Einbinden von Videos und Audiodateien in eine Webseite ======
  
-<note important>Diese Anleitung gilt nur für Videos, die auf dem Videoserver Podcast2 liegen</note> +Zum hochladen von Videos in die Mediathek benötigen Sie AutorenrechteMelden Sie sich dazu einmal mit Ihrem Uni-Account und dem dazugehörigen Passwort an der Mediathek an 
-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:+
  
-====== Hochladen der Audio bzw. Video Datei auf den Podcastserver ======+====== Login ======
  
-https://podcast2.ruf.uni-freiburg.de:8170/podcastproducer/capture/login\\+https://mediathek.vm.uni-freiburg.de\\
 Melden Sie sich mit Ihrem Uni-Account an. \\ Melden Sie sich mit Ihrem Uni-Account an. \\
-{{:video:pcp2_login.png|}}+{{:video:mediathek_single_sign_on.png|}} 
 +\\ 
 +\\
  
-Wählen Sie anschließend "Datei" und suchen Ihr Video aus.\\ +====== Anfrage Autorenrecht ======
-{{:video:pcp2_upload.png|}}\\ +
-Wählen Sie anschließend unter Arbeitsablauf „Datei-Upload“\\ +
-{{:video:pcp2_workflow_upload.png|}}\\ +
-Unter Episode geben Sie einen kurzen Namen des Videos ein. Benutzen Sie keine Umlaute oder Sonderzeichen im Namen. Die "Beschreibung" wird nicht benötigt.\\ +
-{{:video:pcp2_episode_beschr.png|}}\\+
  
-Anschließend noch auf Veröffentlichen klicken. +Klicken Sie nach erfolgreichem Login auf "Anfrage" und dann auf "Ich möchte Autor werden"Die Mediathek versendet automatisch eine Anfrage an die Administratoren, welche Ihnen die Autorenrechte einrichten.\\ 
-Ihr Video wird nun auf den Server hochgeladen und geprüftDiese Überprüfung kann je nach Größe der Videodatei einige Zeit in Anspruch nehmen+{{:video:mediathek_autor.png|}}\\ 
-Sie erhalten anschließend eine Emailbenachrichtigung+\\ 
 +\\
  
-====== Einbinden in eine Webseite======+====== Upload ======
  
-Öffnen Sie den in der Email enthaltenen Link zu Ihrem Video.\\ +Sobald Sie die Autorenrechte haben, können Sie Videos hochladen. Loggen Sie sich dazu erneut an der Mediathek an.\\ 
-{{:video:pcp2_email.jpg|}}\\ +Klicken Sie auf "Upload" und ziehen eine oder mehrere Dateien per Drag and Drop in das Upload-Fenster oder klicken Sie auf Datei und navigieren zu Ihrer VideodateiKlicken Sie nun auf "Hochladen".\\
- +
-Sie sehen nun in Ihrem Webbrowser die http-Adresse die wie folgt aussieht:\\ +
-{{:video:pcp2_script_pfad.jpg|}}\\ +
- +
-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/javascriptsrc="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> +
- +
- +
-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:\\ 
-  
-  <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,'','','07','player_1'); 
-  embedHTML.writeHTML();  
-  </script> 
-   
 \\ \\
- +{{:video:mediathek_upload2.png|}}\\
-**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:**\\ +====== Beitrag erstellen ======
-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:\\+Gehen Sie nun auf "Neuer Beitrag".\\ 
 +Vergeben Sie einen Titel für das Video. Den Titel können Sie jederzeit ändern, siehe weiter unten.\\ 
 +Klicken Sie nun auf "Neuen Beitrag anlegen".
 \\ \\
-{{:video:playbutton.png?200|}}\\ 
 \\ \\
-**Mehrere Videos gleichzeitig auf eine HTML-Seite einbinden**\\+{{:video:mediathek_neuerbeitrag.png|}}\\ 
 +\\ 
 +\\ 
 +Sie gelangen automatisch auf die nächste Bearbeitungsseite.\\ 
 +Das Vorschaubild wird automatisch nach der Umrechnung des Videos erstellt. Sie sehen solange ein Default-Bild. Sie können aber auch ein eigenes Vorschaubild hochladen.\\ 
 +Unter "Referent/in" wird per Default immer der Name des Video-Uploader eingetragen, welchen Sie bei Bedarf einfach ändern können.\\ 
 +Wählen Sie nun noch eine Beitragsreihe aus, fügen eine Beschreibung ein und vergeben noch entsprechende Tags.\\ 
 +Speichern Sie nun Ihren Beitrag. Das Video bekommt nun den Status "In Bearbeitung".\\ 
 +\\ 
 +{{:video:mediathek_beitragsdetails.png|}}\\ 
 +\\ 
 +Ihr Video wird nun automatisch in zwei Größen umgerechnet (720p und 360p) und dies kann je nach Größe des Videos einige Minuten in Anspruch nehmen. Nach erfolgter Umrechnung wird das Vorschaubild generiert.\\
 \\ \\
-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 ==== +====== Video veröffentlichen ======
-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 === +Sobald das Video umgerechnet wurde erhält es den Status "Veröffentlichung ausstehend".\\ 
- +{{:video:mediathek_veroeffentlichen.png|}}\\ 
-Dieses Skript kopieren Sie in den Quelltext (HTML) ihrer Webseite und ändern den Pfad zur Audiodatei+<note important>Mit dem nächsten Update der Mediathek wird eine automatische Emailbenachrichtigung gesendet. Nutzen Sie bitte derweil die Funktion "Seite neu ladenvon Ihrem Webbrowser um die Statusänderung zu verfolgen.</note
- +\\ 
- +Sie können rechts unter Funktionen jederzeit die Beitragsdetails Ihres Videos ändernden Beitrag veröffentlichen oder auch wieder zurück ziehen oder aber den Beitrag unwiderruflich löschen.\\ 
-  <script type="text/javascriptsrc="https://www.streaming.uni-freiburg.de/skripte/flash/embedvideo_new.js"></script>  +\\ 
-  <script type="text/javascript"> +==== Embed Code ====
-  var embedHTML = new media('movie/UNI-Account/meinAudio.mp3','','40',300,'','','20','player_1'); +
-  embedHTML.writeHTML();  +
-  </script> +
- +
- +
-=== Großer Player === +
-Um einen großen Player (ähnlich dem Video Format) mit optionalem Posterbild zu bekommen, verwenden Sie einfach das folgende Script zum Einbetten Ihrer Audiodatei. Das Postbild wird genau wie bei bei Videos eingebunden (siehe oben). +
- +
-  <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','','40',300,'','','21','player_1'); +
-  embedHTML.writeHTML();  +
-  </script>+
  
 +Sobald das Video veröffentlicht ist, erscheint unter dem Player der "Embed Code". Klicken Sie darauf, kopieren und fügen diesen in Ihre Webseite ein.\\
 +\\
 +{{:video:mediathek_embed.png|}}\\
 {{tag>video streaming podcasts}} {{tag>video streaming podcasts}}
QR-Code
QR-Code einbinden_von_videos_podcasts_in_eine_webseite (erstellt für aktuelle Seite)