Главная » Полезные статьи » Язык PHP » Вставка видео на сайт. Вставляем всплывающее окошко с видеоплеером JW Player на сайт
Распечатать статью

Вставка видео на сайт. Вставляем всплывающее окошко с видеоплеером JW Player на сайт

При нажатии на картинку открывается окно с плеером и начинает проигрываться видеоролик. Рассказываем о том, как вставить видео на сайт при помощи JW Player проигрывателя.

Иногда хочется поместить на главную страницу видео ролик, демонстрирующий или рассказывающий о том, для чего этот проект. Пользователь не любит читать, и поэтому видеоряд это хорошая возможность зацепить его интерес. Нужно только смонтировать качественный и красивый ролик. А как его встроить на сайт, сейчас увидим.

В качестве проигрывателя будем использовать плеер JW Player.

Подключаем в <head> файл с вашими скриптами your_script.js

<script language="javascript" src="path_to_script/your_script.js"/>

либо просто пропишем функции в код главной страницы. Как нравится.

Это функции показа и закрытия блока с роликом:

	function getClientHeight() {
		return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.documentElement.clientHeight;
	}

	function getScrollTop() { // проверка если браузер Safari
		if(window.devicePixelRatio) {
			return document.body.scrollTop;
			}
		else	{
			return document.documentElement.scrollTop;	
			}
	}

	function showPlayer(myVideo) { // открытие видеоплеера в отдельном слое
		var myX=(document.body.clientWidth-620)/2+'px';
		var myY=(getScrollTop()+getClientHeight()/2-264)+'px';

		var myS='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="404" id="player1" name="player1">';
		myS+='<param name="movie" value="/jwplayer/player.swf">';
		myS+='<param name="allowfullscreen" value="true">';
		myS+='<param name="allowscriptaccess" value="always">';
		myS+='<param name="width" value="480">';
		myS+='<param name="height" value="404">';
		myS+='<param name="flashvars" value="width=480&height=404&file='+myVideo+'&autostart=true">';
		myS+='<param name="wmode" value="opaque">';
		myS+='<embed id="player1"';
		myS+='name="player1"';
		myS+='src="/jwplayer/player.swf"';
		myS+='width="480"';
		myS+='height="404"';
		myS+='allowscriptaccess="always"';
		myS+='allowfullscreen="true"';
		myS+='flashvars="width=480&height=404&file='+myVideo+'&autostart=true"';
		myS+='wmode="opaque" ';
		myS+='/>';
		myS+='</object>';

		myS+='<a href="javascript:void(0);"  onClick="closePlayer();">закрыть видео</a>';

		document.getElementById('flvplayer').style.top=myY;
		//document.getElementById('flvplayer').style.left=myX;
		document.getElementById('swfframe').innerHTML=myS;
		document.getElementById('flvplayer').style.display='block';
		return true;
	}

	function closePlayer() { // закрытие видеоплеера
		document.getElementById('flvplayer').style.display='none';
		document.getElementById('swfframe').innerHTML='';
		return true;
	}

 

Остаётся добавить на страницу, там где будет картинка, предлагающая пользователю посмотреть видеоролик, следующие строки:

<a href="javascript:void(0);" onclick="showPlayer('/video/promo.flv');">
	<img src="/images/video_preview.jpg"/>
</a>

<div id="flvplayer">
	<div id="swfframe"></div>
</div>

promo.flv — это сам клип, video_preview.jpg —  это картинка превью.

Вставляем всплывающее окошко с видеоплеером JW Player на сайт

 

И ещё стили:

#flvplayer {position:absolute;display:none;z-index:50;background:white;left:100px;top:100px;width:620px;height:554px;overflow:hidden;background:url('../images/video_bg.png') no-repeat;}
#flvplayer .swfframe {display:block;width:480px;height:414px;background:white;padding:20px;margin:50px;position:relative;}
#flvplayer .swfframe a {position:absolute;left:220px;bottom:9px;font-family:Tahoma,sans-serif;font-size:9pt;color:#e93903}

video_bg.png — это тень:


Работающий пример демонстрационного ролика можно видеть на сайте ансамбля арабского танца Хабиби (habibi.ru).

Источник:  loco.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи