Не удается убрать disabled с кнопок
На странице сайта сеть видео с 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);
}
}
|
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>
|
Cупер! Спасибо Вам большое! :)
|
| Часовой пояс GMT +3, время: 05:12. |