js 统计学习一个视频的总时长

vue3-video-play实现学习视频,禁止快进、记录播放时长等功能 使用 vue3 + vue3-video-play 实现禁止快进未查看内容,可回退观看已观看内容;记录视频最大播放时长(禁止快进最大播放时长)以及实际时长(回到页面从实际时长继续播放);关闭/离开页面上传参数信息; 阅读详情

<!DOCTYPE html>
 <html lang="en">

<head>
    <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
 </head>
 
 <body>
     <video src=""></video>
     <video id="video1" width="420" style="margin-top:15px;" controls="" autoplay="" name="media">
         <source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4?t=7" type="video/mp4" /> Your browser does not support HTML5 video.
     </video>
 </body>
      <script>
      
         var a = document.getElementById("video1");
         var timespan = 0;
         var isCountTime = false;
         a.onplaying = function () {
             isCountTime = true;
             console.log("playing");
         }
         a.onwaiting = function () {
             isCountTime = false;
             console.log("waiting");
        }
         a.onpause = function () {
             isCountTime = false;
             console.log("pasused");
         }
         setInterval(function () {
            if (isCountTime) {
                 timespan += 0.1;
                 console.log(timespan);
             }
         }, 100);
     </script>
 </html>

【ElementUI组件】视频上传+计算视频时长 效果入下: 实现步骤:1.首先先安装官网的操作步骤安装elementui 或者 不安装直接引入安装指令: 引入方式: 2.以下是参考代码HTML代码: data中添加: js代码: 计算视频时长如下:上传视频成功后,接口会返回一个地址,用这个地址就可以获取视频时长 上传视频成功:如果需要其格式的时间,请参考上篇博客 【JS】常用的4种时间格式转换我是本篇小编kk,遇到Bug需要帮助,欢迎加wx:xmzl1988........................ 阅读详情

相关推荐

Javascript 实时记录视频播放进度,防止观看作弊

上面实现了一个简单的基于原生video的具有动态颜色的进度条,可以有效地记录在视频中的观看进度。可以在上面的基础上拓展:比如原生标签用其他的播放器代替(DPlayer等),可能相应的监听时间需要做修改。比如将记录通过后台接口将记录写入在数据库,下次播放时读取记录继续播放等。

qq_26631337的博客 2708

vue-video-play 记载视频观看时间和还原视频进度

vue-video-play 记载视频观看时间和还原视频进度vue-video-play 还原视频进度vue-video-play 记载视频观看时间vue-video-play 全屏也要将弹出窗DOM置顶 vue-video-play 还原视频进度 参考文档 从后台获取的播放视频参数如下: 当前播放到哪里了的时间videoLearnedTime 视频时长videoTotalTime 视频地址 用户ID 视频ID 因为本人的需求是同一页面,要切换加载不同的视频 ,发现ready这个函数不能准确的加载。故在

a158086780的专栏 6388

使用video.js或原生事件统计视频观看时长

使用video.js和原生事件实现了两版视频统计时长,并且支持网络卡顿时暂停统计时长,重新播放时可以继续统计时长的功能,兼容性比较强,可根据实际再进行调整,基本原生事件都可以实现相关时长统计且误差很小,还可以支持多视频分别统计时长。

js统计在线学习时间

js统计页面打开时间、元素创建时间

前端人公众号作者 2235

BMC的风扇控制 (Fan speed control)

这篇文章是我刚开始做风扇功能的时候写的,因为那时候都找不到主管要我报告的内容,所以报告完就顺便整理一下,最近因为在修控制学,之后应该会再补一篇和控制学相关的内容 (如果有空的话) BMC的风扇控制算一个蛮重要的功能,那这个功能包含了"TACH"和"PWM"这两个常用讯号怎么解读,还有最常用的控制演算法"PID(closed loop)"和"Stepwise(openloop)",而另外的Error control ,因为每家做法不同,就不会在这边作介绍 ##实作程式码是来自Facebook的openBM

yeiris的博客 1万+

编译原理考试大题分析【太原理工大学】

看完本篇大题拿 85% 的分应该没问题,TYUT 太原理工大学编译原理期末考试。

m0_52861684的博客 1万+

一个简单的B站学习视频合计时常计算程序(java版)

在学习b站的时候,小伙伴你是否想简单统计一下你的学习时常,或者看一下全系列还有多久能全学完,初学Java的我提供了一个简陋的统计方式(大佬勿喷)

JarVis的博客 1130

常微分方程 (ODE) 和 随机微分方程 (SDE)

常微分方程(Ordinary Differential Equations, ODE)和随机微分方程(Stochastic Differential Equations, SDE)是数学中描述系统动态行为的重要工具。它们有一些相似之处,但在处理随机性方面存在显著差异。

weixin_39699362的博客 4384

纯HTML5播放器带倍速、带画质切换的播放器

