首页 > 其他分享 >在B站刷学习视频时如何知道剩余分集视频总时长?

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

时间:2023-10-26 10:24:52浏览次数:27  
标签:剩余 视频 end index 总时长 start calTime var

前言

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

image

多达473个视频

实操步骤

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

使用方法很简单:

  1. 首先进入视频页面
    image

  2. 按F12切换到控制台

image

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

image

参考代码

// 适用于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

标签:剩余,视频,end,index,总时长,start,calTime,var
From: https://www.cnblogs.com/Megasu/p/17788794.html

相关文章

  • 视频常见问题(四):视频花屏和绿屏
    摘要本文介绍了视频视频花屏/绿屏问题的常见原因,如丢失关键帧、metadata的变化、硬件编解码的兼容性问题和颜色格式不一致问题。以及排查方法和解决策略,包括检查视频数据格式、排查自采集/自渲染模块问题、联系第三方音视频SDK技术支持等。最后,还介绍了即构ExpressSDK的解决方......
  • Java拾贝第十一天——IO流之字节流复制图片、视频
    Java拾贝不建议作为0基础学习,都是本人想到什么写什么文件在硬盘或传输时都以字节的形式进行传输。包括图片、视频等。思路:先定位源文件file1作为源文件,file2作为复制文件使用字节流输入流读取file1使用字节流输出流输出file2关闭流。定位源文件,我特地翻出来一张学校......
  • RTSP视频流媒体服务器LiteCVR v3.1更新:通道收藏优化
    在安防视频监控行业,监控摄像头也正从"看得见"到"看得清"开始转变,现在的网络智能摄像头,不仅可以拥有高清超高清的监控画质,还能对记录的视频中的人或物体进行识别。近期我们对LiteCVR增加了普通用户的收藏功能,今天来简单介绍一下。在LiteCVRv3.1版本之前,普通用户只能查看分配给自己......
  • RTSP视频监控平台LiteCVR v3.1更新:通道收藏优化
    在安防视频监控行业,监控摄像头也正从"看得见"到"看得清"开始转变,现在的网络智能摄像头,不仅可以拥有高清超高清的监控画质,还能对记录的视频中的人或物体进行识别。近期我们对LiteCVR增加了普通用户的收藏功能,今天来简单介绍一下。在LiteCVRv3.1版本之前,普通用户只能查看分配给......
  • 智慧停车视频解决方案:如何让AI助力停车管理升级?
    一、项目背景停车场的管理区域由于面积比较大,进出车辆多,所以在保安方面决不能有任何的麻痹和松懈,继续采用过去保安方式已远远不能满足现代安全防范的需求。为满足停车场的安全和科学系统化管理的需要,以及为了对随时发生的情况进行全面、及时的了解和掌握,对意外情况能迅速做出正确判......
  • 如何在腾讯视频设置代理提高速度
    腾讯视频是中国最受欢迎的在线视频服务之一,它提供了丰富的影视资源和高清流畅的播放体验。然而,有些用户可能会遇到视频缓冲、加载慢等问题。为了解决这个问题,我们可以通过设置代理服务器来提高视频播放速度。下面是如何在腾讯视频中设置代理服务器的步骤。首先,我们需要打开腾讯视频......
  • RTMP流媒体服务器LiteCVR支持在iOS播放WebRTC低延时视频流
    视频监控设备是安防行业的细分专业领域,近年来,视频监控业务正在向其他领域加速渗透。众所周知,iOS系统支持HLS流,但是HLS流延时高,无法满足实时流的要求;而WebRTC播放延时低,因此,很多用户希望能在iOS系统上播放Webrtc视频流。针对用户的这一需求,LiteCVR平台灵活的视频能力,可以完全满足。......
  • 智慧停车视频解决方案:如何让AI助力停车管理升级?
    一、项目背景停车场的管理区域由于面积比较大,进出车辆多,所以在保安方面决不能有任何的麻痹和松懈,继续采用过去保安方式已远远不能满足现代安全防范的需求。为满足停车场的安全和科学系统化管理的需要,以及为了对随时发生的情况进行全面、及时的了解和掌握,对意外情况能迅速做出正确......
  • 美颜SDK集成指南:为应用添加视频美颜功能
    随着社交媒体和直播应用的兴起,视频美颜功能已成为用户追求的一项热门特性。用户希望能够在拍摄照片或进行实时视频直播时,使用美颜功能来增强其外观。为了满足这一需求,开发者可以考虑集成美颜SDK,为其应用增加这一吸引人的功能。本文将为您提供一份详尽的美颜SDK集成指南,以便为您的应......
  • 【畅联】H264视频流格式解析
      ......