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

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

news 文章来源：https://blog.csdn.net/weixin_53791978/article/details/135323085 2024/10/27 22:28:13

文章目录

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

一、效果：

二、实现：

<!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…...

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

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

问题现象包如下： 之前在centos上使用openssl部署证书服务器以及颁发证书的时候遇到的问题，在进行个人证书生成之后需要形成pfx格式证书，结果过程中报错了。网上类似资料比较少，做个记录。生成pfx格式证书的命令： 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

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

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

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

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

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

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

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

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

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

机器人相关知识

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

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

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

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

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

SQL Server 权限管理

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

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

ReentrantLock底层原理学习一

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

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

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

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

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

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

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

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

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

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

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

Kotlin： Jetpack — ViewModel简单应用

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

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

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

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

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

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

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

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

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/…...

编程日记 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， 直接存储访问。同SPI,IIC,USART等一样，属于MCU的一个外设，用于在不需要MCU介入的情况下进行数据传输。可以将数据从外设传输到flash，也可以将数据从flash传输到外设，或者flash内部数据移动。它…...

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

移动通信原理与关键技术学习（第四代蜂窝移动通信系统）

前言：LTE 标准于2008 年底完成了第一个版本3GPP Release 8的制定工作。另一方面，ITU 于2007 年召开了世界无线电会议WRC07，开始了B3G 频谱的分配，并于2008 年完成了IMT-2000（即3G）系统的演进——IMT-Advanc…...

编程日记 2024/1/7 5:40:04

光明源@智慧厕所技术:优化生活，提升卫生舒适度

在当今数字科技飞速发展的时代，我们的日常生活正在经历一场革命，而这场革命的其中一个前沿领域就是智慧厕所技术。这项技术不仅仅是对传统卫生间的一次升级，更是对我们生活品质的全方位提升。从智能感应到数据分析，从环保设计到舒…...

编程日记 2024/1/7 5:39:03

【Bootstrap学习 day13】

Bootstrap5 下拉菜单下拉菜单通常用于导航标题内，在用户鼠标悬停或单击触发元素时显示相关链接列表。基础的下拉列表 <div class"dropdown"><button type"button" class"btn btn-primary dropdown-toggle" data-bs-toggl…...

编程日记 2024/1/7 5:28:54

Shell：常用命令之dirname与basename

一、介绍 1、dirname命令用于去除文件名中的非目录部分，删除最后一个“\”后面的路径，显示父目录。语法：dirname [选项] 参数 2、basename命令用于打印目录或者文件的基本名称，显示最后的目录名或文件名。语法：basen…...

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

Linux-v4l2框架

框架图从上图不难看出，v4l2_device作为顶层管理者，一方面通过嵌入到一个video_device中，暴露video设备节点给用户空间进行控制；另一方面，video_device内部会创建一个media_entity作为在media controller中的抽象体&a…...

编程日记 2024/1/7 5:22:49

VPC网络架构下的网络上数据采集

介绍想象这样一个场景，一开始在公司里，所有的部门的物理机、POD都在一个经典网络内，它们可以通过 IP 访问彼此，没有任何限制。因此有很多系统基于此设计了很多点对点 IP 直连的访问，比如中心控制服务器 S 会主动访问物…...

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

模拟算法（模拟算法 == 依葫芦画瓢）万字

模拟算法基本思想引入算法题替换所有的问号提莫攻击Z字形变换外观数列数青蛙基本思想模拟算法依葫芦画瓢解题思维要么通俗易懂，要么就是找规律，主要难度在于将思路转换为代码。特点：相对于其他算法思维，思路比较简单&#x…...

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

QtApplets-SystemInfo

QtApplets-SystemInfo 今天是2024年1月3日09:18:44，这也是2024年的第一篇博客，今天我们主要两件事，第一件，获取系统CPU使用率，第二件，获取系统内存使用情况。这里因为写博客的这个本本的环境配置不…...

编程日记 2024/1/7 5:14:42

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

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

Hive学习（13）lag和lead函数取偏移量

hive里面lag函数在数据处理和分析中，窗口函数是一种重要的技术，用于在数据集中执行聚合和分析操作。Hive作为一种大数据处理框架，也提供了窗口函数的支持。在Hive中，Lag函数是一种常用的窗口函数，可以用于计算前一行…...

编程日记 2024/1/7 5:10:37

做网站需要用到什么/今天的新闻联播

编程日记 2024/10/27 12:34:36

如何构建自己的网站/最新战争新闻事件今天

一：概述 PC机自从诞生以来，硬件经历了无数变化，CPU从最初的INTEL 8086到现在PIII满大街都是也只不过十几年。微软的WINDOWS操作系统从最初的1.0版本到现在即将推出WIN2000，一直是桌面系统上装机量最大的OS。作为软件开发人员&am…...

编程日记 2024/10/27 8:43:08

网站死了怎么办/点击器原理

故障背景： 克隆完虚拟机后，连不上网，ifconfig查看后，发现网卡eth0没有启动，于是ifconfig eth0 up 启动eth0网卡，结果启动不了，进入/etc/sysconfig/network-scripts/ifcfg-eth0查看后&#xff0c…...

编程日记 2024/10/27 8:39:06

移动网站建设的前景/什么平台可以免费发广告

先记录要学的东西，有空把这部分内容补上参考： http://www.cnblogs.com/luyubin/archive/2009/03/18/1415249.html http://topic.csdn.net/u/20080527/09/822fafb1-1477-4598-a1bb-cf1096261417.html 本文转自xwdreamer博客园博客，原文链接&a…...

编程日记 2024/10/27 6:25:55

新手怎么开婚庆公司/长沙官网优化公司

删除MySQL数据库中表数据后，一般是不会自动释放表空间的，需要执行命令手动释放。经过研究，最佳释放表空间命令为： ALTER TABLE 表名 ENGINE InnoDB; 这个方法，既可以释放MyISAM，也可以释放InnoDB。另外…...

编程日记 2024/10/27 6:03:23

网站建设实训计划书/windows优化大师卸载不掉

摘要：以“数字金融新原力(The New Force of Digital Finance)”为主题，蚂蚁金服ATEC城市峰会于2019年1月4日在上海如期举办。在ATEC区块链行业研讨会分论坛上，蚂蚁金服资深总监、BaaS业务负责人李杰力做了主题为《蚂蚁区块链BaaS，…...

编程日记 2024/10/27 3:56:35

文章目录

一、效果：

二、实现：

三、案例：

相关文章：