javascript – 为什么视频没有播放,第一次播放时会动态改变视频无法播放

我正在使用videojs插件动态播放我的视频点击每个视频,但它不会播放我做错了什么.

$(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" src="/local/filename.mp4">play-video1</li>
  <li class="player-src" src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
  <li class="player-src" src="/local/filename.mp4">play-video3</li>
  <li class="player-src" src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
  <li class="player-src" 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>

请提前帮助我.

解决方法

您正在反复初始化视频播放器,但我认为您只需要更改源代码.请尝试以下.

$(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",{ 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"  src="/local/filename.mp4">play-video1</li>
  <li class="player-src"  src="https://vjs.zencdn.net/v/oceans.webm">play-video2</li>
  <li class="player-src"  src="/local/filename.mp4">play-video3</li>
  <li class="player-src"  src="https://vjs.zencdn.net/v/oceans.webm">play-video4</li>
  <li class="player-src"  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",2] }'>
</video>