Видят ли Вашу страницу(youtube+Page Visibility API)

Уроки по PHP, Javascript и т.п.
Ответить
Foxmen
Сообщения: 80
Зарегистрирован: 03 сен 2010, 19:58

Видят ли Вашу страницу(youtube+Page Visibility API)

Сообщение Foxmen »

Видят ли Вашу страницу
Данный урок поможет узнавать Вам видят ли Вашу страницу, или же пользователь находится на другом табе.
Для наглядности воспользуемся видео из ютуба, которое будет проигрываться только тогда, когда пользователь видит вашу страницу. Сразу скажу, что данный пример, скорей всего будет работать только в Google Chrome из-за некоторых особенностей. Однако если вы почитаете документацию по Page Visibility API вы сможете расширить кол-во браузеров. Вот некоторые ссылки, которые могут Вам помочь:Немного на русском, некоторые пояснения от гугл. Это конечно же не все, но вы можете сами поискать информации через поисковики..
Нам нужно создать html фаил со следующим кодом:

Код: Выделить всё

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>    <title>Видят ли мою страницу?</title>        <script src="http://www.google.com/jsapi" type="text/javascript"></script>    <script type="text/javascript">      google.load("swfobject", "2.1");    </script>        <script type="text/javascript">// Данная строка нужна для того, чтобы когда пользователь переходил с таба на таб, скрывал браузер вызывалась функция handleVisibilityChange();document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false);   //Данная функция будет вызываться тогда, когда пользователь не видит вашу страницу.function stop() {  if (ytplayer) {    ytplayer.pauseVideo();  }} //эта функция будет вызываться тогда когда пользователь вернулся на вашу страницу с другого табаfunction play() {  if (ytplayer) {    ytplayer.playVideo();  }}   //Эта функция вызывется тогда, когда проигрыватель видео будет готов.function onYouTubePlayerReady(playerId) { ytplayer = document.getElementById("ytPlayer");      ytplayer.cueVideoById("3APbHipKq78"); //здесь вы можете поменять id видео.        ytplayer.playVideo(); // запускаем видео сразу же, как плеер готов      }  //загружаем плеер. Документацию по этому поводу можно найти [url=http://code.google.com/intl/ru/apis/youtube/getting_started.html]здесь[/url]    function loadPlayer() {                var params = { allowScriptAccess: "always" };                var atts = { id: "ytPlayer" };                swfobject.embedSWF("http://www.youtube.com/apiplayer?" +                           "&enablejsapi=1&playerapiid=player1",                            "videoDiv", "480", "295", "8", null, null, params, atts);      }      function _run() {        loadPlayer();      }      google.setOnLoadCallback(_run);//пользователь сменил таб...function handleVisibilityChange() {//если пользователь смотрит не вашу страницу, останавливаем видео...if(document.webkitVisibilityState = "hidden" ) {stop();}//если он вернулся с другого таба-возобновляем.if (document.webkitVisibilityState != "hidden") {play();}   }      </script>  </head><body>     <div id="videoDiv">Loading...</div>    <script>     </script>          </body></html> 
Сохраняем запускаем в хроме.
Вот собственно и все.
готовый результат можно посмотреть здесь. откройте новые вкладки, по переключайтесь по ним, увидите результат
на всякий случай еще раз, смотреть пример нужно в Google Chrome
Ответить