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

Уроки по PHP, Javascript и т.п.

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

Сообщение Foxmen » 11 авг 2011, 01:47

Видят ли Вашу страницу
Данный урок поможет узнавать Вам видят ли Вашу страницу, или же пользователь находится на другом табе.
Для наглядности воспользуемся видео из ютуба, которое будет проигрываться только тогда, когда пользователь видит вашу страницу. Сразу скажу, что данный пример, скорей всего будет работать только в Google Chrome из-за некоторых особенностей. Однако если вы почитаете документацию по Page Visibility API вы сможете расширить кол-во браузеров. Вот некоторые ссылки, которые могут Вам помочь:Немного на русском, некоторые пояснения от гугл. Это конечно же не все, но вы можете сами поискать информации через поисковики..
Нам нужно создать html фаил со следующим кодом:
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  6.     <title>Видят ли мою страницу?</title>
  7.    
  8.     <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  9.     <script type="text/javascript">
  10.       google.load("swfobject", "2.1");
  11.     </script>    
  12.     <script type="text/javascript">
  13. // Данная строка нужна для того, чтобы когда пользователь переходил с таба на таб, скрывал браузер вызывалась функция handleVisibilityChange();
  14. document.addEventListener("webkitvisibilitychange", handleVisibilityChange, false);  
  15.  
  16. //Данная функция будет вызываться тогда, когда пользователь не видит вашу страницу.
  17. function stop() {
  18.   if (ytplayer) {
  19.     ytplayer.pauseVideo();
  20.   }
  21. }
  22.  
  23. //эта функция будет вызываться тогда когда пользователь вернулся на вашу страницу с другого таба
  24. function play() {
  25.   if (ytplayer) {
  26.     ytplayer.playVideo();
  27.   }
  28. }
  29.  
  30.  
  31.  
  32. //Эта функция вызывется тогда, когда проигрыватель видео будет готов.
  33. function onYouTubePlayerReady(playerId) {
  34.  
  35. ytplayer = document.getElementById("ytPlayer");
  36.       ytplayer.cueVideoById("3APbHipKq78"); //здесь вы можете поменять id видео.
  37.         ytplayer.playVideo(); // запускаем видео сразу же, как плеер готов
  38.       }
  39.   //загружаем плеер. Документацию по этому поводу можно найти здесь  
  40.  function loadPlayer() {
  41.        
  42.         var params = { allowScriptAccess: "always" };
  43.        
  44.         var atts = { id: "ytPlayer" };
  45.        
  46.         swfobject.embedSWF("http://www.youtube.com/apiplayer?" +
  47.                            "&enablejsapi=1&playerapiid=player1",
  48.                            "videoDiv", "480", "295", "8", null, null, params, atts);
  49.       }
  50.       function _run() {
  51.         loadPlayer();
  52.       }
  53.       google.setOnLoadCallback(_run);
  54. //пользователь сменил таб...
  55. function handleVisibilityChange() {
  56. //если пользователь смотрит не вашу страницу, останавливаем видео...
  57. if(document.webkitVisibilityState = "hidden" ) {
  58. stop();
  59. }
  60. //если он вернулся с другого таба-возобновляем.
  61. if (document.webkitVisibilityState != "hidden") {
  62. play();
  63. }
  64.  
  65.  
  66. }
  67.  
  68.  
  69.     </script>
  70.   </head>
  71. <body>
  72.  
  73.     <div id="videoDiv">Loading...</div>
  74.     <script>
  75.  
  76.     </script>
  77.      
  78.    
  79.   </body>
  80. </html>
  81.  

Сохраняем запускаем в хроме.
Вот собственно и все.
готовый результат можно посмотреть здесь. откройте новые вкладки, по переключайтесь по ним, увидите результат
на всякий случай еще раз, смотреть пример нужно в Google Chrome
Foxmen

 
Автор темы
Сообщения: 80
Зарегистрирован: 03 сен 2010, 19:58
Благодарил (а): 4 раз.
Поблагодарили: 2 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Вернуться в Уроки на другие темы



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron