Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- player [05.07.2017 14:43] – [ZHdK Blog auf Wordpress] lsotrug
+++ player [13.05.2025 17:29] (aktuell) – [Eigene Website: Embedded-Code einbinden] poettli
@@ Zeile 1: / Zeile 1: @@
 ====== Madek-Player ======
-Die URL eines öffentlichen Medieneintrages ermöglicht neu die Einbettung von Bildern, Videos und Audios in Websites, Blogs und Messaging Apps. Zusätzlich werden die Metadaten Titel, Autorschaft und Rechteinhaber mitgeliefert.
+Die URL eines öffentlichen Medieneintrages ermöglicht die Einbettung von Bildern, Videos und Audio-Files in Websites, Blogs und Messaging Apps. Zusätzlich werden die Metadaten Titel, Autorschaft und Rechteinhaber mitgeliefert.
-ZHdK Website Beispiele:
+  * Beispiele ZHdK Website: https://www.zhdk.ch/studium/musik
-https://preview-prod.zhdk.ch/3321 (benötigt Login)\\
+  * Beispiele Messaging Apps: https://blog.zhdk.ch/madektest/link-preview-collection/\\
-Messaging Apps Beispiele:
+  * Beispiel ZHdK Blog: https://blog.zhdk.ch/madektest/
-https://blog.zhdk.ch/madektest/link-preview-collection/\\
-ZHdK Blog Beispiele: https://blog.zhdk.ch/madektest/
-===== ZHdK Website auf Typo3 =====
+===== URL teilen =====
+Die URL zum Einbetten finden Sie unter dem "Teilen"-Button im kontextbezogenen Menü eines Medieneintrags. Wählen Sie aus zwischen der eindeutigen URL, wenn Sie explizit diesen Medieneintrag teilen wollen, und der sprechenden URL, wenn Sie wechselnde Inhalte anzeigen wollen.
-Für die richtige Implementierung und Darstellung des Players in Typo3 empfehlen wir folgendes Vorgehen:
+{{:madek_me_teilen.png?600|}}\\
+\\
+{{:madek_link_teilen.png?600|}}
-  - Erstellen Sie auf dem Overlay ein neues Inhaltselement an der gewünschten Stelle, indem Sie auf das "Content" Icon klicken {{:1_typo3.jpeg?600|}}
-  - Wählen Sie im Tab „Content“ das Element „Video“ aus {{:2_typo3.png?300|}}
-  - Im Tab „General“ sollte das Feld „Header“ leer bleiben {{:3_typo3.png?300|}}
-  - Im Tab „Assets“ klicken Sie auf die Schaltfläche „Add file“ {{:4_typo3.jpeg?300|}}
-Nun öffnet sich die Ordnerstruktur Filelist. Wählen Sie dann den entsprechenden Ordner aus. Im Bereich „Add new media asset“ tragen Sie die gewünschte URL aus dem Medienarchiv (oder Vimeo/ Youtube) ein. Bestätigen Sie die Selektion mit einem Klick auf die Schaltfläche „Add media“.
-{{:5_typo3.png|}}
+----
-URL-Beispiel (Bitte beachten Sie dass sprechende Adressen nicht unterstützt werden):
-{{:6_typo3.jpeg|}}
+===== ZHdK Website auf Typo3 =====
-Der Link zum Video erscheint nun in der Liste:
+Für die richtige Implementierung und Darstellung des Players in Typo3 konsultieren sie bitte die Anleitung (S.23-26) der HSK unter: [[https://intern.zhdk.ch/?typo3-publishing
+]]
- {{:7_typo3_hinweis.jpeg?600|}}
+===== ZHdK Blog auf Wordpress =====
-Setzen Sie nun das Häkchen und klicken Sie auf die Schaltfläche „import selection“, danach wird das Video hinzugefügt: {{:8_typo3.jpeg|}}
+Die ZHdK-Blogs (blog.zhdk.ch) erkennen automatisch die URLs des Medienarchivs.
+----
+===== Eigene Wordpress-Blogs =====
+** Madek-Plugin "madek-oembed" **
+Bei selbst gehosteten Wordpress-Seiten ist es erforderlich das Madek-Plugin zu installieren. Das Plugin stuft dann die Webseite medienarchiv.zhdk.ch als vertrauenswürdigen Provider (Medienanbieter) ein.
+** Vorgehen zur Installation **
+Das Plugin «[[https://wordpress.org/plugins/madek-oembed/|madek-oembed]]» kann im Register "Plugins > hinzufügen" (im Wordpress Dashboard) ausgewählt, installiert und aktiviert werden.
+Das Plugin kann auch direkt über die Entwickler-Plattform Github heruntergeladen werden:
+https://github.com/Madek/madek-wordpress-oembed-plugin
+Das nachfolgende Beispiel verwendet statt der automatischen oEmbed Variante (nur URL) die
+Wordpress-Syntax. Damit können Breite und Höhe konfiguriert werden.
+https://blog.zhdk.ch/madektest/2017/01/30/mini-video-beispiel/
-Eine vollständige Anleitung zu Typo 3 finden Sie unter:
+----
-https://intern.zhdk.ch/fileadmin/data_subsites/data_weboffice/ZHdK_Website_CMS-Dokumentation_04.04.2017_.pdf
+===== Eigene Website: Embedded-Code einbinden =====
-===== ZHdK Blog auf Wordpress =====
-Unsere ZHdK Blogs (blog.zhdk.ch) erkennen automatisch die URLs des Medienarchivs.
+In statischen Websites oder in gewissen Content Managmenet Systemen mit Quellcode-Bearbeitung kann gegebenenfalls direkt HTML-Code eingebunden werden. Dies erfordert einen IFRAME-Container im Quellcode, in dem die Medienarchiv-URL des Medieneintrags eingebunden wird:
-===== Eigene Wordpress-Blogs =====
+''<iframe src="MEDIENEINTRAG-URL/embedded&amp;height=360&amp;width=640" frameborder="0" width="640" height="360" style="margin:0;padding:0;border:0" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>''
-** Madek-Plugin "madek-oembed" **
-Bei selbst gehosteten Wordpress-Seiten ist es erforderlich den Madek-Plugin zu installieren. Das Plugin stuft dann die Webseite www.medienarchiv.zhdk.ch als vertrauenswürdigen Provider (Anbieter) ein.
-** Vorgehen zur Installation **
+Die Code-Sequenz ''MEDIENEINTRAG-URL'' durch die Medieneintrag-URL ersetzen.
-Das Plugin „madek-oembed“ kann im Register "Plugins > hinzufügen" (im Wordpress Dashboard) ausgewählt, installiert und aktiviert werden.
-Das Plugin kann auch direkt über die Entwickler-Plattform Github heruntergeladen werden:
+----
-https://github.com/Madek/madek-wordpress-oembed-plugin
-Das nachfolgende Beispiel verwendet statt der automatischen oEmbed Variante (nur URL) die
-Wordpress-Syntax. Damit können Breite und Höhe konfiguriert werden.
-https://blog.zhdk.ch/madektest/2017/01/30/mini-video-beispiel/
-===== URL teilen =====
-Die URL zum Einbetten finden Sie unter dem "Teilen"-Button im kontextbezogenen Menü eines Medieneintrags. Wählen Sie aus zwischen der eindeutigen URL, wenn Sie explizit diesen Medieneintrag teilen wollen, und der sprechenden URL, wenn Sie wechselnde Inhalte anzeigen wollen.
-{{:madek_me_teilen.png?600|}}\\
-\\
-{{:madek_link_teilen.png?600|}}
-===== Technischen Dokumentation =====
+===== Technische Dokumentation =====
-Weitere Informationen finden Sie in der technischen Dokumentation:
+Weitere Informationen zum Einbetten von Medienarchiv-Medien finden Sie in der technischen Dokumentation:
-https://github.com/Madek/madek-documentation/blob/c0bcaf3b003e4110efa0ca87141701e5b34bce6e/source/development/embeds.md
+https://github.com/Madek/madek-documentation/blob/master/source/development/embeds.md