vložení přehrávače videí do jiných stránek (bez iframe)

9.4.2013 11:33
You can subscribe to this wiki article using an RSS feed reader.

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

 

Vložení přehrávače videí z portálu Medicalmedia do jiných stánek (no iframe)

Platí pouze pro videa, která jsou na medicalmedia.cz volně dostupná a nevyžadují autentizaci (mají zelenou ikonu). Pro povolené weby lze zpřístupnit i videa chráněná na přihlášeného 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/medicalmedia/volne.html

 

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

1. do hlavičky stánky nalinkujeme JavaScript knihovny jQuery a flowplayeru 

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:
4:
5:
6:
<!-- 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="http://www.medicalmedia.eu/jslibs/jquery-142/jquery-1.4.2.min.js"></script>

<!-- Flowplayer -->
<script type="text/javascript" src="http://www.medicalmedia.eu/jslibs/flowplayer/flowplayer-3.2.4.min.js"></script>
 
 

2. Do hlavičky dále vložíme tento javascript: 

 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
<script type="text/javascript">
$(document).ready(function(){
	
	$('a.video').each(function(index) {
		
		var playBtnW = 95;
		var playBtnH = 95;
		
		//zjistíme ID videa
	  	var xUrl = $(this).attr('href');
		var videoUrl = "mp4:" + xUrl;
		var videoId = xUrl.substring(0, xUrl.indexOf("-"));
		
		//nastavíme obrázek na pozadí
		var videoW = $(this).css('width').replace('px','');
		var videoH = $(this).css('height').replace('px','');
		var backUrl = "http://www.medicalmedia.eu/data/" + videoId + "/snapshot.jpg.fmm.ashx?size=" + videoW + "&sizapp=true&cache=false";
		$(this).css('background-image', 'url("' + backUrl + '")');
		$(this).css('background-size', videoW + 'px ' + videoH + 'px');
				
		//nastavíme umístění tlačítka play doprostřed videa
		var btnX = ((videoW/2)-(playBtnW/2)).toFixed(); 
		var btnY = ((videoH/2)-(playBtnH/2)).toFixed();
		var btnPos = btnY + "px 0 0 " + btnX + "px";
		var imgObj = $(this).children("img");
		imgObj.css("padding",btnPos);
		
		//aktivace Flowplayeru pro každé video
		var video_box  = $(this);
		video_box.attr('id', 'mmplayer-' + index);
		
		$f(video_box.attr('id'), 'http://www.medicalmedia.eu/jslibs/flowplayer/flowplayer.commercial-3.2.5.swf', {    
			
			// TOTO JE TŘEBA NAHRADIT KLÍČEM PRO DANOU DOMÉNU / KONTAKTUJTE TOMÁŠE NIKLA Z 1.LF UK
			key: '#@402fdce8768f829cb94',
			
			play: {		
			url: 'http://www.medicalmedia.eu/css/img/flowplayerPlayButton.png',
			width: playBtnW,
			height: playBtnH
			},
	
			plugins:  {
				
				rtmp: {
					url: 'http://www.medicalmedia.eu/jslibs/flowplayer/flowplayer.rtmp-3.2.3.swf',
					netConnectionUrl: 'rtmp://server14.streaming.cesnet.cz/medicalmedias'
					}
			  },
			
			clip: {
				autoPlay: true,
				url: videoUrl,
				provider: 'rtmp',
				connectionArgs: [videoUrl]
				
            }
        });
    });
}); 
</script>
 

3. Do samotné stánky, kde má být video, pak stačí vložit standardní a href s parametry:

 
1:
2:
3:
4:
5:
<a class="video" href="210-1.mp4" style="display:block; width:600px; height:400px;"> 
    <img src='http://www.medicalmedia.eu/css/img/flowplayerPlayButton.png'  /> </a>
<p>&nbsp;</p>
<a class="video" href="211-1.mp4" style="display:block; width:600px; height:400px;">
<img src='http://www.medicalmedia.eu/css/img/flowplayerPlayButton.png' /> </a>
 

Vysvětlivky k parametrům

 

<a class="video" href="210-1.mp4" style="display:block; width:600px; height:400px;"> 
    <img src='http://www.medicalmedia.eu/css/img/flowplayerPlayButton.png'  /> </a>
 

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

http://www.medicalmedia.eu/detail.aspx?lang=cz&ID=210

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.