Тема: Плеер HTML5 помощь

Здравствуйте, нужна ваша помощь в стилизации самого простого аудио плеера. Вот есть код

<audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls ></audio>
<button onclick="document.getElementById('audio').play()">Play</button>
<button onclick="document.getElementById('audio').pause()">Pause</button>
<button onclick="document.getElementById('audio').volume+=0.1">Vol +</button>
<button onclick="document.getElementById('audio').volume-=0.1">Vol -</button>

Нажмите и перетащите
плеер выглядит вот так:
http://www.ucoz.ru/qa/index.php/?qa=blob&amp;qa_blobid=16732192831756906775
Помогите пожалуйста поставить вместо кнопок "play" "payse" "vol+" "vol-" картинки возпроизведения и громкости если нужно то я сброшу картинки.!) очень надеюсь на вашу помощь

2

Re: Плеер HTML5 помощь

это не совсем по адресу...

Re: Плеер HTML5 помощь

пишет tarasian666:

это не совсем по адресу...

а куда написать? здесь всё таки помошь...

4

Re: Плеер HTML5 помощь

Вместо

<button onclick="document.getElementById('audio').play()">Play</button>

Делаете

<img src="путь до картинки" onclick="document.getElementById('audio').play()" />

Аналогично и с другими кнопками

http://radioheart.ru/banners/radioheart_400x40_banner.jpg
RadioHeart.ru: Функциональный радио хостинг с автодиджеем и нонстопом, а так же быстрый виртуальный хостинг. Возможность создать радио за 5 минут, подключить автодиджей и нонстоп.
Отзывы о хостинге

Re: Плеер HTML5 помощь

пишет Falcon:

Вместо

<button onclick="document.getElementById('audio').play()">Play</button>

Делаете

<img src="путь до картинки" onclick="document.getElementById('audio').play()" />

Аналогично и с другими кнопками

Есть с этим разобрался, а как теперь сделать взаимо заменяемость, я нажимаю плей вместо неё появляется пауза? и как убрать вот этоhttp://margchat.at.ua/img/2015-06-09_085051.jpg

Re: Плеер HTML5 помощь

до меня дошло как это сделать ,вообщем получилось вот так

<audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls ></audio>
<img src="http://margchat.at.ua/img/Play-icon-Azul.png" onclick="if (this.src=='http://margchat.at.ua/img/Play-icon-Azul.png') {this.src='http://margchat.at.ua/img/PauseDisabled.png'; document.getElementById('audio').play() } else { this.src='http://margchat.at.ua/img/Play-icon-Azul.png'; document.getElementById('audio').pause() };" />
</h2>


http://margchat.at.ua/2015-06-09_112437.jpg http://margchat.at.ua/2015-06-09_112446.jpg
Но как убрать вот это http://margchat.at.ua/2015-06-09_112100.jpg

7

Re: Плеер HTML5 помощь

<audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls style="display:none"></audio>

или

<audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls style="visibility:hidden"></audio>
http://radioheart.ru/banners/radioheart_400x40_banner.jpg
RadioHeart.ru: Функциональный радио хостинг с автодиджеем и нонстопом, а так же быстрый виртуальный хостинг. Возможность создать радио за 5 минут, подключить автодиджей и нонстоп.
Отзывы о хостинге

Re: Плеер HTML5 помощь

пишет Falcon:

<audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls style="display:none"></audio>

или

<audio id="audio" src="http://free.radioheart.ru:8000/bvrfm" controls style="visibility:hidden"></audio>

Спасибо большое все работает)! Только проблема возникла, открыл его через другой браузер, а там музыка не играет((( Для меня это не страшно, а вот для слушателей будет не удобно

9

Re: Плеер HTML5 помощь

Не все браузеры поддерживают html5 audio тег, который вы используете

http://radioheart.ru/banners/radioheart_400x40_banner.jpg
RadioHeart.ru: Функциональный радио хостинг с автодиджеем и нонстопом, а так же быстрый виртуальный хостинг. Возможность создать радио за 5 минут, подключить автодиджей и нонстоп.
Отзывы о хостинге

Re: Плеер HTML5 помощь

да вот прикол в том что, этот плеер не работает в браузере Uran Opera  и Mozilla а вот плеер с таких сайтов как europaplus.ru работает отлично, во всех браузерах, там я насколько понимаю, тоже стоит html5

11

Re: Плеер HTML5 помощь

europaplus.ru работает отлично, во всех браузерах, там я насколько понимаю, тоже стоит html5

там flash
у каждого браузера разные форматы аудио поддерживаются, также зависит от их версии