Стилизация плеера HTML5
Здравствуйте. Есть плеер на HTML5
<audio controls> <source src="dialog1.mp3" /> </audio> Как стилизовать плеер так, чтобы вместо панели управления (полосы прокрутки, громкости, play и pause) были только кнопка play и pause в виде картинок? |
На одной странице будет несколько плееров и если возможно нужно чтобы при проигрывании одного аудио, второе автоматически останавливалось
|
С проигрыванием по очереди разобрался. Нужно стилизацию сделать
|
<audio src="https://nvdx.ru/vega.mp3" /></audio>
<div class="labelAud">
<img alt="play" class="play">
<img alt="pause" class="pause">
</div>
<audio src="https://nvdx.ru/vega.mp3" /></audio>
<div class="labelAud">
<img alt="play" class="play">
<img alt="pause" class="pause">
</div>
<script>
var aud = document.querySelectorAll('audio'),
labelAud = document.querySelectorAll('.labelAud');
labelAud.forEach((el,i) => el.onclick = e => {
if (e.target.matches('.play')) aud[i].play();
else if (e.target.matches('.pause')) aud[i].pause();
});
</script>
|
почему-то данный код по два раза отобразил обе кнопки. И еще я видимо не так уточнил. Я имел ввиду, чтобы была видна кнопка Play, если ее нажали, то вместо нее видно кнопка Pause и наоборот. Чтобы только одна кнопка была все время на странице
|
Цитата:
|
я понял, как как сделать так, чтобы не сразу обе кнопки play и pause были, а только одна из них и чтобы менялись они?
|
<style>
.pause {
display: none;
}
</style>
<audio src="https://nvdx.ru/vega.mp3" /></audio>
<div class="labelAud">
<img alt="play" class="play">
<img alt="pause" class="pause">
</div>
<audio src="https://nvdx.ru/vega.mp3" /></audio>
<div class="labelAud">
<img alt="play" class="play">
<img alt="pause" class="pause">
</div>
<script>
var aud = document.querySelectorAll('audio'),
labelAud = document.querySelectorAll('.labelAud');
labelAud.forEach((el, i) => {
el.onclick = e => {
if (e.target.matches('.play')) {
aud[i].play();
e.target.style.display = 'none';
e.currentTarget.querySelector('.pause').style.display = 'inline';
}
else if (e.target.matches('.pause')) {
aud[i].pause();
e.target.style.display = 'none';
e.currentTarget.querySelector('.play').style.display = 'inline';
}
}
aud[i].onended = e => {
el.querySelector('.play').style.display = 'inline';
el.querySelector('.pause').style.display = 'none';
};
});
</script>
|
спасибо..
|
А можно такую штуку подсказать я просто в js не очень разбираюсь.
Вот есть теперь два плеера и два скрипта, один ваш, который меняет стиль, а другой который останавливает проигрывание одного плеера, если запустили второй. Есть такая проблема: Если запустить первый плеер, то у него меняется иконка на Pause, и если в это время запустить второй плеер, то первый плеер останавливается, но иконка Pause остается у него. Я бы хотел чтобы было так: Есть два плеера запустили один у него иконка с Play поменялась на Pause, в этом время запустили второй плеер, и тут у первого плеера иконка опять стала Play, а у второго иконка стала Pause.
<audio onplay="other_pause(0)" src="dialog1.mp3" /></audio>
<div class="labelAud">
<img src="play.png" width="60px" alt="play" class="play">
<img src="pause.png" width="60px" alt="pause" class="pause">
</div>
<audio onplay="other_pause(1)" src="dialog2.mp3" /></audio>
<div class="labelAud">
<img src="play.png" width="60px" alt="play" class="play">
<img src="pause.png" width="60px" alt="pause" class="pause">
</div>
<script>
var aud = document.querySelectorAll('audio'),
labelAud = document.querySelectorAll('.labelAud');
labelAud.forEach((el, i) => {
el.onclick = e => {
if (e.target.matches('.play')) {
aud[i].play();
e.target.style.display = 'none';
e.currentTarget.querySelector('.pause').style.display = 'inline';
}
else if (e.target.matches('.pause')) {
aud[i].pause();
e.target.style.display = 'none';
e.currentTarget.querySelector('.play').style.display = 'inline';
}
}
aud[i].onended = e => {
el.querySelector('.play').style.display = 'inline';
el.querySelector('.pause').style.display = 'none';
};
});
</script>
<script>
var a=document.getElementsByTagName("audio");
function other_pause(b){
for(i=0;i<a.length;i++){
if(!(i==b)){
a[i].pause();
};
}
}
</script>
|
| Часовой пояс GMT +3, время: 11:59. |