Embedding médií
Portály umožňují vkládat média (video, audio a playlisty) do webových stránek třetích stran pomocí vhodně nakonfigurovaného IFRAME. Doporučený poměr stran IFRAME je 16:9
URL, které v IFRAME funguje je
- pro mediální soubor: {PortalURL}/media/embed/{identifikátor_média}
Příklad: https://embed.cuni.fenomio.stream/media/embed/b1cc5536576f49a991db948e0e30b48e - pro playlist: {PortalURL}/playlist/embed/{identifikátor_playlistu}
Příklad: https://embed.cuni.fenomio.stream/playlist/embed/18f7dab79260438198da39441f65e402
PortalURL je url homepage příslušného portálu.
Je možno také použít centrální variantu pro celou platformu https://embed.cuni.fenomio.stream, pak systém sám přesměruje na správný portál (informace je obsažena v identifikátoru videa).
Jako identifikátor_média je možno použít:
- guid - preferovaná varianta, je součástí URL, která vidíme na portálu
- id - z důvodu zpětné kompatibility
Pomocný javascript
Pro použití na stránkách, kde je problematické vkládání značky IFRAME, typicky z důvodu bezpečnostních omezení redakčního systému je k dispozici javascript, který vkládá dynamicky správný IFRAME s embedovaným videm místo vhodně odekorovaného HTML odkazu - značky <a>. Doporučujeme tento soubor nekopírovat do vašich projektů ale odkazovat jej z příslušného portálu, nebo centrálního místa, protože ho můžeme vylepšovat a vy tak získáte vždy aktuální verzi. Skript je zcela samonosný a není závislý na externích knihovnách.
Odkaz na javascript do hlavičky stránky
<!-- varianta pro celou platformu --> <script type="text/javascript" src="https://embed.cuni.fenomio.stream/api/helpers/js/embedjs"></script> <!-- varianta pro konkrétní portál (zde Pilot) --> <script type="text/javascript" src="https://pilot.cuni.fenomio.stream/api/helpers/js/embedjs"></script>
Doporučené formátování odkazu ve stránce
<a class="videoadmin-eu" href="#" data-video="12345679" data-width="640" data-height="360">tady bude video</a>
Nastavení jsou definována pomocí data-atributů
- data-video - identifikátor_média
- data-width - šířka IFRAME
- data-height - výška IFRAME
Pro zpětnou kompatibilitu počítáme také s
- možností, že odkaz obsahuje identifikátor videa v parametru href
- a možností že velikost je dána pomocí inline CSS stylu
<a class="videoadmin-eu" href="#12345679" style="height: 720px; width: 1280px">tady bude video</a>
Funkční ukázka samostatného videa
...Funkční ukázka samostatného playlistu
... ...