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" 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>

请帮帮我，先谢谢了。

答案＃1

你一次又一次地初始化视频播放器，但我认为你只需要更改来源。请尝试以下方法。

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

答案＃2

如果你唯一想要实现的目标是让用户能够选择播放五个视频文件中的一个，那么我建议你的 JavaScript 可以简单地将所选视频的文件名复制到单个 source 标签的 src 参数中，然后用户点击播放按钮来“播放”它。

另外，与使用五个 li 标签相比，你可以使用一个“下拉”列表，通过在 select 标签内放置五个 option 标签来实现。这就是我使用的方法。（注意：如果你希望一次看到所有五个选项，将 select 标签的 size 参数设置为“5”。）

好的，这里是我的一个视频页面的URL，我在那里有10个文件可供选择。（我最初只显示前五个，通过将大小参数设置为5。一个垂直滚动条允许你滚动查看所有10个选项。）

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

只需对我的页面任意位置右键点击并选择“查看页面源代码”，就可以查看我的标记和 JavaScript。使用 select/option 标签的方法，使所需的 JavaScript 变得非常简单！（我的 JS 稍微长一些，只是因为我需要把文件名从各个片段拼接起来，并操作类似的字幕文本标签，但就你而言，我想你总共不需要超过 4 或 5 行 JS 就够了。）

哦，‘hero’ 文本的所有 CSS 和标记对你来说都不是必要的。（我添加它只是事后想到的，用来实现额外的‘漂浮/消散’的剧集名称文本，在暂停/播放转换时显示。）

希望这有帮助。干杯…