javascript - Varför spelas inte videon, första gången spelar den men när den ändras dynamiskt spelas den inte

Jag använder videojs-plugin för att spela mina videor dynamiskt vid klick på varje video, men den spelar inte. Vad gör jag fel?

$(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>

Vänligen hjälp mig, tack på förhand.

Svar #1

Du startar videospelaren om och om igen, men jag tror att du bara behöver byta källa. Vänligen prova följande.

$(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>

Svar #2

Om det enda du försöker uppnå är att användaren ska kunna välja en av de fem videofilerna att spela upp, skulle jag föreslå att din javascript helt enkelt kan kopiera det valda videofilen filnamn till src-parametern på en enda source-tagg, och sedan klickar användaren på play-knappen för att 'spela' den.

Dessutom, istället för att använda de fem li-tagen, kan du använda en 'drop-down'-lista, genom att ha fem option-taggar inuti en select-tagg. Det är så jag gör det. (Observera: om du vill att alla fem val ska vara synliga samtidigt, ställ in size-parametern för select-taggen till "5".)

Okej, här är URL:en till en av mina videosidor, där jag har 10 filer att välja mellan. (Jag gör bara de första fem synliga initialt, genom att sätta storleksparametern till 5. En vertikal rullningslist låter dig bläddra igenom alla 10 valen.)

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

Gör bara en 'visa sidkälla' (genom att högerklicka var som helst på min sida) för att se min markup och JavaScript. Att använda select/option-taggarna gör den nödvändiga JavaScripten trivial! (Min JS är lite längre, bara för att jag behöver sammanfoga filnamnet från segment och manipulera motsvarande undertext-taggar, men i ditt fall tror jag att du inte skulle behöva mer än 4 eller 5 rader JS totalt.)

Åh, och all CSS och markup för 'hero'-texten är INTE nödvändig för dig. (Jag lade till det som en eftertanke, för att uppnå den extra 'flytande/upplösande' raden med avsnittsnamn som visas under paus/spela-övergångar.)

Jag hoppas att detta hjälper. Skål...