There is a list of video links with play icons as backgrounds in front of them. When a user clicks on a link, the video will start playing in a player located to the left of the links. The clicked link's background icon changes to a 'stop' icon while any previously playing videos revert back to their 'play' icons.
<ul id="playlist">
<li><a class="play" href="http://video-js.zencoder.com/oceans-clip.mp4" onclick="playClip(this.href); return false;">Oceans</a>
</li>
<li><a class="play" href="http://html5videoformatconverter.com/data/images/happyfit2.mp4" onclick="playClip(this.href); return false;">Happy Fit</a>
</li>
<li><a class="play" href="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" onclick="playClip(this.href); return false;">Sintel</a>
</li>
</ul>
My CSS:
#playlist a.play{
background-image: url('/_layouts/images/plplay1.gif');
background-repeat: no-repeat;
padding-left: 30px;
display: block;
}
#playlist a.stop{
background-image: url('/_layouts/images/plstop1.gif');
background-repeat: no-repeat;
padding-left: 30px;
display: block;
}
And my JS:
$('#playlist li a').click(function() {
if ($(this).hasClass('play')) {
$(this).removeClass('play').addClass('stop');
} else if ($(this).hasClass('stop')) {
$(this).removeClass('stop').addClass('play');
} else {
$(this).addClass('play');
}
});
Here is the fiddle for reference: http://jsfiddle.net/2Bsm7/