当前位置： 首页 > news >正文

【js】js实现多个视频连续播放：

news 2026/2/8 13:12:46

文章目录

        • 一、效果：
        • 二、实现：
        • 三、案例：

一、效果：

image.png

二、实现：
<!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>
三、案例：

image.png
image.png
image.png
image.png
image.png
image.png

相关文章：

【js】js实现多个视频连续播放：

文章目录 一、效果&#xff1a;二、实现&#xff1a;三、案例&#xff1a; 一、效果&#xff1a; 二、实现&#xff1a; <!DOCTYPE html> <html> <head><title>Video Player</title><style>#progressBar { width: 800px;height: 20px;b…...

编程日记 2024/1/7 6:32:51

使用openssl 生成pfx格式证书时报错：unable to load certificates

问题现象包如下&#xff1a; 之前在centos上使用openssl部署证书服务器以及颁发证书的时候遇到的问题&#xff0c;在进行个人证书生成之后需要形成pfx格式证书&#xff0c;结果过程中报错了。网上类似资料比较少&#xff0c;做个记录。 生成pfx格式证书的命令&#xff1a; o…...

编程日记 2024/1/7 6:30:49

微信小程序 分享按钮 监听用户分享成功

代码 <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.…...

编程日记 2024/1/7 6:29:48

数据结构-怀化学院期末题

题目&#xff1a; 利用希尔排序算法实现线性表的排序。希尔排序是根据给定的增量序列将线性表分隔成某个“增量”的记录组成一个子序例&#xff0c;在子序列中采用直接插入排序完成。 输入 第一行为元素个数n(1<n<1000)&#xff0c;第二行为n个元素值(整数)&#xff0c;即…...

编程日记 2024/1/7 6:28:47

跟cherno手搓游戏引擎【1】：配置与入口点

环境配置&#xff1a; 编译环境&#xff1a;VS2019 创建两个项目&#xff1a; 设置Sandbox为启动项&#xff1a; 设置sandbox的配置属性-常规-输出目录\中间目录为如下&#xff1a; 预处理定义&#xff1a;为了配置一些只有windows才能用的函数。 设置YOTOEngin&#xff08;我…...

编程日记 2024/1/7 6:25:45

25计算机专业考研经验贴之准备篇

Hello各位小伙伴&#xff0c;大家新年好&#xff01; 马上就要进入寒假假期了&#xff0c;25考研也该提上日程了。今天先跟大家分享一下大家在假期可以先做起来的准备工作。 【选择学校】 择校是个非常重要的内容&#xff0c;因为不同学校的考试内容是不一样的&#xff0c;有些…...

编程日记 2024/1/7 6:24:44

机器人相关知识

机器人学&#xff08;Robotics) 一些基础概念 位姿 位姿位置姿态 位姿的表示 刚体 刚性物体是一组粒子的集合&#xff0c;其中任意两个粒子之间的距离保持固定&#xff0c;不受物体运动或施加在物体上的力的影响。 “完全不可变形”的物体就是刚体。 刚体位置 刚性连杆 …...

编程日记 2024/1/7 6:20:41

八股文打卡day22——操作系统（5）

面试题&#xff1a;什么是死锁&#xff1f;如何避免死锁&#xff1f; 我的回答&#xff1a; 死锁是两个或者多个进程都占有各自的资源&#xff0c;然后都互相请求资源&#xff0c;导致互相都陷入了阻塞状态。 如何避免死锁呢&#xff1f; 首先&#xff0c;造成死锁有四个必要…...

编程日记 2024/1/7 6:17:38

SQL Server 权限管理

CSDN 成就一亿技术人&#xff01; 2024年 第一篇 难度指数&#xff1a;* * CSDN 成就一亿技术人&#xff01; 目录 1. 权限管理 什么是权限管理&#xff1f; SQL server的安全机制 服务器级角色 数据库级角色 对象级角色 2. 创建用户 赋予权限 最重要的一步骤 1. 权限…...

编程日记 2024/1/7 6:09:29

ReentrantLock底层原理学习一

J.U.C 简介 Java.util.concurrent 是在并发编程中比较常用的工具类&#xff0c;里面包含很多用来在并发场景中使用的组件。比如线程池、阻塞队列、计时器、同步器、并发集合等等。并发包的作者是大名鼎鼎的 Doug Lea。我们在接下来的课程中&#xff0c;回去剖析一些经典的比较…...

编程日记 2024/1/7 6:08:28

数字孪生在增强现实（AR）中的应用

数字孪生在增强现实&#xff08;Augmented Reality&#xff0c;AR&#xff09;中的应用可以提供更丰富、交互性更强的现实世界增强体验。以下是数字孪生在AR中的一些应用&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff…...

编程日记 2024/1/7 6:06:26

【数据仓库与联机分析处理】多维数据模型

