利用节流记录视频(下次打开页面时,视频仍在上次播放的位置)

一、引用事件

ontimeupdate() 事件在当前的播放位置发送改变时触发。

onloadeddata() 事件在浏览器加载视频/音频(audio/video)当前帧时触发。

currentTime() 设置或返回视频播放的当前位置(以秒计)

二、参详代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      video{
          width: 800px;
          margin: 0 auto;
      }
  </style>
</head>
<body>
     <video src="./190手写防抖和节流.mp4" controls></video>

     <script src="./js/lodash.min.js"></script>
     <script>
       var video= document.querySelector('video');
       //节流
       video.ontimeupdate=_.throttle(function(){
            var t=video.currentTime;
            localStorage.setItem('cur',t)
       }, 1000);

       video.onloadeddata=function(){
          var t= localStorage.getItem('cur');
          video.currentTime=t;
       }
     </script>
</body>
</html>

lodash.min.js到Lodash 简介 | Lodash中文文档 | Lodash中文网上下载

相关推荐
zhanlang021719 小时前
HTML 零基础入门到企业实战【第五章 5.4】内嵌网页 iframe 标签:嵌入网页、视频、地图实战
前端·html·音视频
TengTaiTech19 小时前
头戴耳机做运动相机外接麦:一颗麦克风同时服务蓝牙通话与 3.5mm 录音的底层重构
数码相机·音视频·蓝牙·qcc
2301_790355972 天前
【技术拆解】短视频配音自动化流程:从文案预处理到 SRT 字幕的 9 个环节
自然语言处理·音视频
大飞哥软件自习室2 天前
视频批量截图并自动拼图是怎么做的:从四步向导、三种截帧模式到等距抽样与日志兜底的实现拆解,附 FFmpeg 调用与线程模型说明
ffmpeg·音视频·批量截图
Black蜡笔小新3 天前
消防控制室/配电房/中控室...视频汇聚平台EasyCVR岗位AI智能监测方案守住关键岗位
大数据·音视频·easycvr
FlightYe3 天前
音视频修炼之容器与协议(四):RTSP详解
android·linux·ffmpeg·音视频·dash
乐橙开放平台4 天前
海康和大华摄像头能统一管理吗?可以通过 GB28181 或视频融合平台接入
网络·后端·物联网·音视频
Mirawork4 天前
Mirawork v0.32.0 更新体验:会话引用、任务分享与音频转写怎么用
人工智能·音视频
熬夜磕代码丶5 天前
RN鸿蒙空间音频实战
华为·音视频·harmonyos
一条破秋裤6 天前
【V4L2采集视频】
音视频