记录用户上次看视频的进度,并且从记录的时间继续观看

2023-11-07

思路:因为视频多个,所以定义一个数组接收该用户已观看但是未观看完毕的字段(videoPlanArr),第一次进入获取本地储存的字段(videoPlanArr),如果没有获取到的话储存该视频id;有的话查询是否在数组中,未找到就把视频id添加进videoPlanArr中,有找到的话获取到上次观看的时间,赋值到video的initial-time属性上。timeupdate获取视频播放的进度,更新到videoPlanArr里。ended视频观看完毕删除videoPlanArr里视频id的进度。

<!-- lastDuration:上一次观看的进度 -->
<video :initial-time="lastDuration" @timeupdate="timeupdate" @ended="ended" id="myvideo"></video>
getVideoDetail(){
	...
	//res为请求到的数据
	let videoPlanArr = uni.getStorageSync('videoPlanArr')
	if(videoPlanArr){//判断 本地获取到videoPlanArr里的数据
		let rIndex = videoPlanArr.findIndex((ev)=>{//查询视频id是否在数组中,有的话返回下标,没有则返回-1
			return ev.id == this.id
		}
		if(rIndex == -1){//未找到则把该视频与进度push进数组里
			videoPlanArr.push({
				id:this.id,
				lastDuration:0
			})
			uni.setStorageSync('videoPlanArr',videoPlanArr)
		}else{//找到则获取到储存的进度
			this.lastDuration = videoPlanArr[rIndex].lastDuration
		}
	}else{//未获取到videoPlanArr里的数据
		videoPlanArr = [
			{
				id:this.id,//视频的id
				lastDuration:0,//上次的观看记录
			}
		]
		uni.setStorageSync('videoPlanArr',videoPlanArr) //数据储存到本地
	}
	setTimeout(()=>{
		this.videoContext = uni.createVideoContext('myvideo')
	},100)
},
//播放进度变化时触发
timeupdate(e){
	//e.detail.currentTime是已经播放了多久,e.detail.duration是该视频多长
	let arr = uni.getStorageSync('videoPlanArr')
	let res = arr.findIndex((ev)=>{
		return ev.id == this.id
	})
	arr[res].lastDuration= e.detail.currentTime //更新视频观看进度
	uni.setStorageSync('videoPlanArr',arr)
},
//视频播放完毕
ended(e){
	let arr = uni.getStorageSync('videoPlanArr')
	let res = arr.findIndex((ev)=>{
		return ev.id == this.id
	})
	arr.splice(res,1) //观看完毕删除观看进度记录
	uni.setStorageSync('videoPlanArr',arr)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

记录用户上次看视频的进度,并且从记录的时间继续观看 的相关文章

  • onclick 函数上的 CSS 选择器

    有没有办法让CSS选择器onclick function 您可以在onclick https stackoverflow com questions 24365416 select element which have specific a
  • 使用 Ajax 在输入时提交 Textarea,然后渲染部分内容而不刷新整个页面

    目前我正在尝试通过 JS 和 Ajax 在没有提交按钮的情况下发表评论 并且它有效 问题是当帖子提交时 页面重新加载到 post id comment页面 我希望它呈现部分内容 而不是刷新整个页面或将我带到不同的页面 我对 JS 不熟悉 任
  • 在 HTML5 中使用 JS 创建内联 SVG

    我正在使用本地 HTML5 文件 它有在顶部 我在里面放了这样的东西
  • NodeJs读取JSON文件

    我正在使用 NodeJs 读取 json 文件 我的代码非常基本 var obj require sample json console log obj 0 Sample json 文件包含这样的字符串化 JSON sample good
  • Visual Studio IDE 中功能后的空间

    如何设置 Visual Studio 中的设计以在我的 javascript 函数后面放置一个空格 目前 当我按下返回键时 我得到了这个 var myfunc function 当我想要这个的时候 var myfunc function 知
  • 在 angularjs 模块初始化期间有条件地注入依赖项

    我有一个角度模块 我想有条件地将依赖项注入其中 IE var myapp angular module myapp ngRoute myappcontroller ngGrid I want to include ngGrid only i
  • Chrome 内存/垃圾收集问题

    我在使用 Chrome 时遇到内存 垃圾收集问题 我正在开发一个照片上传网站 该网站允许我的客户使用 HTML5 和文件 API 拖放照片进行上传 因此这在 IE 中不起作用 它仅适用于 Chrome 和 FF 我还没有在 Safari O
  • 如何在下拉列表中选择一个选项

    我正在使用 AngularJS 指令 我需要在模板中设置下拉列表的选定选项
  • Strapi 未加载 Digital Ocean 上托管的现有 MongoDB 中的集合

    我正在使用 Strapi 创建一个新应用程序 并尝试将其与托管在 Digital Ocean 上的 MongoDB 连接 但不幸的是Strapi 无法从现有 MongoDB 获取集合 在这里 我提到我实现 Strapi 与现有 MongoD
  • JavaScript 原型 - 请澄清

    有人可以帮我理解原型属性吗 我不明白原型属性是函数的属性还是函数内部的属性 假设我们创建以下构造函数 Food 此时 函数 Food 具有 Food prototype 属性 由于 Food 是 Object 的实例 因此这意味着 Obec
  • Famo.us 滚动视图高度

    我正在尝试使用著名的顺序布局在滚动视图下方添加图像 但滚动视图的高度有问题 这就是我创建滚动视图的方式 var scrollview new Scrollview direction Utility Direction X options
  • 表单序列化javascript(无框架)

    想知道 javascript 中是否有一个没有 jquery 或任何框架的函数可以让我序列化表单并访问序列化版本 2023 年更新 Use FormData https developer mozilla org en US docs We
  • Promise 构造函数回调的主体何时执行?

    假设我有以下代码构造一个Promise function doSomethingAsynchronous return new Promise resolve gt const result doSomeWork setTimeout gt
  • D3.js - 具有多个环的圆环图

    以下示例显示了 D3 js 中的圆环图 是否可以向图表添加多个圆环 var dataset apples 53245 28479 19697 24037 40245 var width 460 height 300 radius Math
  • 使用 Socket.IO 时如何访问会话标识符?

    我有一个聊天 我需要管理独特的连接 我四处搜寻 但我找到的解决方案似乎都已被弃用 那么 如何使用 Socket IO 获取套接字的会话 ID 我在用着Node js http en wikipedia org wiki Node js Ex
  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞
  • 从未使用 mimeType 初始化的 MediaRecorder 获取 mimeType

    我正在使用 MediaRecorder API 在页面上录制一些媒体 在我的 MediaRecorder 初始化中 我没有指定内容类型 因为我不需要任何特别的内容 浏览器可以选择它想要的 var mediaRecorder new Medi
  • 简单的颜色变化

    我正在创建一个用户界面 用户可以在其中更改页面的颜色值 我想要的是获取分配给其背景颜色的值并将其变亮一定程度 我只是想获得一条亮点线 而不必每次都制作新图像 示例 用户将背景颜色设置为 ECECEC 现在我希望某个元素边框变成 F4F4F4
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • 使用 QtWebEngine 将 C++ 对象暴露给 Qt 中的 Javascript

    使用 QtWebkit 可以通过以下方式将 C 对象公开给 JavascriptQWebFrame addToJavaScriptWindowObject如中所述https stackoverflow com a 20685002 5959

随机推荐

  • 数字锁相环——环路滤波器参数设计

    太难了 好像懂了 又好像没懂 梳理一下 模拟环路滤波器分别有RC积分滤波器 无源比例积分滤波器 有源比例积分滤波器 上图为有源比例积分滤波器 固有频率 n omega n n 和阻尼系数
  • An Introduction to GCC

    对于GCC特别的不熟练 只会google baidu来使用 最近想看看到底gcc如何使用 于是找到了这本书 写的很浅显易懂 而且框架写明白了 真的不错 1 gcc c 是编译的命令 编译与链接是不同的 gcc 不加任何选项时就是编译 链接了
  • VirtualBox安装Ubuntu教程(超详细)

    下载ubuntu系统镜像 准备虚拟机挂载镜像用 选择新建 创建虚拟机 选择系统版本 因为要安装ubuntu 所以选择ubuntu 设置虚拟机ubuntu的内存 创建虚拟机的磁盘 分配20G空间 动态分配是逐渐占用物理机硬盘空间
  • 软件外包公司到底干啥的?要不要去外包公司?

    一 什么是外包 软件外包分为 人力外包和项目外包两个方向 1 劳务派遣 指的是把员工外派到对应的用工企业打 短工 比如很多工程师虽然签约了中软国际 东软 文思海辉 软通动力 润和等软件公司 但实际工作地点是在华为 接受华为员相关负责人的工作
  • Spring系列之缓存使用(@EnableCaching、@Cacheable、@CachePut、@CacheEvict、@Caching、@CacheConfig)

    本文主要详解spring中缓存的使用 背景 缓存大家都有了解过吧 主要用来提升系统查询速度 比如电商中商品详情信息 这些信息通常不会经常变动但是会高频访问 我们可以将这些信息从db中拿出来放在缓存中 比如redis中 本地内存中 当获取的时
  • Idea Maven项目打包工其他项目进行外部引用

    1 说明 我们在日常项目开发中经常会有许多公共的模块 如统一的父工程 工具类模块 中间实体类 DTO VO 如果我们针对每个子项目都单独的创建一套工具类 多个子项目会存在很多重复的工具类 中间实体类代码 因此 我们可以将这些公共模块统一打成
  • 关于STM32串口接收中断中只能接收一个字节()

    最近调试STM32的串口接收时发现例程中只能接收一个字节 例程如下 1 初始化串口1 2 void uart init u32 bound 3 GPIO端口设置 4 GPIO InitTypeDef GPIO InitStructure 5
  • BAPI_ACC_DOCUMENT_POST 简单理解过账BAPI使用,创建会计凭证

    业务场景 创建会计凭证BAPI 甲方是一家从事房屋租赁的公司 它的主营业务就是从各大租户手里收租子 月底了 小明发了工资美滋滋 钱到手没多久房东就催租子了 房租每月100 水电100 税费22 合计222 小明如约在手机APP上向房东支付了
  • Dynamics CRM 2015/2016/365 Web API:批处理任务

    Web API为我们提供的批量任务执行功能 我们可以在一个请求中混合多个不相干的创建查询请求 并且其还提供了事务功能 如果在事务中如果有脚本出现了错误 则其提供回滚功能 如下是批处理的请求报文 在报文里面我们需要设置批处理任务的编号 因为我
  • uniapp各种路由与页面跳转路径

    跳转有长度限制过长的时候用encodeURIComponent pages test test item encodeURIComponent JSON stringify item 1 保留当前B页面 跳转到应用内的某个页面 会计入栈中
  • 【毕业设计】深度学习行人重识别系统 - person reid

    文章目录 0 前言 1 技术背景 2 技术介绍 3 重识别技术实现 3 1 数据集 3 2 Person REID 3 2 1 算法原理 3 2 2 算法流程图 4 实现效果 5 部分代码 6 最后 0 前言 Hi 大家好 这里是丹成学长的
  • css强制换行和禁止换行

    强制换行 word break break all 只对英文起作用 以字母作为换行依据 word wrap break word 只对英文起作用 以单词作为换行依据 white space pre wrap 只对中文起作用 强制换行 禁止换
  • SpringBoot注解+AOP实现

    SpringBoot注解 AOP实现 Java Annotation注解的详解 Java注解是一种元数据 它可以用于在类 方法或其他代码结构中声明关于程序元素的信息和标记 在Java中 注解以 符号开头 在编译时或运行时由Java虚拟机 J
  • TEA、XTEA、XXTEA加密解密算法

    参考 TEA XTEA XXTEA加密解密算法 地址 https blog csdn net gsls200808 article details 48243019 其他相关博文链接 tea系列加密算法学习笔记 TEA和XxTEA跨平台加密
  • 【其他】资源整合

    偶然整理云盘 发现曾经收藏过一些比较不错的资源 正好分享一下 1 C语言教程 郝斌老师作为读书时候的启蒙老师 推荐一波 链接 https pan baidu com s 10NIZ3x4yPP4YP8bYmVENHg 密码 6jj1 2 U
  • Node的Buffer对象和fs模块

    一 Node的模块化管理 1 模块化 node应用程序由模块组成 遵循的是CommonJS模块规范 使用模块管理的好处是隔离模块的作用域 避免出现命名冲突 2 什么是CommonJS 是一套代码的规范 构建一个在浏览器之外的JavaScri
  • C/C++编程:仿函数

    概述 仿函数 也叫做函数对象 就实现意义而言 函数对象 比较贴切 一种具有函数特性的对象 就行为而言 仿函数 更贴切 这种东西可以像函数一样被调用 被调用者则以对象所定义的function call operator扮演函数的实质角色 仿函
  • &2 应用层 - 应用层协议原理

    应用层协议原理 一 网络应用程序体系结构 客户机 服务器 体系结构 纯P2P 体系结构 客户机 服务器与P2P的混合 二 进程通信 客户机和服务器进程 套接字 socket 进程与套接字关系 进程寻址 进程识别信息 两部分 用户代理 use
  • C++中的vector容器 模板类有两个参数

    std vector lt Eigen Matrix3d Eigen aligned allocatorEigen Matrix3d gt vector的声明如下 template
  • 记录用户上次看视频的进度,并且从记录的时间继续观看

    思路 因为视频多个 所以定义一个数组接收该用户已观看但是未观看完毕的字段 videoPlanArr 第一次进入获取本地储存的字段 videoPlanArr 如果没有获取到的话储存该视频id 有的话查询是否在数组中 未找到就把视频id添加进v