www.mediacollege.com | Support Forum
MC Media Player

HTML Playlist with MC Altair and MC tube

The example below shows how you can make a playlist to drive MC Altair. This extension I dedicate to Dave Owen, the author of MC media player, is a dynamic version of his original playlist sample. Please feel free to use it but note this is still under development and I hope because time is lacking to me, to add a setup gui in php a bit like Dave's setup tool.

History / Updates:

17.01.2011: I've introduced the presets like Dave did. This is an other way to specify width and height using a profile name of a preset

18.01.2011: I’ve completely rewriten mcmp.js and I have adapted his simple sample page for the demo

Some things to consider about mcmp_0.8s.js :

  • No more inclusions of this js file for each player to be built
  • Player configurations can be registered under a name for a later usage
  • Use the name of a configuration, provide it as second argument of mccode function and it's done!

19.01.2011: New flash codec tests added.

  • VP70 really suxx, even vlc can not read it.
  • Flv tags seems to be only handled locally. flvmdi tool did not manage to tag other video formats than h264 and VP62 (Dave's videos).
  • Size for VP8 was smaller due to a smaller bitrate 340k vs 1040k so there is NO SIZE GAIN at all with WebM!
    Maybe this is due to a setting in the codec itself but for me, this codec is a calamity for processors when encoding.

20.01.2011: Presets list have been updated, I hope we got all major presets ratios now.

I wanted to know if size and more can be extracted to configure the player. Results are very promising but this depends on the codec and for flv/h264 tagging the video is THE SOLUTION.
See by yourself. I have just discovered a cool ffmpeg bridge for php: ffmpeg-php to retrieve videos infos as well!

28.01.2011: Great news, folks, I have expanded my previous enhancement of mcmp_0.8se.js to all js files and here is the pre-release of the new enhanced mctube.js which is much more tinier and readable. That means also simple samples integration is simplier with player configs and each config file can be downloaded separately!.

29.01.2011: I have registered Dave's player to osflash.org.

30.01.2011: I have improved Dave's original audio only sample page with an extra, look at this, you won't regret the school fight!.

31.01.2011: I have fixed the mp3 player, there is a limitation when reading ID3 tags: you will have to wait the file to be completely downloaded.BIG NEWS: the integration of mcmp so we can use config (like in simple.html) inside playlists is complete, see my tube. This was exactly what I wanted with the 'Example 3' config, a transparent toolbar so the からおけ could be read and you have then no excuse not to sing with now ;p .Dave, I want now your karaoke performance, don't be shy to record it ;D.

01.02.2011: Starting to add the thumb support by using the new playlist config GK. Look at my tube for the preview and for those wo wished this feature for long, it's coming very soon!

07.02.2011: I decided to uniformize id3 tags between mp3 and flv, now it's easy to get any id3 tag thanks to the new getid3info() function \O_O/, see here.

Demos:

Head content:

<!--MC tube stuff starts here -->
<script type="text/javascript"> src="js/swfobject_modified.js"></script>
<!--MC tube config helpers starts here -->
<script type="text/javascript"> src="js/config/player.js"></script>
<script type="text/javascript"> src="js/config/presets.js"></script>
<script type="text/javascript"> src="js/config/playlist.js"></script>
<script type="text/javascript"> src="js/config/tubes.js"></script>
<!--Configure your tubes here that holds your playlist entries-->
<script type="text/javascript"> src="js/config/tubes/actarus.js"></script>
<script type="text/javascript"> src="js/config/tubes/dave.js"></script>
<!--Load your favorite player configs to customize the player rendering-->
<script type="text/javascript"> src="js/config/players/examples.js"></script>
<!--Tube Core file(s)-->
<script type="text/javascript"> src="js/mcmp_0.8se.js"></script>
<!--Ends with the MC Tube Core file-->
<script type="text/javascript"> src="js/mctube.js"></script>
<!--MC tube stuff ends here -->
<style type="text/css">
<!--
#playlist {
	width:300px;
	height:270px;
	overflow-y: scroll;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	margin: 0 20px 0 0;
}
.plEntry {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color: #F0F0F0;
	margin: 0 0 4px 0;
	padding: 5px;
	border: 1px solid #999999;
	cursor:pointer;
}
.plTitle {
	font-size:14px;
	color:#0000FF;
}
.plTitleSmall {
	font-size:12px;
	color:#0000FF;
}
.movie {
	list-style: none;
	background: url(tubes/movie.gif) no-repeat left center;
	padding-right:0.3em;
}

.plEntryMovie {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	background-color: #F0F0F0;
	margin: 7px;
	padding: 7px;
	width:200px;
	border: 1px solid #999999;
	cursor:pointer;
	list-style-position: inside;
	list-style-image: url(tubes/movie.png);
}
fieldset[type=tube] {
	border:0;
}

.MK > legend, .MC > legend, .UL > legend, .Ul > legend,.GK > legend{
	color:white;
}

/* Thumbs for GK */
.thumbs {
	float:left;
	padding:0px !important;
	margin:0px !important;
	cursor:pointer;
	height:75px !important;
	width:99%;
}

.thumbs:hover {
	background-color:lightblue !important;
}

.thumbs.active {
	background-color:#555;
}
.thumbs img {
	float:left;
	margin-right:10px;
}

.thumbs strong {
	display:block;
}
	
-->
</style>

Body content:

<fieldset type="tube" name="dave"></fieldset>

Body content:

<fieldset type="tube" name="actarus"></fieldset>

Misc:

You may more be interested in