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

Question

我正在使用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>

请提前帮助我.

Answer 1

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

此外，您可以使用“下拉”列表，而不是使用五个 li 标签，方法是在 select 标签内添加五个选项标签。我就是这样做的。（注意：如果您希望所有五个选项同时可见，请将选择标签的大小参数设置为“5”。）

好的，这是我的一个视频页面的 URL，其中有 10 个文件可供选择。（我通过将 size 参数设置为 5，仅使前 5 个选项最初可见。垂直滚动条允许您滚动浏览所有 10 个选项。）

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

只需执行“查看页面源代码”（通过右键单击页面上的任意位置）即可查看我的标记和 javascript。使用选择/选项标签方法，使必要的 javascript 变得微不足道！（我的 JS 有点长，只是因为我需要从段中字符串连接文件名，并操作类似的字幕文本标签，但就你而言，我认为你不需要超过 4 或 5 行JS，总计。）

哦，“英雄”文本的所有 CSS 和标记对您来说都不是必需的。（我将其添加为事后的想法，以实现在暂停期间显示的剧集名称文本的额外“浮动/溶解”行/播放过渡。）

我希望这有帮助。干杯...