Всплывающие кнопки соц. сетей после проигрывания ролика YouTube?
, помогите разобрать пример, чтобы понять как это делается
 |
Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
|
| ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
| [3.142.132.137] |
|
|
Всплывающие кнопки соц. сетей после проигрывания ролика YouTube?
, помогите разобрать пример, чтобы понять как это делается
|
Сообщ.
#1
,
|
|
 |
Добрый день, друзья!
С наступающим вас Новым Годом! Прошу помощи, чтобы понять как работает такой код: Есть вот такая страница, на ней встроен видео-ролик YouTube, как только воспроизведение ролика заканчивается, на плеере появляются кнопки соц. сетей "Фейсбук и ВКонтакте". Но эти кнопки не "нарисованы" в самом плеере, а отображаются поверх плеера как новый слой. Мне хотелось бы сделать себе тоже что-то подобное, чтобы после окончания видео,поверх плеера появлялся новый слой с кнопкой. Посмотрел код страницы, по пока так и не понял как это работает. Нашел пример YouTube API который реализует действие после окончания видео, но как это связать с нужным дивом кнопки понятия не имею. Буду рад вашей помощь. Спасибо! |
|
Сообщ.
#2
,
|
|
 |
А что тут сложного? Просто в onPlayerStateChange вставляете вместо alert код который создает этот слой или делает видимым заранее прописанный div.
P.S. С наступившим) |
|
Сообщ.
#3
,
|
|
|
|
Спасибо за ваш ответ. Все не так просто как Вы пишите. Дело в том, что видео YouTube стоит всегда поверх всех остальных слоев, поэтому нужно использовать параметр wmode=opaque в URL видео. В общем у меня вот что получились:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="en"> <head> <title>YouTube API 2</title> </head> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script src="http://www.youtube.com/player_api"></script> <script> // http://stackoverflow.com/questions/7853904/how-to-detect-when-a-youtube-video-finishes-playing // Create YouTube player var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } // Autoplay video function onPlayerReady(event) { //event.target.playVideo(); } // When video ends function onPlayerStateChange(event) { if(event.data === 0) { //alert('Done'); $('#youtube-overlay').show(); } } </script> <iframe id="player" type="text/html" width="420" height="315" src="http://www.youtube.com/embed/akrcCWbboJ4?enablejsapi=1&wmode=opaque" frameborder="0"></iframe> <div id="youtube-overlay" style="position: relative; top:-209px; left:35px; z-index:2; background:#FFFFFF; width:220px; height:60px; display:none;"> <span><a href="http://www.youtube.com/" target="_blank">Done</a></span> </div> </body> </html> |
1 пользователей читают эту тему (1 гостей и 0 скрытых пользователей)
0 пользователей:
[ Script execution time: 0,0245 ] [ 14 queries used ] [ Generated: 3.06.24, 05:44 GMT ]