视频进度条

2021-11-28 15:49:41

不知何时B站的视频底部出现了五颜六色的进度条，这一功能的出现确实会把视频的观赏体验进一度提高，现在B站的原生进度条好像也支持分段了，但是视频内在的进度条依然是最优的选择，因为比较直观。

之前偶然看到有个B…站UP主的视频，通过网站可以生成进度条MP4文件，功能挺全面，最近访问那个网站发现功能更全面了
【竟然有用】我开发了一个视频导航条自动生成器！！！
视频导航生成器

然后感觉自己也可以试着做一下，凭着“大胆假设，小心求证”的态度，尝试着做了一下。
视频进度条生成

但是不支持导出为mp4，可以截图来用…

代码在下用jq实现的小小功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="https://icon.ganto.cn/g.png">
  <title>视频进度条生成</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    main{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .out{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 200px;
      border: 1px solid green;
      display: flex;
      justify-content: left;
      overflow: auto;
    }
    .item{
      background-color: pink;
      border-right: 1px solid black;
      padding: 0 10px;
      line-height: 50px;
      position: relative;
    }
    .item:last-child{
      border-right: 0;
    }
    .item i{
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: red;
      font-style: normal;
      font-weight: 900;
      text-align: center;
      line-height: 40px;
      position: absolute;
      bottom: 0px;
      right: 0;
      cursor: pointer;
    }
    .item p{
      text-align: center;
    }
    .item input{
      display: block;
    }
  </style>
</head>
<body>
  <main>
    <div class="in">
      <label for="a">总时长
        <input type="text" id="a" placeholder="总时长" value="00:01:00">
      </label>
      <button class="add">添加段落</button>
      <button class="su">生成</button>
    </div>
    <div class="out">
      <div class="item">
        <i>删</i>
        <p contenteditable="true">前言</p>
        <input type="text" class="k" placeholder="开始" value="00:00:00">
        <input type="text" class="j" placeholder="结束" value="00:00:30">
      </div>
    </div>
  </main>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    /**
     * 1.
     * 输入总时长 时分秒 00:01:00
     * 输入每段的开始-结束 00:00:00-00:00:30 00:00:30-00:01:00
     * 
     * 2.
     * 新建段落
     * 删除段落
     * 
     * 3.
     * 生成可视频或者图片
     * 
     */
    $(".in .add").click(function(){
      $(".out").append('<div class="item"><i>删</i><p contenteditable="true">输入标题</p><input type="text" class="k" placeholder="开始"><input type="text" class="j" placeholder="结束"></div>');
    })
    $(".in .su").click(function(){
      let tim = (new Date("2021-01-01 " + $("#a").val()).getTime() - new Date("2021-01-01 00:00:00").getTime()) / 1000;
      console.log(tim);
      let items = $(".out .item");
      // console.log(items.length);
      for(let i = 0; i <= items.length - 1; i++){
        // console.log(i);
        let kV = $(".out .item").eq(i).children(".k").val();
        let jV = $(".out .item").eq(i).children(".j").val();
        // console.log(tim, kV, jV);
        // console.log((new Date("2021-01-01 "+jV).getTime() - new Date("2021-01-01 "+kV).getTime()) / 1000);
        let bi = (new Date("2021-01-01 "+jV).getTime() - new Date("2021-01-01 "+kV).getTime()) / 1000 / tim * 100 + "%";
        // console.log(tim, (new Date("2021-01-01 "+jV).getTime() - new Date("2021-01-01 "+kV).getTime()) / 1000, bi);
        $(".out .item").eq(i).width(bi);
        $(".out .item input").hide();
        $(".out, .out .item").height(50);
        $(".item i").hide();
      }
    })
    $(".out").on("click", ".item i",function(){
      $(this).parent().remove();
    })
  </script>
</body>
</html>

本文链接：https://heri.ganto.cn/2021/11/28/upZhuProgressBar/

本文更新于：2022-03-31 15:21:27

小站声明：如果你需要“转载”、“引用”小站的文章，可以不需要作者同意，请务必标明出处和文章链接。

< 面试题 Vue学习笔记 >