рони, а еще вопрос. У меня на странице есть еще и видео. Просто через <video>. Фоновый звук подключен как в примере. Можно ли как-то сделать, чтобы при запуске видео фоновый звук сам отключался и менялась картинка на кнопке на соответствующую. Как только видео останавливается или заканчивается, то звук возобновляется. Это как-то через слушатель событий делается?
|
video and audio event
Corazon,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#mybtn{
width: 128px;
height: 128px;
background-image: url(http://s7.hostingkartinok.com/uploads/images/2014/02/b33ecdff35171950f356df80a6a7c3dd.png);
}
#mybtn.play{
background-image: url(http://gbdou88fr.caduk.ru/images/p93_color-violin-clef-illustration-music-note-circle-33645042.jpg);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var audio = $('#myaudio'), video = $('#myvideo'), btn = $('#mybtn');
function play()
{
audio[0].play();
btn.addClass('play');
}
function pause()
{
audio[0].pause();
btn.removeClass('play');
}
btn.on('click',function(){
$(this).is('.play') ? pause() : play()
})
video.on('ended pause',play)
video.on('play playing',pause)
});
</script>
</head>
<body>
<audio id="myaudio" loop >
<source src="http://www.w3schools.com/Tags/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/Tags/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button id="mybtn"></button>
<video id="myvideo" width="320" height="176" controls >
<source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
|
рони, спасибо! Все прикрутила, все работает!
|
| Часовой пояс GMT +3, время: 15:30. |