HTML 5 přehrávač pro MEFANET

13.6.2014 14:25
You can subscribe to this wiki article using an RSS feed reader.

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

 

Vložení HTML 5 přehrávače videí z portálu Medicalmedia do jiných stánek (no iframe) - vytvořeno pro portály MEFANET

Platí pouze pro videa, která jsou na medicalmedia.cz volně dostupná a nevyžadují autentizaci (mají zelenou ikonu) nebo jsou chráněná na přihlášení uživatele. 

 

Aby byl celý systém funkční, je třeba kromě níže uvedených věcí provést ještě následující kroky:
 
- přidat doménu, kde Player běží, do povolených domén na Flash Media Serveru - zařizuje Digital Media na žádost správce serveru Medicalmedia - Tomáš Nikl z 1.LF UK
 
- pokud chcete na vašem portálu přehrávat i videa chráněná na přihlášeného uživatele, je nutné o to zažádat  - zařizuje Digital Media na žádost správce serveru Medicalmedia - Tomáš Nikl z 1.LF UK
 
- vygenerovat kód pro Flowplayer (aby zmizelo logo z přehrávače) -  zařizuje Tomáš Nikl z 1.LF UK
 
prosím posílejte žádosti na e-learning@lf1.cuni.cz
 
 
Ukázka stránky s vloženým videem: http://www.cinema4d.cz/test/video/hlsvideo-mefanet.html

 

Do HTML stránky vložíme následující části:

1. do hlavičky stánky nalinkujeme JavaScript knihovnu jQuery (pokud již JQuery nepoužíváte sami) 

Níže uvedené knihovny jsou v kódu čteny přímo z medicalmedia.eu, ale můžete si je "stáhnout" k sobě a používat odkazy na ně. Pokud tak učiníte, mějte na paměti, že Flowplayer je nutné mít ve stejné verzi jako na medicalmedia.eu, protože Media Server kontroluje, zda je player stejný a pokud ne, tak stream vůbec nepustí. 

1:
2:
3:
<!-- jQuery -->
//POZOR - pokud na svých stránkách už používáte JQuery, tak tam tento řádek nedávejte !
<script type="text/javascript" src="//www.videoadmin.eu/api/mefanet/jquery.min.js"></script>
 
 

2. Do hlavičky dále vložíme javascript s Flowplayer přehrávačem: 

 
1:
2:
3:
4:
<!-- EXPERIMENTAL - bude změněno --> 
<!-- Flowplayer library and style-->
<script src="http://www.medicalmedia.eu/flowplayermobile/flowplayer.min.js"></script>
<link rel="stylesheet" href="http://www.cinema4d.cz/test/video/flowplayer.commercial-5.4.6/skin/minimalist.css">
 
a javascript pro vygenerování HTML 5 přehrávače videa
 
 
1:
2:
3:
<!-- EXPERIMENTAL - bude změněno --> 
<!-- HTML 5 Player for MEFANET -->
<script src="http://www.cinema4d.cz/test/video/direct.video.mobile.js"></script>

3. Do samotné stánky, kde má být video, pak stačí vložit standardní a href s parametry - toto je stejné jako u FLASH přehrávače, obsah stránky tedy zůstává stejný !!!:

 
1:
2:
3:
<a class="video" href="210-2.mp4" style="width:600px; height:400px;">video</a>

<a class="video" href="210-2.mp4" style="width:600px; height:400px;">video</a>
 

Vysvětlivky k parametrům

 

<a class="video" href="210-1.mp4" style="width:600px; height:400px;">video</a>
 

210-1.mp4
do parametru a href umístíme odkaz na video ve tvaru IDvideo-kvalita.koncovka videa. ID videa zjistíme ze stránek medicalmedia - po kliknutí na přehrání videa uvidíme v URL adrese i parametr ID (poslední číslo)

http://www.medicalmedia.eu/cs/Detail/452

Kvality máme 1 (základní), 2 (střední), 3(vysohá) a 4(full HD), přičemž kvalita 1 existuje vždy, ostatní jsou jen u některých videí. Pokud chcete použít vyšší kvalitu, vždy si předem na medicalmedia ověřte, že existují!

Pokud v našem případě používáme video i ID 210, na stránkách medicalmedia si ověříme, že k tomuto videu existují všechny kvality. Pokud na svých stránkách bude přehrávat video v rozlišení 600 x 400 bodů, tak si vystačíme s kvalitou 1 nebo 2.

 

width:600px; height:400px;
šířka a výška videa, jak se bude přehrávat na vašem portálu. Měly by odpovídat poměru stran, v jakém je video nabízeno na portálu medicalmedia.