【js】js实现多个视频连续播放：
文章目录
- 一、效果：
- 二、实现：
- 三、案例：
一、效果：
二、实现：
<!DOCTYPE html>
<html>
<head><title>Video Player</title><style>#progressBar { width: 800px;height: 20px;background-color: #ddd;}#progress {height: 20px;background-color: #abc;}#videoContainer {position: relative;width: 800px; height: 450px; /* adjust as needed */}#videoContainer video {position: absolute;width: 100%;height: 100%;}</style>
</head>
<body><div id="videoContainer"></div><button id="playButton">播放</button><button id="pauseButton">暂停</button><div id="progressBar"><div id="progress"></div></div><div>Total duration: <span id="totalDuration">0</span> seconds</div><div>Current time: <span id="currentTime">0</span> seconds</div><script>var videoContainer = document.getElementById('videoContainer');var videoSources = ["f1.mp4", "f2.mp4", "f3.mp4", "f4.mp4"];var totalDuration = 0;var totalCurrentTime = 0;var currentVideo = 0;var videoElements = videoSources.map(function (src, i) {var video = document.createElement('video');video.src = src;video.addEventListener('loadedmetadata', function () {if (i < videoSources.length - 1) {videoElements[i + 1].load();}});video.addEventListener('play', function () {totalDuration = videoElements.reduce(function (sum, video) {return sum + (video.duration || 0);}, 0); document.getElementById('totalDuration').textContent = totalDuration;totalCurrentTime = videoElements.slice(0, i).reduce(function (sum, video) {return sum + (video.duration || 0);}, 0);document.getElementById('currentTime').textContent = totalCurrentTime;});if (i > 0) {video.style.display = 'none';}videoContainer.appendChild(video);return video;});videoElements[0].load();videoElements.forEach(function (videoElement, i) {videoElement.addEventListener('timeupdate', function () {totalCurrentTime = videoElement.currentTime;for (var j = 0; j < i; j++) {totalCurrentTime += videoElements[j].duration;}document.getElementById('currentTime').textContent = totalCurrentTime;var progress = totalCurrentTime / totalDuration * 100;document.getElementById('progress').style.width = progress + '%';}, false);videoElement.addEventListener('ended', function () {currentVideo++;if (currentVideo < videoSources.length) {videoElements[currentVideo].play();videoElement.style.display = 'none';videoElements[currentVideo].style.display = 'block';}}, false);});document.getElementById('playButton').addEventListener('click', function () {videoElements[currentVideo].play();}, false);document.getElementById('pauseButton').addEventListener('click', function () {videoElements[currentVideo].pause();}, false);</script>
</body>
</html>
三、案例：
相关文章：
【js】js实现多个视频连续播放：
文章目录 一、效果：二、实现：三、案例： 一、效果： 二、实现： <!DOCTYPE html> <html> <head><title>Video Player</title><style>#progressBar { width: 800px;height: 20px;b…...
使用openssl 生成pfx格式证书时报错：unable to load certificates
问题现象包如下： 之前在centos上使用openssl部署证书服务器以及颁发证书的时候遇到的问题，在进行个人证书生成之后需要形成pfx格式证书，结果过程中报错了。网上类似资料比较少，做个记录。 生成pfx格式证书的命令： o…...
微信小程序 分享按钮 监听用户分享成功
代码 <view><button class"btnLq ed flex justify-center" open-type"share" click"getAward">点击分享</button> </view>export default {data(){return{shareMd:false,//分享埋点}},onShow(){//if(this.shareMd){uni.…...
数据结构-怀化学院期末题
题目： 利用希尔排序算法实现线性表的排序。希尔排序是根据给定的增量序列将线性表分隔成某个“增量”的记录组成一个子序例，在子序列中采用直接插入排序完成。 输入 第一行为元素个数n(1<n<1000)，第二行为n个元素值(整数)，即…...
跟cherno手搓游戏引擎【1】：配置与入口点
环境配置： 编译环境：VS2019 创建两个项目： 设置Sandbox为启动项： 设置sandbox的配置属性-常规-输出目录\中间目录为如下： 预处理定义：为了配置一些只有windows才能用的函数。 设置YOTOEngin（我…...
25计算机专业考研经验贴之准备篇
Hello各位小伙伴，大家新年好！ 马上就要进入寒假假期了，25考研也该提上日程了。今天先跟大家分享一下大家在假期可以先做起来的准备工作。 【选择学校】 择校是个非常重要的内容，因为不同学校的考试内容是不一样的，有些…...
机器人相关知识
机器人学（Robotics) 一些基础概念 位姿 位姿位置姿态 位姿的表示 刚体 刚性物体是一组粒子的集合，其中任意两个粒子之间的距离保持固定，不受物体运动或施加在物体上的力的影响。 “完全不可变形”的物体就是刚体。 刚体位置 刚性连杆 …...
八股文打卡day22——操作系统（5）
面试题：什么是死锁？如何避免死锁？ 我的回答： 死锁是两个或者多个进程都占有各自的资源，然后都互相请求资源，导致互相都陷入了阻塞状态。 如何避免死锁呢？ 首先，造成死锁有四个必要…...
SQL Server 权限管理
CSDN 成就一亿技术人！ 2024年 第一篇 难度指数：* * CSDN 成就一亿技术人！ 目录 1. 权限管理 什么是权限管理？ SQL server的安全机制 服务器级角色 数据库级角色 对象级角色 2. 创建用户 赋予权限 最重要的一步骤 1. 权限…...
ReentrantLock底层原理学习一
J.U.C 简介 Java.util.concurrent 是在并发编程中比较常用的工具类，里面包含很多用来在并发场景中使用的组件。比如线程池、阻塞队列、计时器、同步器、并发集合等等。并发包的作者是大名鼎鼎的 Doug Lea。我们在接下来的课程中，回去剖析一些经典的比较…...
数字孪生在增强现实（AR）中的应用
数字孪生在增强现实（Augmented Reality，AR）中的应用可以提供更丰富、交互性更强的现实世界增强体验。以下是数字孪生在AR中的一些应用，希望对大家有所帮助。北京木奇移动技术有限公司，专业的软件外包开发公司ÿ…...
【数据仓库与联机分析处理】多维数据模型
目录 一、数据立方体 二、数据模型 （一）星形模型 （二）雪花模式 （三）事实星座模式 三、多维数据模型中的OLAP操作 （一）下钻 （二）上卷 （三…...
【网络面试（3）】浏览器委托协议栈完成消息的收发
前面的博客中，提到过很多次，浏览器作为应用程序，本身是不具备向网络中发送网络请求的能力，要委托操作系统的内核协议栈来完成。协议栈再调用网卡驱动，通过网卡将请求消息发送出去，本篇博客就来探讨一下这个…...
Kotlin： Jetpack — ViewModel简单应用
ViewModel 概览 Android Jetpack 的一部分。 ViewModel 类是一种业务逻辑或屏幕级状态容器。它用于将状态公开给界面，以及封装相关的业务逻辑。 它的主要优点是，它可以缓存状态，并可在配置更改后持久保留相应状态。这意味着在 activity 之…...
【Java技术专题】「攻破技术盲区」攻破Java技术盲点之unsafe类的使用指南（打破Java的安全管控— sun.misc.unsafe）
Java后门机制 — sun.misc.unsafe 打破Java的安全管控关于Unsafe的编程建议实例化Unsafe后门对象使用sun.misc.Unsafe创建实例单例模式处理实现浅克隆（直接获取内存的方式）直接使用copyMemory原理分析 密码安全使用Unsafe类—示例代码 运行时动态创建类超…...
私有云平台搭建openstack和ceph结合搭建手册
OpenStack与云计算 什么是云？ 如何正确理解云，可以从以下几个方面。 云的构成。 用户：对用户而言是透明无感知的，不用关心底层构成，只需要知道利用云完成自己任务即可。 云提供商：对云资产管理和运维。 云…...
debug mccl 02 —— 环境搭建及初步调试
1, 搭建nccl 调试环境 下载 nccl 源代码 git clone --recursive https://github.com/NVIDIA/nccl.git 只debug host代码，故将设备代码的编译标志改成 -O3 (base) hipperhipper-G21:~/let_debug_nccl/nccl$ git diff diff --git a/makefiles/common.mk b/makefiles/…...
ros python 接收GPS RTK 串口消息再转发 ros 主题消息
代码是一个ROS（Robot Operating System）节点，用于从GPS设备读取RTK（实时动态）数据并通过ROS主题发布。 步骤： 导入必要的模块: rospy 是ROS的Python库，用于ROS的节点、发布者和订阅者。serial 用于串行通信。NavSatFix 和 NavSatStatus 是从GPS接收的NMEA 0183标准消息…...
2024年网络安全竞赛-页面信息发现任务解析
页面信息发现任务说明： 服务器场景：win20230305（关闭链接）在渗透机中对服务器信息收集，将获取到的服务器网站端口作为Flag值提交；访问服务器网站页面，找到主页面中的Flag值信息，将Flag值提交；访问服务器网站页面，找到主页面中的脚本信息，并将Flag值提交；访问服务器…...
ARM DMA使用整理
Direct Memory Access， 直接存储访问。同SPI,IIC,USART等一样，属于MCU的一个外设，用于在不需要MCU介入的情况下进行数据传输。可以将数据从外设传输到flash，也可以将数据从flash传输到外设，或者flash内部数据移动。 它…...
移动通信原理与关键技术学习（第四代蜂窝移动通信系统）
前言：LTE 标准于2008 年底完成了第一个版本3GPP Release 8的制定工作。另一方面，ITU 于2007 年召开了世界无线电会议WRC07，开始了B3G 频谱的分配，并于2008 年完成了IMT-2000（即3G）系统的演进——IMT-Advanc…...
光明源@智慧厕所技术:优化生活，提升卫生舒适度
在当今数字科技飞速发展的时代，我们的日常生活正在经历一场革命，而这场革命的其中一个前沿领域就是智慧厕所技术。这项技术不仅仅是对传统卫生间的一次升级，更是对我们生活品质的全方位提升。从智能感应到数据分析，从环保设计到舒…...
【Bootstrap学习 day13】
Bootstrap5 下拉菜单 下拉菜单通常用于导航标题内，在用户鼠标悬停或单击触发元素时显示相关链接列表。 基础的下拉列表 <div class"dropdown"><button type"button" class"btn btn-primary dropdown-toggle" data-bs-toggl…...
Shell：常用命令之dirname与basename
一、介绍 1、dirname命令用于去除文件名中的非目录部分，删除最后一个“\”后面的路径，显示父目录。 语法：dirname [选项] 参数 2、basename命令用于打印目录或者文件的基本名称，显示最后的目录名或文件名。 语法：basen…...
Linux-v4l2框架
框架图 从上图不难看出，v4l2_device作为顶层管理者，一方面通过嵌入到一个video_device中，暴露video设备节点给用户空间进行控制；另一方面，video_device内部会创建一个media_entity作为在media controller中的抽象体&a…...
VPC网络架构下的网络上数据采集
介绍 想象这样一个场景，一开始在公司里，所有的部门的物理机、POD都在一个经典网络内，它们可以通过 IP 访问彼此，没有任何限制。因此有很多系统基于此设计了很多点对点 IP 直连的访问，比如中心控制服务器 S 会主动访问物…...
模拟算法（模拟算法 == 依葫芦画瓢）万字
模拟算法 基本思想引入算法题替换所有的问号提莫攻击Z字形变换外观数列数青蛙 基本思想 模拟算法 依葫芦画瓢解题思维要么通俗易懂，要么就是找规律，主要难度在于将思路转换为代码。 特点：相对于其他算法思维，思路比较简单&#x…...
QtApplets-SystemInfo
QtApplets-SystemInfo 今天是2024年1月3日09:18:44，这也是2024年的第一篇博客，今天我们主要两件事，第一件，获取系统CPU使用率，第二件，获取系统内存使用情况。 这里因为写博客的这个本本的环境配置不…...
vue3防抖函数封装与使用，以指令的形式使用
utils/debounce.js /*** 防抖函数* param {*} fn 函数* param {*} delay 暂停时间* returns */ export function debounce(fn, delay 500) {let timer nullreturn function (...args) {// console.log(arguments);// const args Array.from(arguments)if (timer) {clearTim…...
Hive学习（13）lag和lead函数取偏移量
hive里面lag函数 在数据处理和分析中，窗口函数是一种重要的技术，用于在数据集中执行聚合和分析操作。Hive作为一种大数据处理框架，也提供了窗口函数的支持。在Hive中，Lag函数是一种常用的窗口函数，可以用于计算前一行…...
企业信息管理系统案例/百度seo在线优化
一、前言 上一篇文章中粗浅的介绍使用Redis和基于令牌桶算法进行对服务接口API限流，本文介绍另一种算法---漏桶算法的应用。Nginx想必大家都有所了解是一…...
富阳网站建设推广/安徽网站seo公司
最近遇到个问题真是见了鬼了，按理说在eclipse中修改jsp或者html代码，无需重启，只要刷新一下页面就好了，它就会变化了，以前也都没出过问题，目前在学ssm框架，就集成了spring的环境，不知…...
看视频的软件哪个最好免费/洛阳网站建设优化
从下面的两张图可以看出，打印页面上的元素与打印预览上的元素产生的偏移。可以看出，产生偏移的元素都是绝对定位的，并且指定了left.解决办法：将left改成right就可以了。改成right有后遗证，计算left相对而言比较简单&am…...
把网站传到服务器上怎么做/浙江网站推广公司
您可以使用以下方式获得仅观看一个类别的用户：select user_id, min(category) as category, sum(view_hour)from kcp_01group by user_idhaving min(category) max(category);请注意 min(category) 是类别，因为只有一个类别 .在Hive中，您可能…...
中山做网站/搜索引擎bing
题意概述： 有n(n<10)组图形（长方形、圆形、三角形），再有有限多个点，我们需要判断点在不在各个图形中。图形和点都需要输入。图形的输入以r\c\t开始分别表示长方形、圆形、三角形。长方形的输入包括r和左上与右下两个…...
广州网站开发公司/企业推广的网站
技术活，该赏 关注一键三连（点赞，评论，收藏）再看，养成好习惯 RocketMQ使用教程相关系列 目录 目录 第一节：介绍 顺序消息含义介绍 原理解析 第二节：顺序消息-生产者和消息者步骤…...