mediaelement / mediaelement-plugins

Plugins for the main mediaelement project
402 stars 135 forks source link

Playlist Plugin button not working #109

Open aricrepp opened 6 years ago

aricrepp commented 6 years ago

I'm relatively new to MEJS( and JQuery for that matter )and I've been trying to get the playlist working. I can get it to display everything EXCEPT the playlist button. I've followed the documentation best I could, tried using the demo which I believe is broken for playlist? (It showed that the files were broken when I inspected the demo). Anyway, this is my setup and for the life of me cannot see where the problem is.

This is everything in my head

    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/mastercss.css">
    <link rel="stylesheet" href="/css/mediaelementplayer.css">
    <style>
        .mejs__overlay-button {
            background-image: url("/mejs/mejs-controls.svg");
        }
        .mejs__overlay-loading-bg-img {
            background-image: url("/mejs/mejs-controls.svg");
        }
        .mejs__button > button {
            background-image: url("/mejs/mejs-controls.svg");
        }
    </style>
    <link rel="stylesheet" href="/css/playlist.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

This is everything for the container of my player and the javascript at the end of my body

            <div class="player no-hover">
        <audio width="100%" height="55px" id="audio-player" preload="none">

            <source src="audio/The-Diary-of-Jane.mp3" title="Track 1" type="audio/mp3">
            <source src="audio/The-Diary-of-Jane.mp3" title="Track 2" type="audio/mp3">
            <source src="audio/The-Diary-of-Jane.mp3" title="Track 3" type="audio/mp3">
            <source src="audio/The-Diary-of-Jane.mp3" title="Track 4" type="audio/mp3">
            <source src="audio/The-Diary-of-Jane.mp3" title="Track 5" type="audio/mp3">

        </audio>
    </div>

    <!-- <script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.4.0/wavesurfer.min.js"></script>
    <script src="waveform.js" type="text/javascript"></script> -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="javascript/masterjava.js" type="text/javascript"></script>
    <script src="javascript/mediaelement-and-player.min.js" type="text/javascript"></script>
    <script src="mejs/dist/playlist/playlist.js"></script>
    <script src="mejs/dist/playlist/playlist-i18n.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDiGTfwXq0x3doSuadnUpLXHULlFzZrmq0&libraries=places"></script>
    <script>
        $('#audio-player').mediaelementplayer({
            "features": ['playlist', 'prevtrack', 'playpause', 'nexttrack', 'loop', 'shuffle', 'current', 'progress', 'duration', 'volume'],
            "playlist": true,
                            "audioVolume": "vertical",
                            "shuffle": false,
                            "loop": false
        });
    </script>
aricrepp commented 6 years ago

Think I found the problem in another thread, thought I looked close enough. Apparently the playlist feature is meant for video no audio, unless there has been a recent update that changed it.

Ebtessam commented 6 years ago

had the same problem and I don't see why is this for video only ( I mean I see it in the code ) but why do that really. this repo has the playlist button for audio. https://github.com/rocco/mediaelement-playlist-plugin

Ebtessam commented 6 years ago

checkout this issue

crashinz commented 6 years ago

Did you figure out a solution you could share?

pakjiddat commented 6 years ago

I think the playlist plugin supports both audio and video files. Checkout the playlist demo file

thatcher commented 6 years ago

The documentation for these plugins is making me wonder if I chose the right open source media player. It painful having to reverse engineer plugins. Why have an official plugin with zero documentation on how to use it and what it supports. :quarter:

ezequielalba commented 5 years ago

@thatcher Agree on that! Is there not enough documentation about all the things that you can do with the player, and not many examples to figure it out how to tackle certain problems.