Индикатор загрузки для аудио тега HTML5 / mediaelement.js - PullRequest
Новая
       0

Индикатор загрузки для аудио тега HTML5 / mediaelement.js

2 голосов
/ 15 октября 2011

Есть ли способ для javascript / jQuery узнать, был ли загружен / загружается исходный файл для тега <audio>?

Я использую mediaelement.js, однако я приму ответэто работает только для обычного тега <audio>.В настоящее время я подделываю индикацию загрузки: 

$("#temp-loading").spin(minySpinner);
setTimeout(function() {
    $('#temp-loading').spin(false);
}, 12000);

(spin() - это функция из spin.js ).Очевидно, что индикатор в этом случае не имеет смысла, но люди были сбиты с толку, когда страница была загружена, но для начала воспроизведения потребовалось около 15 секунд, поэтому мне пришлось реализовать это временное решение.Я бы хотел, чтобы он фактически указывал, загружается ли файл, хотя на более медленных соединениях значок будет оставаться до тех пор, пока файл фактически не начнет воспроизводиться.

Также следует отметить, что у меня есть набор элементовдо autoplay (все в порядке, обещаю!), поэтому, когда страница загружается, она автоматически начинает «проигрываться», даже при том, что никакого реального звука еще не происходит.Это затрудняет использование события play для остановки счетчика, поскольку он просто останавливается немедленно.Поэтому мне придется либо останавливать спиннер, когда звук действительно запускается, либо не воспроизводить, пока звук фактически не будет готов к воспроизведению, если это имеет смысл.

Я также заметил, что во время загрузки аудиофайлаиндикатор времени говорит «00:00».Когда он загружен, он меняется на «00:00:00».Таким образом, кажется, что возможность делать то, что мне нужно, уже встроена, мне просто нужно знать, как ее использовать.

Если это имеет значение, файл является живым потоком (через Icecast).Спасибо!

Ответы [ 2 ]

3 голосов
/ 15 октября 2011

А как насчет события canplay?

РЕДАКТИРОВАТЬ Так как я получил очки, я бы лучше вставил решение кирпича для потомков: 

$("audio").mediaelementplayer({
    audioWidth: 150,
    features: ['playpause','current','volume'],
    success: function(element) { 
        element.addEventListener('loadeddata', function(){
            $("#temp-loading").spin(false);
        }, false);
    }
});
0 голосов
/ 15 октября 2011

Я наполовину решил эту проблему следующим образом: 

$("#temp-loading").spin(minnerSpinner);
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function(){
    $("#temp-loading").spin(false);
});

Однако это не кросс-браузерное решение (работает в Chrome и Safari, а не в Firefox).

edit Сейчас он работает с jQuery, но все еще не работает для Firefox (который использует откат Mediaelement Flash).На данный момент это уже не вопрос html5, это проблема медиаэлемента. 

$('audio').bind('loadeddata', function(){
    $("#temp-loading").spin(false);
});

edit 2 Я закончил тем, что получил работу, следуя совету Tetaxa ... не совсем то, что он / онапредложил, но это дало мне идею использовать обратный вызов success: 

$("audio").mediaelementplayer({
    audioWidth: 150,
    features: ['playpause','current','volume'],
    success: function(element) { 
        element.addEventListener('loadeddata', function(){
            $("#temp-loading").spin(false);
        }, false);
    }
});

Спасибо!

...