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

文章目录

        • 一、效果:
        • 二、实现:


一、效果:

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> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/207868.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Vulnhub 靶场】【Momentum: 2】【简单】【20210628】

1、环境介绍 靶场介绍&#xff1a;https://www.vulnhub.com/entry/momentum-2,702/ 靶场下载&#xff1a;https://download.vulnhub.com/momentum/Momentum2.ova 靶场难度&#xff1a;简单 发布日期&#xff1a;2021年06月28日 文件大小&#xff1a;698 MB 靶场作者&#xff1…

uni-app实现安卓原生态调用身份证阅读器读卡库读身份证和社保卡、银行卡、IC卡等功能

DONSEE系列多功能读写器Android Uniapp API接口规范V1.0.0 本项目Uniapp调用了身份证读卡器的库文件&#xff1a;DonseeDeviceLib-debug.aar&#xff0c;该库放到nativeplugins\donsee-card\android&#xff0c;然后会自动加载。SDK会自动检查是否拥有USB设备权限&#xff0c;…

同旺科技 USB TO RS-485 定制款适配器--- 拆解(三)

内附链接 1、USB TO RS-485 定制款适配器 ● 支持USB 2.0/3.0接口&#xff0c;并兼容USB 1.1接口&#xff1b; ● 支持USB总线供电&#xff1b; ● 支持Windows系统驱动&#xff0c;包含WIN10 / WIN11系统32 / 64位&#xff1b; ● 支持Windows RT、Linux、Mac OS X、Windo…

《洛谷深入浅出进阶篇》p2568 GCD

P2568 GCD - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P2568 大致题意&#xff1a;给定正整数n&#xff0c;求1< x,y<n 且 gcd&#xff08;x&#xff0c;y&#xff09;为素数的数对&#xff08;x&#xff0c;y&#xff09;有多少对。…

一文搞懂全连接算法和它的作用

如果你是搞AI算法的同学&#xff0c;相信你在很多地方都见过全连接层。 无论是处理图片的卷积神经网络&#xff08;CNN&#xff09;&#xff0c;还是处理文本的自然语言处理&#xff08;NLP&#xff09;网络&#xff0c;在网络的结尾做分类的时候&#xff0c;总是会出现一个全…

国外小哥综合传统CGI和AI技术制作出融合Lofi音乐与人工智能动画作品

这个视频制作花费了18个小时&#xff0c;渲染则耗费了4个小时&#xff0c;使用了Midjourney、PS GenFill、After Effects和Magnific AI等工具。 国外小哥综合传统CGI和AI技术制作出融合Lofi音乐与人工智能动画作品 大致制作流程&#xff1a; Midjourney出图&#xff0c;PS Gen…

带大家做一个,易上手的家常辣子鸡

先从冰箱拿出鸡肉解冻 拿小半根葱 去掉最外面一层皮 切成小段 最备好 花椒 干辣椒 准备四五个大料 起锅烧油 这道菜需要放其他菜两到三倍的油 油温上来之后 放入干辣椒和花椒进行翻炒 等它们都烧黑之后捞出来 这样 辣味就留在油里面了 然后 倒入鸡肉 葱段 大料 然后 倒…

Qt内存管理、UI编辑器、客制化组件、弹出对话框、常用部件类

头文件的小技巧 #include <QtWidgets> // 在自动生成的 .h 里面加上此句 适用条件&#xff1a; QT 的内存管理 当父窗体被关闭时&#xff0c;子部件的内存会自动释放。 对象树是一种管理对象生命周期的机制。当一个对象被添加到另一个对象的子对象列表中时&#xff0…

docker:部署java Springboot项目

文章目录 1、打 jar 包1、创建Dockerfile3、创建镜像4、启动容器其他注意事项docker中jdk的版本命名举例&#xff1a;openjdk:11-ea-17-jre-slim举例&#xff1a;8u312-jre-nanoserver-1809 通过find找文件 1、打 jar 包 将项目打一个 jar 包&#xff0c;可以使用 IDEA 1、…