目录 一、数据立方体 二、数据模型 &#xff08;一&#xff09;星形模型 &#xff08;二&#xff09;雪花模式 &#xff08;三&#xff09;事实星座模式 三、多维数据模型中的OLAP操作 &#xff08;一&#xff09;下钻 &#xff08;二&#xff09;上卷 &#xff08;三…...

编程日记 2024/1/7 6:01:22

【网络面试（3）】浏览器委托协议栈完成消息的收发

前面的博客中&#xff0c;提到过很多次&#xff0c;浏览器作为应用程序&#xff0c;本身是不具备向网络中发送网络请求的能力&#xff0c;要委托操作系统的内核协议栈来完成。协议栈再调用网卡驱动&#xff0c;通过网卡将请求消息发送出去&#xff0c;本篇博客就来探讨一下这个…...

编程日记 2024/1/7 6:00:21

Kotlin： Jetpack — ViewModel简单应用

ViewModel 概览 Android Jetpack 的一部分。 ViewModel 类是一种业务逻辑或屏幕级状态容器。它用于将状态公开给界面&#xff0c;以及封装相关的业务逻辑。 它的主要优点是&#xff0c;它可以缓存状态&#xff0c;并可在配置更改后持久保留相应状态。这意味着在 activity 之…...

编程日记 2024/1/7 5:59:20

【Java技术专题】「攻破技术盲区」攻破Java技术盲点之unsafe类的使用指南（打破Java的安全管控— sun.misc.unsafe）

Java后门机制 — sun.misc.unsafe 打破Java的安全管控关于Unsafe的编程建议实例化Unsafe后门对象使用sun.misc.Unsafe创建实例单例模式处理实现浅克隆&#xff08;直接获取内存的方式&#xff09;直接使用copyMemory原理分析 密码安全使用Unsafe类—示例代码 运行时动态创建类超…...

编程日记 2024/1/7 5:56:17

私有云平台搭建openstack和ceph结合搭建手册

OpenStack与云计算 什么是云&#xff1f; 如何正确理解云&#xff0c;可以从以下几个方面。 云的构成。 用户&#xff1a;对用户而言是透明无感知的&#xff0c;不用关心底层构成&#xff0c;只需要知道利用云完成自己任务即可。 云提供商&#xff1a;对云资产管理和运维。 云…...

编程日记 2024/1/7 5:53:13

debug mccl 02 —— 环境搭建及初步调试

1, 搭建nccl 调试环境 下载 nccl 源代码 git clone --recursive https://github.com/NVIDIA/nccl.git 只debug host代码&#xff0c;故将设备代码的编译标志改成 -O3 (base) hipperhipper-G21:~/let_debug_nccl/nccl$ git diff diff --git a/makefiles/common.mk b/makefiles/…...

编程日记 2024/1/7 5:52:13

ros python 接收GPS RTK 串口消息再转发 ros 主题消息

代码是一个ROS（Robot Operating System）节点，用于从GPS设备读取RTK（实时动态）数据并通过ROS主题发布。 步骤： 导入必要的模块: rospy 是ROS的Python库，用于ROS的节点、发布者和订阅者。serial 用于串行通信。NavSatFix 和 NavSatStatus 是从GPS接收的NMEA 0183标准消息…...

编程日记 2024/1/7 5:51:12

2024年网络安全竞赛-页面信息发现任务解析

页面信息发现任务说明： 服务器场景：win20230305（关闭链接）在渗透机中对服务器信息收集，将获取到的服务器网站端口作为Flag值提交；访问服务器网站页面，找到主页面中的Flag值信息，将Flag值提交；访问服务器网站页面，找到主页面中的脚本信息，并将Flag值提交；访问服务器…...

编程日记 2024/1/7 5:48:09

ARM DMA使用整理

Direct Memory Access&#xff0c; 直接存储访问。同SPI,IIC,USART等一样&#xff0c;属于MCU的一个外设&#xff0c;用于在不需要MCU介入的情况下进行数据传输。可以将数据从外设传输到flash&#xff0c;也可以将数据从flash传输到外设&#xff0c;或者flash内部数据移动。 它…...

编程日记 2024/1/7 5:43:06

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2026/2/1 5:45:17

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

C++11 constexpr和字面类型：从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...

编程新知 2026/1/26 22:17:09

深入浅出JavaScript中的ArrayBuffer：二进制数据的“瑞士军刀”

深入浅出JavaScript中的ArrayBuffer&#xff1a;二进制数据的“瑞士军刀” 在JavaScript中&#xff0c;我们经常需要处理文本、数组、对象等数据类型。但当我们需要处理文件上传、图像处理、网络通信等场景时&#xff0c;单纯依赖字符串或数组就显得力不从心了。这时&#xff…...

编程新知 2025/11/12 20:44:21

Python打卡训练营学习记录Day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2025/12/6 13:48:38