mediaelement-plugins
mediaelement-plugins copied to clipboard
Playlist Plugin button not working
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>
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.
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
checkout this issue
Did you figure out a solution you could share?
I think the playlist plugin supports both audio and video files. Checkout the playlist demo file
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:
@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.