Различия

Здесь показаны различия между двумя версиями данной страницы.

--- tag_audio_html5 [2014/04/10 15:59]
admin создано
+++ tag_audio_html5 [2014/04/10 20:31] (текущий)
admin [Отложенная загрузка данных]
@@ Строка 1: / Строка 1: @@
 ====== Управление тегом audio в HTML5  ======
-[[Узнать проигрывается ли сейчас что-то в плеере]]
+===== Узнать проигрывается ли сейчас что-то в плеере =====
-[[Если прерывается трансляция, возобновляем проигрывание]]
+Проверить у встроенного плеера браузера, проигрывается ли что-то в данный момент.
+<code>
+<audio id="player" src="test.mp3" controls autobuffer> </audio>
+<script>
+player = document.getElementById('player');
+if (player.paused)
+  console.log('стоит на паузе');
+else
+  console.log('играет что-то');
+</script>
+</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/|интернет-радио]].

"Мозги" Nohau

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы