Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 05.02.2017, 14:08
Интересующийся
Отправить личное сообщение для Corazon Посмотреть профиль Найти все сообщения от Corazon
 
Регистрация: 19.12.2016
Сообщений: 12

рони, а еще вопрос. У меня на странице есть еще и видео. Просто через <video>. Фоновый звук подключен как в примере. Можно ли как-то сделать, чтобы при запуске видео фоновый звук сам отключался и менялась картинка на кнопке на соответствующую. Как только видео останавливается или заканчивается, то звук возобновляется. Это как-то через слушатель событий делается?
Ответить с цитированием
  #32 (permalink)  
Старый 05.02.2017, 14:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,085

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>

Последний раз редактировалось рони, 05.02.2017 в 14:52.
Ответить с цитированием
  #33 (permalink)  
Старый 05.02.2017, 15:54
Интересующийся
Отправить личное сообщение для Corazon Посмотреть профиль Найти все сообщения от Corazon
 
Регистрация: 19.12.2016
Сообщений: 12

рони, спасибо! Все прикрутила, все работает!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такую фичу? dotwatt Элементы интерфейса 7 20.07.2012 10:51
Как сделать кнопку, запускающую rrdtool jsx Общие вопросы Javascript 2 20.02.2011 13:40
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Как сделать кнопку очистить? sss2019 Общие вопросы Javascript 10 10.10.2010 14:56
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19