Блог

Главная - Вопросы по программированию - Воспроизведение аудио по щелчку

Воспроизведение аудио по щелчку

#javascript #html

#javascript #HTML

Вопрос:

У меня есть простой веб-сайт, который я пытаюсь создать. У меня есть видео в формате mp4 (это признак отсутствия звука) Я хочу щелкнуть видео и заставить его воспроизводить mp3 с элементами управления. Просто не могу понять, как это сделать.

Предположим, я мог бы использовать что-то вроде этого:

     <audio controls id="linkAudio">
  <source src="demo.ogg" type="audio/ogg">
  <source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<script>
  document.getElementById("link_id").addEventListener("click", function () {
    document.getElementById("linkAudio").play();
  });
</script>

Но где я могу ссылаться на видео src как на то, что нужно щелкнуть?

Спасибо

Комментарии:

1. Я в замешательстве, что вы подразумеваете под видео src как вещь, которую нужно щелкнуть? Уточнить или опубликовать пример скрипки?

Ответ №1:

У вас может быть <video> отдельное click событие и при запуске звука.

 document.getElementById("link_id").addEventListener("click", function () {
  document.getElementById("linkAudio").play();
}); 
 video{
  width: 200px;
  display: block;
} 
 <video src='http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' id='link_id'></video>

<audio controls id="linkAudio">
  <source src="http://www.noiseaddicts.com/samples_1w72b820/29.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Комментарии:

1. Это работает отлично, спасибо. Есть ли способ вывести элементы управления на экран только после события onclick? Если я добавлю элементы управления к тегу audio, он отобразится до того, как вы нажмете на аудио.

2. @scopa Я бы внедрил для этого пользовательские элементы управления видео, а не использовал те, что используются по умолчанию. Пожалуйста, обратитесь к моему репозиторию GitHub здесь: rahul-desai3.github.io/video_player/#demo

Метки: