Здесь показаны различия между двумя версиями данной страницы.
Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
tag_audio_html5 [2014/04/10 16:08] admin |
tag_audio_html5 [2014/04/10 20:31] (текущий) admin [Отложенная загрузка данных] |
||
---|---|---|---|
Строка 6: | Строка 6: | ||
<code> | <code> | ||
- | <audio id="player" src="http://193.107.239.146:8000/radio" controls autobuffer> </audio> | + | <audio id="player" src="test.mp3" controls autobuffer> </audio> |
<script> | <script> | ||
Строка 20: | Строка 20: | ||
===== Если прерывается трансляция, возобновляем проигрывание ===== | ===== Если прерывается трансляция, возобновляем проигрывание ===== | ||
+ | Собственно, когда нажимаем play, запускается по таймауту функция которая определяет, остановилось ли воспроизведение, и если оно остановилось, то просто его запускает вновь. Также навешено событие на нажатие на паузу - отключение таймера, чтобы не возобновлялось воспроизведение, когда пользователь решил остановить. | ||
+ | |||
+ | <code> | ||
+ | <audio id="player" src="http://193.107.239.146:8000/radio" controls autobuffer> </audio> | ||
+ | |||
+ | <script> | ||
+ | var numt = 0; | ||
+ | |||
+ | function play_always() { | ||
+ | player = document.getElementById('player'); | ||
+ | |||
+ | if (player.paused) | ||
+ | player = document.getElementById('player').play(); | ||
+ | |||
+ | numt = setTimeout('play_always()', 1000); | ||
+ | } | ||
+ | |||
+ | player = document.getElementById('player'); | ||
+ | player.onpause = function(event) { clearTimeout(numt); } | ||
+ | player.onplay = function(event) { play_always(); } | ||
+ | |||
+ | </script> | ||
+ | </code> | ||
+ | |||
+ | ===== Отложенная загрузка данных ===== | ||
+ | |||
+ | Чтобы плеер не загружал файл или поток при открытии страницы, можно поступить так: | ||
+ | |||
+ | <code> | ||
+ | <audio id="player" controls autobuffer> </audio> | ||
+ | |||
+ | <script> | ||
+ | var numt = 0; | ||
+ | var first = true; | ||
+ | |||
+ | function play_always() { | ||
+ | player = document.getElementById('player'); | ||
+ | |||
+ | if (player.paused) | ||
+ | player = document.getElementById('player').play(); | ||
+ | |||
+ | numt = setTimeout('play_always()', 1000); | ||
+ | } | ||
+ | |||
+ | player = document.getElementById('player'); | ||
+ | player.onpause = function(event) { | ||
+ | clearTimeout(numt); | ||
+ | } | ||
+ | |||
+ | player.onplay = function(event) { | ||
+ | if (first) { | ||
+ | player = document.getElementById('player'); | ||
+ | player.src = "http://193.107.239.146:8000/radio"; | ||
+ | first = false; | ||
+ | } | ||
+ | play_always(); | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | </code> | ||
+ | |||
+ | То есть с помощью <code>player.src = "http://193.107.239.146:8000/radio";</code> мы даем данные тогда когда нам это нужно. Иначе плеер качает сразу при открытии. | ||
+ | Да, кстати first в данном случае играет заглушку, которая дает загрузку данных только один раз. | ||
===== Живой пример ===== | ===== Живой пример ===== | ||
- | Все эти моменты нам помогло при создании [[http://radio.pipec.tv/|интернет-радио]]. | + | Все эти хитрости нам помогли при создании [[http://radio.pipec.tv/|интернет-радио]]. |