Форум

Flyka · #1 (**permalink**) 27.10.2014, 01:00

На странице сайта сеть видео с Youtube (вставлено через iframe) и не сколько кнопок смайлов. Нужно, чтобы кнопки становились активными только во время воспроизведения видео или паузы (значение 1 и 2 getPlayerState() исходя из документации). Но скрипт не работает. Я совсем новичек, не понимаю,в чем проблема. Помоги, пожалуйста!

$('#form_smiles').on('change', function disabledChange(){
var state = player.getPlayerState();
		if ((state==1) || (state==2)){
			$('.buttons_smiles').prop('disabled', false); 
		}
		else {
			$('.buttons_smiles').prop('disabled', true);
		}
}

рони · #2 (**permalink**) 27.10.2014, 03:10

Flyka,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .smiles  {
    display: none;
  }
   input{
    background: #33CC00;
  }
  input:disabled{
    background: #FF0000;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '200',
          width: '370',
          videoId: 'xwmDe0OhhPs',
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }

      function onPlayerStateChange(event) {
            $('.smiles')[event.data == YT.PlayerState.PLAYING ? 'show' : 'hide']()
            $('.buttons_smiles').prop('disabled', event.data != YT.PlayerState.PLAYING);
        }
  </script>
</head>

<body>
 <div id="player"></div>
 <input name="" type="button" value="BUTTON" disabled="disabled" class="buttons_smiles">
 <div class="smiles">
 <img src="http://liubavyshka.ru/_ph/4/1/950678331.jpg" alt="">
 <img src="http://liubavyshka.ru/_ph/4/1/47188246.jpg" alt="">
 </div>
</body>
</html>

Flyka · #3 (**permalink**) 27.10.2014, 13:16

Cупер! Спасибо Вам большое!

Форум

Справочник

Discord чат

Курсы javascript