JS 实现在指定的时间点播放列表中的视频
为了实现在指定的时间点播放列表中的视频，你可以使用JavaScript中的setTimeout或setInterval结合HTML5的<video>元素。但是，由于你需要处理多个时间点，并且每个时间点播放不同的视频，使用setTimeout会更直接一些，因为你可以为每个时间点设置一个独立的定时器。 以下是一个基本的实现思路： 定义一个视频列表，包含视频URL和播放时间点。
遍历这个列表，为每个时间点设置setTimeout。
当定时器触发时，检查当前页面上是否有正在播放的视频，如果有，则先暂停或停止它。
加载并播放指定时间点的视频。
这里是一个简单的示例代码： html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scheduled Video Player</title>
</head>
<body>
<video id="videoPlayer" width="320" height="240" controls></video> <script>
// 视频列表，包含URL和播放时间点（秒）
const videoSchedule = [
{ url: 'video1.mp4', time: 5 },
{ url: 'video2.mp4', time: 15 },
{ url: 'video3.mp4', time: 30 }
]; let currentVideo = null; // 当前播放的视频 // 初始化视频播放器
const videoPlayer = document.getElementById('videoPlayer'); // 播放指定视频
function playVideo(url) {
if (currentVideo) {
currentVideo.pause(); // 如果有正在播放的视频，先暂停
currentVideo.src = ''; // 清空视频源
}
videoPlayer.src = url; // 设置新的视频源
videoPlayer.play(); // 播放新视频
currentVideo = videoPlayer; // 更新当前播放的视频
} // 遍历视频列表，设置定时器
videoSchedule.forEach(video => {
setTimeout(() => {
playVideo(video.url);
}, video.time * 1000); // 将秒转换为毫秒
}); </script>
</body>
</html>
注意： 示例中的video1.mp4、video2.mp4和video3.mp4需要替换为实际的视频文件URL。
videoPlayer.src = ''; 这行代码用于清空视频源，这样可以确保当新视频开始播放时，旧的视频内容不会残留在播放器中。但这种方法在某些浏览器中可能不是必需的或可能不起作用，具体取决于浏览器的实现。
示例中使用了controls属性在<video>标签中，这样用户就可以手动控制视频的播放。如果你不需要这些控件，可以移除controls属性。
请确保你的网页有权访问这些视频文件，特别是如果它们托管在不同的域上，你可能需要处理跨域资源共享（CORS）问题。
JS 实现在指定的时间点播放列表中的视频的更多相关文章
- js动态生成input指定My97DatePicker时间问题
js生成的input指定onclick时间: 以下1.2为错误: onclick="WdatePicker()"; onclick=WdatePicker(); 若指定到windo ...
- 通过 JS 实现错误页面在指定的时间跳到主页
通过 JS 实现错误页面在指定的时间跳到主页 <!DOCTYPE html> <html> <head> <title>浏览器对象</title& ...
- JS Window对象 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。
计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...
- js在table指定tr行上或底下添加tr行
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex) { var tb = document.getElementB ...
- [转]oracle job有定时执行的功能，可以在指定的时间点或每天的某个时间点自行执行任务。
oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; selec ...
- 同一天的时间差，显示为HHMMSS和指定日期时间部分
//1.hhmmss private String setGoodsDisBalance(Date startTime,Date endTime){ //时间差:毫秒ms long diff = en ...
- Jsp开发自定义标签，自定义标签将字符串转成指定的时间格式显示
本例以将 字符串格式的时间转成指定的时间格式显示. 第一步.定义一个标签处理程序类,需要集成javax.servlet.jsp.tagext.TagSupport,代码如下: import java. ...
- Linux 命令 - at: 在指定的时间执行任务
在指定的时间执行任务. 命令格式 at [-V] [-q queue] [-f file] [-mldbv] TIMEat [-V] [-q queue] [-f file] [-mldbv] -t ...
- js学习笔记之：时间（一）
日期和时间是javaScript中常用的对象,可以通过此对象判断星期.生日.纪念日等,提高网站的人性化.下面将通过实例来介绍一下学习javaScript中有关时间和日期的知识点: (1)日期和时间函数 ...
- JS如何将UTC格式时间转本地格式
Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, //month & ...
随机推荐
- 性能调优、虚拟机、垃圾回收、软硬件协调相关文章和视频 — Part1
本文由 ImportNew - 顾星竹 翻译自 javacodegeeks.如需转载本文,请先参见文章末尾处的转载要求. ImportNew注:如果你也对Java技术翻译分享感兴趣,欢迎加入我们的 J ...
- JAVA并发编程学习笔记之Unsafe类
java不能直接访问操作系统底层,而是通过本地方法来访问.Unsafe类提供了硬件级别的原子操作,主要提供了以下功能: 1.通过Unsafe类可以分配内存,可以释放内存: 类中提供的3个本地方法all ...
- 浅谈Java的Mina框架传递对象
本篇文章主要讲解Java的Mina框架传递对象是什么,并附于代码和图片方便大家理解. AD:2013大数据全球技术峰会课程PPT下载 接触java的Mina框架已经有很多时间了,在网上也读过了很多的相 ...
- docker之网络与数据管理
docker默认使用bridge(单主机互联)和overlay(可跨主机互联)两种网络驱动来进行容器的网络管理.如需要,还可以自定义网络驱动插件进行docker容器的网络管理. 1.docker默认网 ...
- Windows系统安装使用Scoop包管理器
前言 Scoop是Windows的命令行安装程序. 如果用过Linux系统,使用apt-get工具安装过软件,或者用过Python,知道pip工具用于管理Python各种依赖包,那么理解Sco ...
- 鸿蒙NEXT开发案例：颜文字搜索器
[引言] 本文将介绍一个名为"颜文字搜索器"的开发案例,该应用是基于鸿蒙NEXT平台构建的,旨在帮助用户快速查找和使用各种风格的表情符号.通过本案例的学习,读者可以了解如何在鸿蒙平 ...
- R数据分析：非劣效性研究设计的统计处理方法，原理和实例
在我们经常接触的统计模式中,我们是在寻求推翻原假设,证明差异,这种统计模型在传统的临床试验中,在各种统计推断中已经成为默认了.在传统的临床试验中通常会将一种新的治疗方法与标准治疗或安慰剂进行比较,从而 ...
- CCF中国开源大会，中电金信与行业共探AI技术在金融行业的应用和前景
10月21日,以"开源联合,聚力共赢"为主题的2023 CCF中国开源大会在长沙开幕.中电金信副总经理.研究院院长况文川参加峰会,在"算力与大模型"主题论坛 ...
- .net delegate 万能适配
遇到一个技术点,记一下,.net 有一个 Delegate Marshall.GetDelegateForFunctionPointer(IntPtr ptr, Type t) 用来将内存地址映射为一 ...
- java多层级zip解压
java多层级zip解压 前言 项目中偶然需要,希望能处理嵌套的压缩包,但是又不希望把文件解压处理.原本不希望重复造轮子,但没有发现很好用的现成案例,就简单处理了一下. 正文 java做zip解压一般 ...