Why video is not playing, first time it will play on dynamically changing it will not play

Question

I'm using videojs plugin to play my videos dynamically on click of each video but it does not play what i'm doing wrong.

$(function(){
  
    $('.player-src').on('click',function(){
       //alert($(this).attr('data-src'));
       var videosrc = $(this).attr('data-src');
       videojs('my_video_1', {
			  sources: [{
			    src: videosrc,
			    type: 'video/mp4'
			  }, {
			    src: videosrc,
			    type: 'video/webm'
			  }]
			});
   });

});

ul{
  display:block;
  list-style: none;
  background:#eaeaed;
  padding:15px;
}

li.player-src{
     padding: 12px;
    background: orangered;
    color: #fff;
    display: inline-flex;
    margin: 12px;
    cursor: pointer;
}

<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul >
  <li class="player-src" data-src="/local/filename.mp4">play-video1</li>
  <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
  <li class="player-src" data-src="/local/filename.mp4">play-video3</li>
  <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
  <li class="player-src" data-src="/local/filename.mp4">play-video5</li>
</ul>



 <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls 
                        
                  data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
                   
                      <!-- <source src="uploads/thursday.mp4"  type='video/mp4'/> -->
                      <source src="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL' />
                      <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
                   
</video>

Please help me thanks in advance.

Answer 1

You are initializing video player again and again, but I think you just need to change source. Please try following.

$(function(){
  
    $('.player-src').on('click',function(){
    
       var videosrc = $(this).attr('data-src');
       var myPlayer = videojs('#my_video_1');
       myPlayer.src([ 
      { type: "video/mp4", src: videosrc },
      { type: "video/webm", src: videosrc },
      { type: "video/ogg", src: videosrc }]
      );
   });

});

<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul >
  <li class="player-src"  data-src="/local/filename.mp4">play-video1</li>
  <li class="player-src"  data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
  <li class="player-src"  data-src="/local/filename.mp4">play-video3</li>
  <li class="player-src"  data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
  <li class="player-src"  data-src="/local/filename.mp4">play-video5</li>
</ul>

 <video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls       
                  data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
</video>

Answer 2

If the only thing that you are trying to achieve, is to have the user be able to select one of the five video files to play, then I'd suggest that your javascript can simply copy the chosen video's filename into the src parameter of a single source-tag, and then the user clicks the play-button to 'play' it.

Also, rather than use the five li tags, you could use a 'drop-down' list, by having five option tags, inside a select tag. Which is how I do it. (Note: if you want all five choices visible at once, set the size parameter of the select tag to "5".)

Ok, here's the URL of one of my video pages, where I have 10 files to choose from. (I make only the first five initially visible, by setting size parameter to 5. A vertical scroll-bar allows you to scroll thru all the 10 choices.)

https://weasel.firmfriends.us/Taxi-Series/

Just do a 'view page source' (by a right-click anywhere on my page), to view my markup and javascript. Using the select/option tags approach, makes the necessary javascript trivial! (My JS is a bit longer, only because I need to string-concatenate the filename from segments, and manipulate analogous subtitle text-tags, but in your case, I'd think you'd need no more than 4 or 5 lines of JS, total.)

Oh, and all the CSS and markup for the 'hero" text is NOT necessary for you. (I added it as an after-thought, to achieve that extra 'floating/dissolving' line of episode-name text, that displays during pause/play transitions.)

I hope this helps. Cheers...

Answer 3

An instance of the Player class is created when any of the Video.js setup methods are used to initialize a video.

 var player = videojs('#my_video_1');

After an instance has been created it can be accessed globally ussing player

Problem

your mistake is set source as an optional for every element onclick event. you must set src for every onclick event

Html:

<html>
<body>
<link href="https://vjs.zencdn.net/7.3.0/video-js.css" rel="stylesheet"/>
<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="player-src" data-src="/local/filename.mp4">play-video1</li>
    <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
    <li class="player-src" data-src="/local/filename.mp4">play-video3</li>
    <li class="player-src" data-src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
    <li class="player-src" data-src="/local/filename.mp4">play-video5</li>
</ul>
<video id="my_video_1" class="video-js vjs-default-skin" width="640px" height="267px" controls
       data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type='application/x-mpegURL'/>
    <source src="https://vjs.zencdn.net/v/oceans.webm" type='video/webm'/>
</video>
</body>
</html>

Script:

 $(function () {
    var player = videojs('#my_video_1');
    $('.player-src').on('click', function () {
        var videosrc = $(this).attr('data-src');
        player.src([
            { type: "video/mp4", src: videosrc },
            { type: "video/webm", src: videosrc },
            { type: "video/ogg", src: videosrc }]
        );
        player.play();
    });
});

Example:

https://codepen.io/mostafami/pen/xQgxao