【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内部数据移动。 它…...
Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数，对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
连锁超市冷库节能解决方案：如何实现超市降本增效
在连锁超市冷库运营中，高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术，实现年省电费15%-60%，且不改动原有装备、安装快捷、…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务： test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制
在数字化浪潮席卷全球的今天，数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具，在大规模数据获取中发挥着关键作用。然而，传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时，常出现数据质…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了，要么要会员、要么写的乱七八糟。这里我整理一下，把问题说清楚并且给出代码，拿去用就行，照着葫芦画瓢。 问题 在继承QWebEngineView后，重写mousePressEvent或event函数无法捕获鼠标按下事…...
CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...