jQuery 自动切换视频章节 | 代码示例

<div id="video-container">
  <video id="video" controls>
    <source src="chapter1.mp4" type="video/mp4">
  </video>
</div>
<div id="chapter-list">
  <ul>
    <li data-video="chapter1.mp4">Chapter 1</li>
    <li data-video="chapter2.mp4">Chapter 2</li>
    <li data-video="chapter3.mp4">Chapter 3</li>
  </ul>
</div>
<script>
  $(document).ready(function() {
    $('#chapter-list li').click(function() {
      var videoSource = $(this).data('video');
      $('#video source').attr('src', videoSource);
      $('#video')[0].load();
    });
  });
</script>
<p>该代码包含一个带有控制按钮的视频播放器和一个章节列表。当点击列表中的章节时，视频将自动切换到该章节对应的视频文件。需要将章节视频文件的路径更新到代码中的'data-video'属性中。</p>