Javascript 如何在视频中动态添加章节。？_Javascript_Html_Html5 Video

Javascript 如何在视频中动态添加章节。？

javascript html

Javascript 如何在视频中动态添加章节。？,javascript,html,html5-video,Javascript,Html,Html5 Video,事实上，我是网络开发的新手。。我想要一个有章节的视频。我试过一个从谷歌得到的代码 var vid = $('.vidchaVideo')[0]; var vidDuration = vid.duration; var chapterCount = $(".vidchaNav").children().length; // get chapterCount from children divs $('.vidchaVideo').on("timeupdate&q

事实上，我是网络开发的新手。。我想要一个有章节的视频。我试过一个从谷歌得到的代码

var vid = $('.vidchaVideo')[0];
var vidDuration = vid.duration;

var chapterCount = $(".vidchaNav").children().length; // get chapterCount from children divs


$('.vidchaVideo').on("timeupdate", function() {

for (var i = 1; i <= chapterCount; i++) { // iterate through chapters

  var start = $(".vidchaNav>*:nth-child(" + i + ")").data("start"); // get start time frome data-attr
  var end;

  // get end time from start-time from next chapter (check if last chapter)
  if(i+1 > chapterCount) {
    end = vidDuration;
  } else {
    var nextChapter = i+1;
    end = $(".vidchaNav>*:nth-child(" + nextChapter + ")").data("start");
  }

  // set current Chapter active
  if (vid.currentTime >= start && vid.currentTime < end) {
    setActive(i);
  }

}
 })



// click action

$(".vidchaNav > *").click(function() {
var clickedChapter = $(this).index() + 1;

setActive(clickedChapter);
skipTime($(this).data("start"));


 });


  function setActive(cha) {
    $(".vidchaNav>*").removeClass("active"); // reset all active classes
    $(".vidchaNav>*:nth-child(" + cha + ")").addClass("active"); // add class to active chapter
  }

  // skip to time in timeline
  function skipTime(time) {
    vid.play();
    vid.pause();
    vid.currentTime = time;
    vid.play();
  };

var vid=$（'.vidchaVideo'）[0]；
var vidDuration=vid.duration；
var chapterCount=$（“.vidchaNav”）.children（）.length；//从children div获取chapterCount
$（'.vidchaVideo'）。打开（“时间更新”，函数（）{
对于（变量i=1；i章数）{
结束=持续时间；
}否则{
var nextChapter=i+1；
结束=$（“.vidchaNav>*：第n个子项（“+nextChapter+”）。数据（“开始”）；
}
//将当前章节设置为活动
如果（vid.currentTime>=开始和&vid.currentTime<结束）{
setActive（i）；
}
}
})
//点击操作
$（“.vidchaNav>*”）。单击（函数（）{
var clickedChapter=$（this）.index（）+1；
设置活动（单击章节）；
skipTime（$（this.data（“start”））；
});
功能设置激活（cha）{
$（“.vidchaNav>*”）.removeClass（“活动”）；//重置所有活动类
$（“.vidchaNav>*：第n个子（“+cha+”）.addClass（“活动”）；//将类添加到活动章节
}
//跳到时间线中的时间
函数skipTime（时间）{
视频播放（）；
参阅暂停（）；
vid.currentTime=时间；
视频播放（）；
};

我的HTML是

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>jQuery vidcha.js Plugin Example</title>
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <header>
    <h1>jQuery vidcha.js Plugin Example</h1>
  </header>

  <!-- html5 video -->
  <section class="video">
    <video class="vidchaVideo" poster="assets/explore.jpg" controls>
      <source src="assets/explore.mp4" type="video/mp4">
    </video>
  </section>

  <!-- chapter navigation / set start time in seconds -->
  <section>
      <ul class="vidchaNav">
        <li data-start="0">1. Intro</li>
        <li data-start="6.6">2. Explore</li>
        <li data-start="24.7">3. Harvest</li>
        <li data-start="42.3">4. Ending</li>
      </ul>
  </section>


</body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="js/vidcha.js"></script>

<script>
  $('video').click(function(){this.paused?this.play():this.pause();});
</script>

</html>


jQuery vidcha.js插件示例
jQuery vidcha.js插件示例

1。介绍
2。探索
3。收获
4。结束

$（'video'）。单击（函数（）{this.pause？this.play（）：this.pause（）；}）；

但由于我有这么多的视频在我这边，我不能使用此代码。。我已经尝试了很多方法将其转换为动态代码，但没有一种能很好地工作。我写了一个这样的代码来计算视频的持续时间，并通过除以6来更改章节。但是代码没有运行

function bringChapter() {
  var myVideo = document.getElementById("video_player");
  myVideo.addEventListener('loadedmetadata', function () {
    console.log(myVideo.duration);
    var dur = myVideo.duration;
    var chapt = Math.round(dur) / 6;
    if (Math.round(dur) % 6 == 0) {
      $("ul").append("<li data-start='0'>1. Intro</li>");
      $("ul").append("<li data-start='6.6'>2. Explore</li>");
      for (var i = 1; i <= chapt; i++) {

      }
     
    }
    else {

    }

  });
}

function-bringChapter（）{
var myVideo=document.getElementById（“视频播放器”）；
myVideo.addEventListener（'loadedmetadata'，函数（）{
console.log（myVideo.duration）；
var dur=myVideo.duration；
var chapt=数学圆整（dur）/6；
如果（数学四舍五入（dur）%6==0）{
$（“ul”）.append（“1.Intro”；
$（“ul”）。追加（“2.Explore”；
对于（var i=1；i