Инструменты пользователя
tag_audio_html5
Различия
Здесь показаны различия между двумя версиями данной страницы.
| Предыдущая версия справа и слева Предыдущая версия Следующая версия | Предыдущая версия | ||
|
tag_audio_html5 [2014/04/10 16:05] admin |
tag_audio_html5 [2014/04/10 20:31] (текущий) admin [Отложенная загрузка данных] |
||
|---|---|---|---|
| Строка 5: | Строка 5: | ||
| Проверить у встроенного плеера браузера, проигрывается ли что-то в данный момент. | Проверить у встроенного плеера браузера, проигрывается ли что-то в данный момент. | ||
| <code> | <code> | ||
| + | |||
| + | <audio id="player" src="test.mp3" controls autobuffer> </audio> | ||
| + | |||
| + | <script> | ||
| player = document.getElementById('player'); | player = document.getElementById('player'); | ||
| if (player.paused) | if (player.paused) | ||
| Строка 10: | Строка 14: | ||
| else | else | ||
| console.log('играет что-то'); | console.log('играет что-то'); | ||
| + | </script> | ||
| + | |||
| </code> | </code> | ||
| ===== Если прерывается трансляция, возобновляем проигрывание ===== | ===== Если прерывается трансляция, возобновляем проигрывание ===== | ||
| + | Собственно, когда нажимаем 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/|интернет-радио]]. | ||
tag_audio_html5.1397131553.txt.gz · Последние изменения: 2014/04/10 16:05 — admin
Инструменты страницы
За исключением случаев, когда указано иное, содержимое этой вики предоставляется на условиях следующей лицензии: CC Attribution-Share Alike 4.0 International
