VideoJS播放器和playList没有响应

Question

I have created a simple page on my site that plays a video and at the right it has next videos list. I have also tried to change the width and height of the player to "auto" and used css but nothing worked.

my jsfiddle link

index.html

<div class="video-holder centered">
            <video id="video" class="video-js vjs-default-skin vjs-big-play-centered"
                controls preload="auto" width="640" height="264"
                data-setup=""
                poster="">
            </video>
            <div class="playlist-components">
                <div class="playlist">
                    <ul></ul>
                    </div>

                <div class="button-holder">
                    <span id="prev">Prev</span>
                    <span id="next">Next</span>
                </div>
            </div>
        </div>

my css

.video-holder {
    background: #1b1b1b;
    padding: 10px;
}
.centered {
    width: 1024px;
    margin: 30px auto 0;
}

.playlist-components {
    height: 264px;
}
.video-js, .playlist-components {
    display: inline-block;
    vertical-align: top;
}
.button-holder {
    padding: 10px;
    height: 36px;
}

.playlist {
    height: 220px;
    width: 359px;
    overflow-y: auto;
    color: #c0c0c0;
    border-radius: 8px;
    display: block;
    margin: 5px 0;
    padding: 1px 0 0 0;
    position: relative;
    background: linear-gradient(to bottom,#000 0,#212121 19%,#212121 100%);
    box-shadow: 0 1px 1px #1a1a1a inset,0px 1px 1px #454545;
    border: 1px solid #1a1a18;
}
#next {
    float: right;
}
#prev {
    float: left;
}

#prev, #next {
    cursor: pointer;
    color: white;
}

.playlist ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.playlist ul li {
    padding: 10px;
    border-bottom: 1px solid #000;
    cursor: pointer;
}
.playlist ul li.active {
    background-color: #4f4f4f;
    border-color: #4f4f4f;
    color: #FFF;
}
.playlist ul li:hover {
    border-color: #353535;
    background: #353535;
}


.playlist .poster, .playlist .title  {
    display: inline-block;
    vertical-align: middle;
}
 .playlist .number {
    padding-right: 10px;
}
.playlist .poster img {
    width: 64px;
}
.playlist .title {
    padding-left: 10px;
}

the playlist

(function(){
  var videos = [
    {
      src : [
        'http://demo.dealerpro.net/Images/Sites/577/videos/HondaHands.mp4'
      ],
      poster : 'http://i145.photobucket.com/albums/r217/Carnifreekshow/Asus%20Orion%20Repair/before_zps12ce48a2.jpg',
      title : 'Honda. The Power of Dreams.'
    },
    {
      src : [
        'http://1eb9cddbb30a65a675d4-91fe7d858d3e9c59dcdfd3e789416fbc.r56.cf1.rackcdn.com/Sites/577/commercial.mp4'
      ],
      poster : 'http://i145.photobucket.com/albums/r217/Carnifreekshow/Asus%20Orion%20Repair/before_zps12ce48a2.jpg',
      title : 'Thanks for Making Us #1'
    }
  ];


  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="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){
        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);

and the videojs-Playlist plugin.

Can anyone help ?

Answer 1

I solved the problem, my js file was sending width and height and was not accepting the values in my css file.

Here is the solution, in-case anybody else faces this problem: (Added this style in head of index.html)

<style type="text/css">
    .container {
     width: 100%;
     margin: 0px auto;
    }
    #video {
     max-width: 100%;
     height: auto;
    }
    .video-js {
    width: 640px !important;
    height: 264px !important;
    }
    </style>

Note: Also changed

.centered {
    width: 45%; //This value needs to be changed according to screen pixels.
    margin: 30px auto 0;
}