<div class="playlist">
  <ul>
    <li data-videoplaylist="0" class="active">
      <span class="number">1</span>
      <span class="play">в–¶</span>
      <span class="title">Video - 1</span>
    </li>
    <li data-videoplaylist="1">
      <span class="number">2</span>
      <span class="play">в–¶</span>
      <span class="title">Video - 2</span>
    </li>
  </ul>
</div>

.playlist .play {display: none;}

$(document).ready(function () {
        if ('.playlist ul li.active') {
            $('span.play').css({ 'display': 'block' });
            $('span.number').css({ 'display': 'none' });
        }
        else {
            $('span.number').css({ 'display': 'block' });
            $('span.play').css({ 'display': 'none' });
        }
    });

(function () {

    var videos = [
      {
          src: [
            'playlist/N1.mp4'
          ],
          poster: 'src/img/n1.jpg',
          title: 'Это видео про рыбок. Это видео про рыбок. Это видео про рыбок.'
      },
      {
          src: [
            'playlist/N2.mp4'
          ],
          poster: 'src/img/n2.jpg',
          title: 'Это очень длинное и нудное видео'
      },
      {
          src: [
            'playlist/N3.mp4'
          ],
          poster: 'src/img/n3.jpg',
          title: 'До чего же красива природа России'
      },
      {
          src: [
            'playlist/N4.mp4'
          ],
          poster: 'src/img/n4.jpg',
          title: 'это просто так. скачала откуда-то'
      }
    ];


    var demoModule = {
        init: function () {
            this.els = {};
            this.cacheElements();
            this.initVideo();
            this.createListOfVideos();
            this.bindEvents();
            this.overwriteConsole();
        },
        overwriteConsole: function () {
            console._log = console.log;
            console.log = this.log;
        },
        log: function (string) {
            demoModule.els.log.append('<p>' + string + '</p>');
            console._log(string);
        },
        cacheElements: function () {
            this.els.$playlist = $('div.playlist > ul');
            this.els.$next = $('#next');
            this.els.$prev = $('#prev');
            this.els.log = $('div.panels > pre');
        },
        initVideo: function () {
            this.player = videojs('video');
            this.player.playList(videos);
        },
        createListOfVideos: function () {
            var html = '';
            for (var i = 0, len = this.player.pl.videos.length; i < len; i++) {
                html += '<li data-videoplaylist="' + i + '">' +
                          '<span class="number">' + (i + 1) + '</span>' +
                          '<span class="play">▶</span>' +
                          '<span class="poster"><img src="' + videos[i].poster + '"></span>' +
                          '<span class="title">' + videos[i].title + '</span>' +
                        '</li>';
            }
            this.els.$playlist.empty().html(html);
            this.updateActiveVideo();
        },
        updateActiveVideo: function () {
            var activeIndex = this.player.pl.current;

            this.els.$playlist.find('li').removeClass('active');
            this.els.$playlist.find('li[data-videoplaylist="' + activeIndex + '"]').addClass('active');
        },
        bindEvents: function () {
            var self = this;
            this.els.$playlist.find('li').on('click', $.proxy(this.selectVideo, this));
            this.els.$next.on('click', $.proxy(this.nextOrPrev, this));
            this.els.$prev.on('click', $.proxy(this.nextOrPrev, this));
            this.player.on('next', function (e) {
                console.log('Next video');
                self.updateActiveVideo.apply(self);
            });
            this.player.on('prev', function (e) {
                console.log('Previous video');
                self.updateActiveVideo.apply(self);
            });
            this.player.on('lastVideoEnded', function (e) {
                self.updateActiveVideo.apply(self);
                console.log('Last video has finished');
            });
        },
        nextOrPrev: function (e) {
            var clicked = $(e.target);
            this.player[clicked.attr('id')]();
        },
        selectVideo: function (e) {
            var clicked = e.target.nodeName === 'LI' ? $(e.target) : $(e.target).closest('li');

            if (!clicked.hasClass('active')) {
                console.log('Selecting video');
                var videoIndex = clicked.data('videoplaylist');
                this.player.playList(videoIndex);
                this.updateActiveVideo();
            }
        }
    };

    demoModule.init();
})(jQuery);

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.playlist .play {
	display: none;
}
</style>
<script type='text/javascript'>
$(function(){
	$('.playlist li.active > .play').css({'display': 'block'});
	$('.playlist li.active > .number').css({'display': 'none'});
});
</script>
</head>
<body>
<div class="playlist">
  <ul>
    <li data-videoplaylist="0" class="active">
      <span class="number">1</span>
      <span class="play">в–¶</span>
      <span class="title">Video - 1</span>
    </li>
    <li data-videoplaylist="1">
      <span class="number">2</span>
      <span class="play">в–¶</span>
      <span class="title">Video - 2</span>
    </li>
  </ul>
</div>
</body>
</html>

if ('.playlist ul li.active')

if ('жили у бабуси два веселых гуся')

.playlist .play, .playlist .active .number{display: none;}
  .playlist .active .play{display:  block;}