vložení přehrávače chráněných videí přes iframe - exPlayer

5.6.2014 10:17
You can subscribe to this wiki article using an RSS feed reader.

◄ Zpět na hlavní stránku projektu Medicalmedia

Předběžná technická dokumentace k iFrame přehrávači videí z medicalmedia.eu a dalších portálů

Co to je iFrame Player?
iFrame player je externí přehrávač chráněných videí z medicalmedia.eu, určený pro vložení do jiných stránek pomocí HTML elementu iFrame. Pokud Váš redakční systém neumožňujě vkládat do stránek přímo element iFrame (například Wikiskripta, MEFANET apod.), lze to obejít například vložením standardního odkazu A HREF a použitím JavaScriptu, který tato elementy "překonvertuje" do podoby iFrame až na straně klienta při zobrazení stránky - viz sekce A níže.

Jaká videa lze iFrame playerem přehrávat?
Pouze publikovaná (vystavená) videa a z nich ta, která jsou volně dostupná, videa vázaná na přihlášení uživatele a videa vázaná na přihlášení uživatelé z konkrétní fakulty.

Jak je chráněno přehrávání videí přes iFrame player?
iFrame player je do jiných stránek vkládán jako iframe, tedy je to kus webu medicalmedia, který se jen zobrazuje na jiném webu. Máme tedy plnou kontrolu nad během přehrávače, logikou chování apod. Při jakékoliv změně iFrame playeru se to projeví na všech stránkách, kam je vložen.

Jak probíhá autentizace uživatelů a podle čeho se zjišťuje, zda uživatel má právo dané video prohlížet?
Přístupová práva k jednotlivým videům jsou definovaná v rámci portálu medicalmedia.eu, do kterého se uživatelé přihlašují systémem Shibboleth. Pokud je video vloženo do jiných stránek, musí uživatel provést autentizaci přes medicalmedia.eu (a zprostředkovaně přes systém Shibboleth), protože jedině tak může dojít k vyhodnocení infomací o tom, k jakým videům má dotačná osoba přístupová práva a k jakým ne.

Co když stránky, do kterých se video přehrávač vkládá, jsou taktéž autentizovány přes systém Shibboleth?
Dřívější autentizace prostřednictvím Shibbolethu na stránky, kam je video vloženo, nemá vliv na autentizaci k prohlížení samotného videa. Proč? Portál medicalmedia, který video distrubuuje, musí totiž sám vyhodnotit údaje z Shibbolethu a zjistit, zda dotyčný má právo prohlížet dané video či ne. Autentizace uživatele s následným povolením čtení dané stránky (jak si ho nadefinují správci portálu, kde dané stránky běží) ještě neznamená, že dotyčný má právo na prohlížení nějakého videa. Toto právo je definováno jen a pouze v rámci portálu medicalmedia.eu.  

Co to bude znamenat pro uživatele?
Uživatel u každého náhledu videa dostane textovou informaci, kdo má právo toto video přehrávat. V případě chráněných videí tak bnude muset uživatel minimálně jednou provést autentizaci prostřednictvím medicalmedia.eu+Shibboleth, aby mohla být zjištěna jeho přístupová práva. Po úspěšném přihlášení je uživatel přesměrovám zpět na stránky s vloženým videem a je mu umožněno přehrávání i dalších videí (pokud k nim má právo) bez nutnosti další autentizace a to minimálně po dobu, po kterou běží session medicalmedia v prohlížeči.

Lze iFram vložit kamkoliv?
Ano, nicméně pro vložení exPlayeru se používá prvek iFrame, který není podporován v některých publikačních systémech na bázi standardu  XHTML. Pokud takový systém stránky využívají, bude nutné přehrávač vložit do stránky jako například klasický odkaz <a href- ...> nebo zcela vlastní tag ve formátu BBcode (např.: [video=200,640,480,1]), ze který se pak při sestavení stránky vygeneruje (ať již redakčním systémem nebo klientským javascriptem) samotný iframe.

 

 

A: Video vložené do stránky pomocí standardního tagu a href, přičemž záměna za iframe je provedena pomocí klientského Javaskriptu

Live ukázka na stránce http://www.medicalmedia.eu/iframes.htm

Live ukázka na stránce http://www.cinema4d.cz/test/medicalmedia/exPlayer.html

1. Do hlavičky dokumentu vložíme Javascript, který při načtení stránky nahradí všechny tagy a href s třídou exPlayer za iframe

Medicalmedia 2.0 - nový skript:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
<script type="text/javascript">
$(document).ready(function(){
	$(".exPlayer").each(function(){
        var url = $(this).attr('href');
		var px = url.split('-');
		var vWidth = parseInt(px[1])+80;
		var vHeight  = parseInt(px[2])+80;
		$(this).replaceWith("<iframe src='http://www.medicalmedia.eu/cs/detail/embed/" + px[0] + vWidth + "px' height='" + vHeight + "px' frameborder='0'></iframe><br />");  
    });
	
}); 

</script>