2.6 A 的 LU 分解

一、A LU 线性代数很多关键的概念实际上就是矩阵的分解&#xff08;factorization&#xff09;。原始矩阵 A A A 变成两个或三个特殊矩阵的乘积。第一个分解&#xff0c;实际上也是最重要的分解&#xff0c;来自消元法。因子 L L L 和 U U U 都是三角形矩阵&#xff0c;分…

发布“最强”AI大模型,股价大涨,吊打GPT4的谷歌股票值得投资吗?

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 谷歌在AI领域的最新进展&#xff0c;引发投资者关注 在谷歌-C(GOOGL)谷歌-A&#xff08;GOOG&#xff09;昨日发布了最新的AI大模型Gemini后&#xff0c;其股价就出现了大幅上涨&#xff0c;更是引发了投资者的密切关注&a…

Docker-compose容器编排与容器监控

一、Docker-compose 1、概念&#xff1a; Docker-Compose 是 Docker 官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。 2、作用&#xff1a; Docker-Compose可以管理多个Docker容器组成一个应用。需要定义一个yaml格式的配置文件 docker-compose.yml&#…

Fiddler抓包模拟器(雷电模拟器)

Fiddler设置 List item 打开fiddler,的options 点击OK,重启fiddler 模拟器 更改网络设置 IP可以在电脑上终端上查看 然后在模拟器浏览器中输入IP:端口 安装证书

K8s 入门指南(一):单节点集群环境搭建

前言 官方文档&#xff1a;Kubernetes 文档 | Kubernetes 系统配置 CentOS 7.9&#xff08;2 核 2 G&#xff09; 本文为 k8s 入门指南专栏&#xff0c;将会使用 kubeadm 搭建单节点 k8s 集群&#xff0c;详细讲解环境搭建部署的细节&#xff0c;专栏后面章节会以实战代码介绍…

Vue3+ts----根据配置项,动态生成表单

这里使用的UI框架是ElementPlus&#xff0c;更换其他组件直接更换constant.ts中的type配置和对应的Form组件即可. 大家可以npm install elementplus_dy_form来体验。 思路&#xff1a; 1.这里需要使用h函数方便控制要渲染的表单 2.传递type作为组件或html元素进行渲染&#xff…

PHP基础 - 输入输出

在 PHP 中,有多种方法可以用来输出内容。下面是其中的几种: 1、echo: 这是最常见的输出语句之一,可以输出一个或多个字符串。它是一个语言结构,可以省略括号。使用示例如下: <?php // 使用 echo 语句输出一个字符串 echo "Hello, world!\n";// 可以使用…

P1035 [NOIP2002 普及组] 级数求和题解

题目 已知&#xff1a;.显然对于任意一个整数 k&#xff0c;当 n 足够大的时候,Sn​>k。 现给出一个整数k&#xff0c;要求计算出一个最小的n&#xff0c;使得Sn​>k。 输入输出样例 输入 1 输出 2 代码 #include<iostream> using namespace std; int mai…

周周爱学习之Redis重点总结

redis重点总结 在正常的业务流程中&#xff0c;用户发送请求&#xff0c;然后到缓存中查询数据。如果缓存中不存在数据的话&#xff0c;就会去数据库查询数据。数据库中有的话&#xff0c;就会更新缓存然后返回数据&#xff0c;数据库中也没有的话就会给用户返回一个空。 1.缓…

AIGC创作系统ChatGPT网站源码,Midjourney绘画,GPT联网提问/即将支持TSS语音对话功能

一、AI创作系统 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI…

leetcode 面试题 02.02. 返回倒数第k个节点

提建议就是&#xff0c;有些题还是有联系的&#xff0c;建议就收看完 876.链表的中间节点&#xff08;http://t.csdnimg.cn/7axLa&#xff09;&#xff0c;再将这一题联系起来 面试题 02.02. 返回倒数第k个节点 题目&#xff1a; 实现一种算法&#xff0c;找出单向链表中倒数第…