Как я могу получить аудио список воспроизведения HTML5 с mediaelement.js? - PullRequest
Новая
       52

Как я могу получить аудио список воспроизведения HTML5 с mediaelement.js?

5 голосов
/ 18 июня 2011

Я попытался найти пример аудио списка воспроизведения в mediaelement.js.Но я не нашел ничего, mediaelement.js поддерживает аудио плейлист?Если это так, пожалуйста, поддержите меня пример кода или ссылки.Большое спасибо.

Ответы [ 2 ]

5 голосов
/ 14 июля 2012

Мне удалось получить супер базовую (читай: хакерскую) демонстрацию плейлиста, работающего в теме WordPress, которая у меня есть.Все, что вам нужно сделать, это настроить несколько медиа-элементов, используя набор идентификаторов, класс или в этом случае тег <audio>.

Затем вы можете использовать JS, чтобы увидеть, когда игрок закончил (прекратил играть музыку), и выполнить некоторые базовые условия, чтобы увидеть, какой игрок играет, какой игрок должен играть следующим, и если следующего игрока нет, начните сначала.с начала.Опять же, это очень смешно, но, похоже, работает на меня.

HTML: 

<figure class="entry-audio">
    <audio id="wp_mep_1" controls="controls">
        <source src="linkto/music.mp3" type="audio/mp3" />
        <object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
            <param name="movie" value="flashmediaelement.swf" />
            <param name="flashvars" value="controls=true&amp;file=linkto/music.mp3" />
        </object>
    </audio>
</figure>
<!-- .entry-audio -->

<figure class="entry-audio">
    <audio id="wp_mep_2" controls="controls">
        <source src="linkto/music.mp3" type="audio/mp3" />
        <object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
            <param name="movie" value="flashmediaelement.swf" />
            <param name="flashvars" value="controls=true&amp;file=linkto/music.mp3" />
        </object>
    </audio>
</figure>
<!-- .entry-audio -->

<figure class="entry-audio">
    <audio id="wp_mep_3" controls="controls">
        <source src="linkto/music.mp3" type="audio/mp3" />
        <object width="100%" height="23" type="application/x-shockwave-flash" data="flashmediaelement.swf">
            <param name="movie" value="flashmediaelement.swf" />
            <param name="flashvars" value="controls=true&amp;file=linkto/music.mp3" />
        </object>
    </audio>
</figure>
<!-- .entry-audio -->

JavaScript: 

jQuery(function (jQuery) {
    // make an array for the mediaelement players
    var mediaElementPlayers = new Array();

    // run mediaelement.js (Ignore options)
    jQuery('audio').mediaelementplayer({
        iPadUseNativeControls: false,
        iPhoneUseNativeControls: false,
        AndroidUseNativeControls: false,
        pauseOtherPlayers: true,
        success: function (mediaElement, domObject) {
            // add this mediaelement to the mediaElementPlayers array
            mediaElementPlayers.push(mediaElement);
            console.log(mediaElement);
            mediaElement.addEventListener('ended', function (e) {
                playNext(e.target);
            }, false);
        },
        keyActions: []
    })

    // find the current player and start playing the following player
    function playNext(currentPlayer) {
        for (i = 0; i < mediaElementPlayers.length; i++) {
            if (mediaElementPlayers[i] == currentPlayer) {
                if (mediaElementPlayers[i + 1] == undefined) { // If this is the last player Start from the beginning
                    mediaElementPlayers[0].play();
                } else { // Start the next player
                    mediaElementPlayers[i + 1].play();
                }
            }
        }
    }
});
1 голос
/ 29 мая 2012

Нет, нет плейлиста. Если вы ищете игрока, у которого есть тот, проверьте здесь: http://praegnanz.de/html5video/ Кроме того, вы можете легко создавать плейлисты просто используя JavaScript API mediaelementjs. Это довольно простая задача, для IMO в этом нет необходимости.

...