Почему вы проверяете event.layerX для FF, но event.offsetX для WebKit?jQuery нормализует все свойства событий, поэтому вам не нужно проверять разные свойства для разных браузеров.
Кроме того, если вы попытаетесь прослушать пользовательский агент,и вы уже используете jQuery, для этого используйте jQuery :
if($.browser.mozilla) {
playbutton = event.layerX < 31;
}else if ($.browser.safari){
playbutton = event.offsetX < 61;
}else if ($.browser.webkit){
playbutton = event.offsetX < 31;
}
Редактировать
Там много местадля улучшения в этом коде.Вот пример того, как это исправить.
$(function() {
$('.loop').live('mousedown', function() {
this.checked = !this.checked;
});
$('.audioplayerHTML5').live('click', function(event) {
var audio,
playbutton,
video = $('.videoplayer').get(0),
$syncMusic = $('#syncMusic'),
$last_played = $('#last_played'),
$playAudioBeginning = $('#playAudioBeginning'),
$playFromBeginning = $('#playFromBeginning'),
$sliderVideo = $('#sliderVideo');
if ($.browser.mozilla) {
playbutton = event.layerX < 31;
} else if ($.browser.safari) {
playbutton = event.offsetX < 61;
} else if ($.browser.webkit) {
playbutton = event.offsetX < 31;
}
if (!playbutton) return;
if (!this.paused) {
if ($syncMusic.is(':checked') && video) {
video.pause();
}
this.pause();
//check for play button pressing on initial
} else if (this.paused) {
if (!$last_played.val()) {
$last_played.val(this.id);
if ($syncMusic.is(':checked') && video) {
video.play();
}
if ($playAudioBeginning.is(':checked')) {
this.currentTime = 0;
}
this.play();
} else if ($last_played.val() !== this.id) {
audio = $('#' + $last_played.val()).get(0);
if (!audio) {
$last_played.val(this.id);
if ($syncMusic.is(':checked') && video) {
video.play();
}
if ($playAudioBeginning.is(':checked')) {
this.currentTime = 0;
}
this.play();
} else {
audio.pause();
$last_played.val(this.id);
if ($syncMusic.is(':checked') && video) {
if ($playFromBeginning.is(':checked') && !video.paused) {
video.currentTime = $sliderVideo.slider('values', 0);
} else {
video.play();
}
}
if ($playAudioBeginning.is(':checked')) {
this.currentTime = 0;
}
this.play();
}
} else if ($last_played.val() == this.id) {
if ($syncMusic.is(':checked') && video) {
video.play();
}
if ($playAudioBeginning.is(':checked')) {
this.currentTime = 0;
}
this.play();
}
}
});
Различная очистка
-
.live('mousedown', ...) можно записать намного проще - Кэшировать объекты jQuery, это более эффективно
- Быть совместимым с разделителями строк;не смешивать и сочетать одинарные и двойные кавычки
- Несколько пропущенных ключевых слов
var (=> объявление глобальных переменных, что плохо плохо ) - Нетнужно проверить
video != undefined, просто проверить достоверность video - Серьезно, прекратить проверку, если логическое значение равно
true или false, просто проверить его истинность - Удалите неиспользуемые переменные (а именно
stop и event) - Используйте
return операторов (разумно), чтобы уменьшить чрезмерные if...else вложенные и избыточные проверки
Нерешенные вопросы
- Являются ли
.loop флажками?Если это так, откажитесь от обработчика .live('mousedown', ...).Это совершенно лишнее. - Что со всеми этими проверками UA, что должно происходить в IE?
Давайте поговорим
Этот метод чертовски велик.Разбейте его на ряд более мелких, более управляемых функций.Например, вы можете превратить этот фрагмент кода:
if (!this.paused) {
if ($syncMusic.is(':checked') && video) {
video.pause();
}
this.pause();
//check for play button pressing on initial
}
в отдельный вызов функции, который выглядит следующим образом:
if (!this.paused) {
pause(this, $syncMusic.is(':checked') ? video : null);
}
, где pause - следующая функция:
function pause(vidA, vidB) {
if (vidB) {
vidB.pause();
}
vidA.pause();
}