mediaelement-plugins icon indicating copy to clipboard operation
mediaelement-plugins copied to clipboard

Playlist Plugin button not working

Open aricrepp opened this issue 7 years ago • 7 comments

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 avatar Dec 24 '17 03:12 aricrepp

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.

aricrepp avatar Dec 24 '17 03:12 aricrepp

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 avatar Jan 10 '18 10:01 Ebtessam

checkout this issue

Ebtessam avatar Jan 10 '18 10:01 Ebtessam

Did you figure out a solution you could share?

crashinz avatar Jan 26 '18 04:01 crashinz

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

pakjiddat avatar Feb 11 '18 05:02 pakjiddat

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 avatar Apr 10 '18 00:04 thatcher

@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.

ezequielalba avatar Aug 22 '18 22:08 ezequielalba