摘要:本文介绍了一个基于HTML5的播放器实现方案,支持倍速播放和画质切换功能。通过Polyv Player API,开发者只需创建一个容器div并调用polyvPlayer()函数,传入配置参数即可快速集成。关键参数包括视频ID(vid)、容器选择器(wrap)、尺寸(width/height)、自动播放(autoplay)、循环播放(loop)等。播放器还支持自定义倍速选项(speed)、清晰度切换(showHd)、记忆播放进度(ban_history_time)以及指定播放起止时间(watchStar

阿酷tony 238

从原理到应用:深入解析双编码器在机器人关节力矩感知中的实现

本文深入解析了双编码器方案在机器人关节力矩感知中的实现原理与应用。该方案通过在电机侧和输出侧分别安装编码器,利用两者位置差异间接高精度计算外力,克服了传统电流环精度不足和扭矩传感器成本高昂的缺点。它为实现协作机器人的丝滑拖动示教、灵敏碰撞检测以及足式机器人的动态平衡与柔顺控制提供了关键技术支撑,是目前高性能机器人力控的主流选择。

t8u9v0w1x的博客 662

别再傻傻分不清了!一文搞懂电机里的‘旋变’和‘编码器’到底有啥区别

本文深度解析电机位置传感器中旋转变压器(旋变)与编码器的核心区别,包括工作原理、精度对比及环境适应性。通过实测数据和典型应用场景,帮助工程师在工业机器人、新能源汽车电机等关键领域做出精准选型决策,提升系统可靠性和控制精度。

weixin_28689507的博客 504

videojs获取视频播放进度和浏览时长

需求: 1:获取视频播放进度 2:获取用户浏览时长 实现注意事项 1:调用video.js video.css 2:视频播放时计时,停止、缓冲时、关闭网页时浏览时长计算停止,并将数据上传到服务器 html <!DOCTYPE html> <html lang="en"> <head> <title>Video.js | HTML5 Video Player</title> <link href="htt..

test_appletwo的博客 1万+

Matlab实战:12种优化算法在CEC2014测试集上的性能对比(附完整代码)

本文详细对比了12种优化算法在CEC2014测试集上的性能表现,包括PSO、DE、GA等主流算法。通过Matlab实现完整的实验流程,涵盖算法实现、参数设置、结果分析与可视化,为工程优化问题提供实用解决方案。特别关注收敛曲线和评价指标,帮助读者选择最适合特定场景的优化算法。

wine的专栏 681

如何用JavaScript实现视频观看时间追踪

在网页开发中,跟踪用户与多媒体内容(如视频)的互动是一项常见需求。无论是教育平台、数据分析,还是用户参与度统计,监控用户如何观看视频内容都能提供宝贵的见解。这篇文章将探索如何使用JavaScript实现视频播放时长的跟踪。目标我们的目标是跟踪用户观看视频的总时长,包括暂停的时间,并将这些信息更新到后台系统。我们将通过捕获播放、暂停和结束等事件来计算观看时间。实现步骤让我们来分解一下实现的关键方面:...

前端达人 967

【DaVinci Configurator专题】-5-通过Data Mapping自动创建CAN信号关联的Port并添加到APP SWC

目录 1 导入CAN Matrix变更后的Arxml文件 2 自动创建CAN信号关联的APP Port 3 CAN信号与App SWC的接口映射/连接 4 结尾 <--返回「实战篇」博文-总目录--> <--返回「Autosar从入门到精通-实战篇」专栏主页--> 关键词: DaVinci Developer DaVinci Configurator Pro ARXML AUTOSAR System Description Network Explorer 1

「汽车电子助手」的博客 5130

【ROS】Nav2源码之nav2_collision_monitor(碰撞监测)详解

nav2_collision_monitor碰撞监视器是一个节点,为机器人提供了一个额外的安全级别。它使用来自传感器的数据,执行若干与避免碰撞相关的任务,绕过成本图和轨迹规划器,监测是否需要紧急停止或者减速。

郭老二 1456

Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理

Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理 <video id="myVideo" controls="controls"> <source type="video/mp4" src="mi.mp4"> </video> <script> function videoInit(){ let elevideo = document.getElementById('myVideo');

weixin_41827052的博客 5363

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

通过video.js或原生事件统计实际观看视频时长,支持多视频时长统计

通过video.js和原生事件监听两种方式实现视频时长统计,支持网络卡顿时暂停计时,重新播放后重新计时的功能、支持多视频分别统计时长的功能。

king2wang的博客 1万+

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

【亲测免费】 精准统计视频观看时长:一款强大的开源工具

精准统计视频观看时长:一款强大的开源工具 【下载地址】视频观看时长统计工具 视频观看时长统计工具本仓库提供了一个资源文件,用于实现视频观看时长的统计功能 项目地址: https://gitcode.com/open-source-...

gitblog_09788的博客 1472

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

原生js video获取当前视频时间进度和视频总时长

<div id="toolist"> <!-- video测试 --> <video src="./resource/VID_0005.3gp" autoplay="autoplay" loop controls="controls " id="video-active"> <source type="video/mp4" /&...

计忆芳华的博客 5938

统计页面学习时长——停留时间

【代码】统计页面学习时长——停留时间。

xiaoququ的博客 1206

html5 video 统计播放时长

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <!-- <script src="video.js" ></script> <sc...

qq_21834227的博客 2797

H5-video1 iOS苹果和微信中音频和视频实现自动播放的方法

通过下面的方式可以解决,在iPhone手机微信中正常自动播放。 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~ audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop>audio

qq_25600055的专栏 8981

分享一个HTML5的video用法

video支持的格式有三种      ogg/mpg4/webm video标签属性    1.autoplay自动播放    2.controls 控制面板    3.loop循环播放    4.preload 是否等加载完在播放(建议不用)    5.src 视频链接地址    6.poster加载图片(视频暂停播放开始默认的图片)    7.autobuffer 浏览器缓冲

allen的博客 2186
上一篇: thinkphp用户签到积分逻辑代码
下一篇: 前端js打印网页内容
运营侠
博客等级 码龄8年 3粉丝 8原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

运营侠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值