在B站刷学习视频时如何知道剩余分集视频总时长?

转载于:bilibili笔记 作者:丶whimmy

前言

最近在B站刷黑马的前端视频课。然而每次看视频都不知道还剩多少时长,制定计划时都很苦恼。

多达473个视频

实操步骤

终于刷完了JavaScript想练练手,于是基于JavaScript编写了一个计算时长的小脚本。

使用方法很简单:

  1. 首先进入视频页面

  2. 按F12切换到控制台

  1. 复制文末的代码,按照需要修改calTime函数的参数,回车即可

参考代码

// 适用于b站视频合集。代码复制到控制台,将 start 和 end 改为起止视频号即可
// 如:calTime(1, 10) // 计算p1到p10总时长
calTime(start, end) function calTime(start, end) {
var lis = document.querySelectorAll('.list-box .duration');
// NodeList 不是一个数组,是一个类似数组的对象 (Like Array Object)。
// 虽然 NodeList 不是一个数组,但是可以使用 forEach()来迭代。 var time_h = 0; // 小时
var time_m = 0; // 分
var time_s = 0; // 秒 lis.forEach((currentValue, index) => {
if (index >= start - 1 && index <= end - 1) {
let time = currentValue.innerText;
// 操作string类型的时长信息
let timeArr = time.split(':')
if (timeArr.length == 3){ //分集时长显示包含小时的情况
time_h += Number(timeArr[0])
time_m += Number(timeArr[1]);
time_s += Number(timeArr[2]);
}else{
time_m += Number(timeArr[0]);
time_s += Number(timeArr[1]);
}
}
})
// 得到总时长mm:ss格式
time_m = time_m + parseInt(time_s / 60)
time_s = time_s % 60
// 计算小时
time_h += parseInt(time_m / 60)
time_m = time_m % 60
console.log(`从p${start}到p${end} 总时长为${time_h}h ${time_m}min ${time_s}s`);
}

PS:没有编写start和end的大小判断逻辑等内容,作为新手写的代码也不是那么完善,能用就行

转载于:bilibili笔记 作者:丶whimmy

在B站刷学习视频时如何知道剩余分集视频总时长?的更多相关文章

  1. windows 7 下,如何统计某文件夹下 视频总时长

    由于项目需要,我需要给系统加权限,这真是一个让人头疼的问题,如果要每个业务方法都加上权限判断逻辑,那真的不敢想象是多么大的工作量,日后有变动的话,我会不会发疯? 所以我必须利用之前学到的AOP编程,在 ...

  2. 统计 flv视频总时长

    在学习孟媛的视频课程.网上能下载的是flv格式.那我在学习之前,我要统计一下这个课程的数量,他会用多长时间,这样方便我在学习过程中不断的回顾,进行时间管理.我大概就可以统计出来这个视频多长时间可以学完 ...

  3. 使用opencv统计视频库的总时长

    统计视频库里的视频文件的总时长 废话不多说,直接上代码: /* * ================================================================== ...

  4. 【教你zencart仿站 文章1至6教训 高清1280x900视频下载】[支持手机端]

    [教你zencart仿站 第1至6课 高清晰1280x900视频下载][支持移动端] 经过筹备, 我们的课件最终出来了- 我们 zencart联盟合伙人 项目推出的 在线yy同步演示zencart仿站 ...

  5. 用MCI处置WAV视频时,怎样才能让视频在当前窗口播放

    用MCI处理WAV视频时,怎样才能让视频在当前窗口播放MCI播放视频默认是新开一个窗口播放,播放完毕返回原来的窗口,想着原来窗口播放如何做? mciSendCommand或mciSendString怎 ...

  6. android获取mp4视频文件总时长和视频宽高<转>

    android使用 MediaMetadataRetriever 获取视频文件的 总时长 和视频的分辨率. 根据该方式获取视频信息可以看出不仅仅可以获取时长和分辨率,还能获取到其他的一些视频信息,不错 ...

  7. 新手学习FFmpeg - 调用API完成两个视频的任意合并

    本次尝试在视频A中的任意位置插入视频B. 在上一篇中,我们通过调整PTS可以实现视频的加减速.这只是对同一个视频的调转,本次我们尝试对多个视频进行合并处理. Concat如何运行 ffmpeg提供了一 ...

  8. PHP如何获取视频总时长与码率等信息

    利用PHP中的FFmpeg读取视频播放时长与码率等信息   function getVideoInfo($file) {    define('FFMPEG_PATH', '/usr/local/ff ...

  9. 我的Java开发学习之旅------>解惑Java进行三目运算时的自动类型转换

    今天看到两个面试题,居然都做错了.通过这两个面试题,也加深对三目运算是的自动类型转换的理解. 题目1.以下代码输出结果是(). public class Test { public static vo ...

  10. 音视频处理基础知识扫盲:数字视频YUV像素表示法以及视频帧和编解码概念介绍

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 一. ...

随机推荐

  1. Idea 避免import *

    File -> setting -> Editor -> Code Style -> Java -> Imports

  2. 网络编程懒人入门(十四):到底什么是Socket?一文即懂!

    本文由cxuan分享,原题"原来这才是 Socket",有修订. 1.引言 本系列文章前面那些主要讲解的是计算机网络的理论基础,但对于即时通讯IM这方面的应用层开发者来说,跟计算机 ...

  3. HVV面试

    linux日志管理 1. 检查系统帐号安全(1) /etc/passwd(2) /etc/shadow(3) 特权用户(uid==0)awk -F: '$3==0{print $1}' /etc/pa ...

  4. 化繁为简、性能提升 -- 在WPF程序中,使用Freetype库心得

    本人使用WPF开发了一款OFD阅读器,显示字体是阅读器中最重要的功能.处理字体显示有多种方案,几易其稿,最终选用Freetype方案.本文对WPF中如何使用Freetype做简单描述. OFD中有两种 ...

  5. WPF BitmapSource /BitmapImage 获取像素点颜色

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. mxGraph绘制机构图

    简单介绍一下使用的依赖: JGraphX package   JGraphX is a Java Swing diagramming (graph visualisation) library lic ...

  7. 深入探讨数据库索引类型:B-tree、Hash、GIN与GiST的对比与应用

    title: 深入探讨数据库索引类型:B-tree.Hash.GIN与GiST的对比与应用 date: 2025/1/26 updated: 2025/1/26 author: cmdragon ex ...

  8. FastReport实现遍历Dataset数据集计算

    delphi在使用fastreport进行打印时,需要对数据进行计算求和. 在打印文本框的OnBeforePrint事件中进行以下代码即可实现效果 procedure Memo7OnBeforePri ...

  9. Vmware共享文件夹安装设置方法(window与Linux使用共享文件夹)

    Vmware共享文件夹安装设置方法 注意:如果按照了工具,设置了共享文件夹,Linux下面还是没有的话,可以运行下面的命令,就会加载共享文件夹了 vmhgfs-fuse .host:/ /mnt/hg ...

  10. 天翼云发布边缘安全加速平台AccessOne,四大产品能力助力企业安全高速发展

    本文分享自天翼云开发者社区<天翼云发布边缘安全加速平台AccessOne,四大产品能力助力企业安全高速发展>,作者:天翼云社区官方账号 2023年5月30日全国科技工作者日,以" ...