Medicalmedia 1.0 - starý skript:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
<script type="text/javascript">
$(document).ready(function(){
	$(".exPlayer").each(function(){
        var url = $(this).attr('href');
		var px = url.split('-');
		var vWidth = parseInt(px[1])+80;
		var vHeight  = parseInt(px[2])+80;
		$(this).replaceWith("<iframe src='http://www.medicalmedia.eu/exPlayer.aspx?ID=" + px[0] + "&w=" + vWidth + "' width='" + vWidth + "px' height='" + vHeight + "px' frameborder='0'></iframe><br />");  
    });
	
}); 

</script>

2. Do samotné HTML stránky se pak vloží na místo videa standardní parametry a href= s tím, že jeho obsahem bude řetězec ve formě "ID videa"-"šířka videa"-"výška-videa" a tento ahref bude jmít přidělen class "exPlayer"

Ukázka: 

<a class="exPlayer" href="210-640-480"></a>

kde 210 je ID videa na medicalmedia.eu, 640 je šířka videa v pixelech a 480 je výška videa v pixelech.

 

B: Video vložené do stánky přímo pomocí iframe

1. Do HTML vaší stránky vložte následující kód:

<iframe src="http://www.medicalmedia.eu/cs/detail/embed/400" width="640px" height="500px" frameborder="0" scrolling="no"></iframe>

přičemž:

  • 400 je ID videa, které do stránky vkládáme
  • 640px je šířka vkládaného videa
  • 500px je výška videa

 

Výše uvedené parametry videa získáte v administrační části webu videoadmin.eu. Co se týče profilů videa, informace o nich získáte opět v administraci. Stačí v přehledu videí kliknout u daného videa na modrou ikonku i

kde v dolní části informačního výpisu najdete informace o profilech videa a jejich rozměrech. Všechny videa bez výjimky jsou dostupná v základním profilu 1 s výchozí šířkou videa 640 px. Pokud bylo původní video do systému vloženo ve větším rozlišení, tak u videa budou i další profily 2 nebo vyšší. Co se rozlišení týká, můžete použít výchozí rozlišení daného profilu, tedy například 640px, ale také jakékoliv jiné. Iframe pak na základě zadaného parametru šířky sám vybere nejbližší profil, který použije (v našem případě by to byl profil 1).

 

Parametry width a height u iframe

Parametry width a height u iframe vyjadřují velikost samotného iframu, který bude vložen do vašich stránek. Volte s ohledem na rozlišení samotného videa.

Příklad: do iFrame chci vložit video o šířce 640px. Podíváme se tedy do administrace na profily daného videa

Profil Šířka Výška Formát Audio
codec
Video codec Audio
samplerate
Audio
bitrate
Video
bitrate
Video
framerate
Velikost
souboru
Datum / čas
1 640 px 348 px mp4 aac MainConcept H.264 44100 112 kbps 1000 kbps 25 fps 29 MB 30.5.2011 10:32
2 720 px 392 px mp4 aac MainConcept H.264 44100 128 kbps 1400 kbps 25 fps 40 MB 30.5.2011 10:32

 

Pro video 640px velikost iframe bude width="640px" a height="348px". Nakonec přidáme ještě parametr frameborder="0", kterým odstraníme nežádoucí rámeček okolo iframe a scrolling="no", aby nedocházelo ke scrollingu. Zde je pak finální kód:


<iframe src="http://www.videoadmin.eu/cs/detail/embed/210" width="640px" height="348px" frameborder="0" scrolling="no"></iframe>

 
 

Starý popis k Medicalmedia 1.0

<iframe src="http://www.medicalmedia.eu/exPlayer.aspx?ID=136&w=640" width="640px" height="500px"frameborder="0"></iframe>

2. Pokud vaše stránky používají šifrování SSL, musíte přidat do parametrů videa adresu stránky. V případě autentizace uživatele pak bude autentizační skript na medicalmedia.eu vědět, kam se má po úspěšné autentizaci uživatele vrátit ( při SSL šifrování se totiž z iframe nelze dotazovat na URL stránky, do které je iFrame vložený)

<iframe src="http://www.medicalmedia.eu/exPlayer.aspx?ID=136&w=640&url=https://mujportal.cz/vyuka.html" width="640px" height="500px"frameborder="0"></iframe>

 

Vysvětlení jednotlivých parametrů:

parametr vysvětlení pozn.
ID ID videa pouze publikovaná videa!
w šířka videa v pixelech výška je dopočítávána automaticky
p ID profilu videa -nepovinný parametr 1, 2, 3 nebo 4. Pokud není definováno, použije se nejbližší lepší profil podle šířky videa v parametru w.
url

url stránky, do které je vloženo video

-nepovinný parametr

pouze pokud stránky běží se šifrováním SSL

Výše uvedené parametry videa získáte v administrační části webu medicalmedia.eu. Co se týče profilů videa, informace o nich získáte opět v administraci. Stačí v přehledu videí kliknout u daného videa na modrou ikonku i