为了实现在指定的时间点播放列表中的视频，你可以使用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 实现在指定的时间点播放列表中的视频的更多相关文章

  1. js动态生成input指定My97DatePicker时间问题

    js生成的input指定onclick时间: 以下1.2为错误: onclick="WdatePicker()"; onclick=WdatePicker(); 若指定到windo ...

  2. 通过 JS 实现错误页面在指定的时间跳到主页

    通过 JS 实现错误页面在指定的时间跳到主页 <!DOCTYPE html> <html> <head> <title>浏览器对象</title& ...

  3. JS Window对象 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。

    计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...

  4. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

  5. [转]oracle job有定时执行的功能，可以在指定的时间点或每天的某个时间点自行执行任务。

    oracle job有定时执行的功能,可以在指定的时间点或每天的某个时间点自行执行任务. 一.查询系统中的job,可以查询视图 --相关视图 select * from dba_jobs; selec ...

  6. 同一天的时间差，显示为HHMMSS和指定日期时间部分

    //1.hhmmss private String setGoodsDisBalance(Date startTime,Date endTime){ //时间差:毫秒ms long diff = en ...

  7. Jsp开发自定义标签，自定义标签将字符串转成指定的时间格式显示

    本例以将 字符串格式的时间转成指定的时间格式显示. 第一步.定义一个标签处理程序类,需要集成javax.servlet.jsp.tagext.TagSupport,代码如下: import java. ...

  8. Linux 命令 - at: 在指定的时间执行任务

    在指定的时间执行任务. 命令格式 at [-V] [-q queue] [-f file] [-mldbv] TIMEat [-V] [-q queue] [-f file] [-mldbv] -t ...

  9. js学习笔记之：时间（一）

    日期和时间是javaScript中常用的对象,可以通过此对象判断星期.生日.纪念日等,提高网站的人性化.下面将通过实例来介绍一下学习javaScript中有关时间和日期的知识点: (1)日期和时间函数 ...

  10. JS如何将UTC格式时间转本地格式

    Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, //month & ...

随机推荐

  1. 【VMware VCF】使用 Offline Bundle Transfer Utility（OBTU）配置 VCF 脱机库。

    VMware Cloud Foundation 环境中,软件包仓库的来源支持两种方式,分别是 Online Depot 和 Offline Depot.第一种方式,是在 VCF 环境能够连接互联网的情 ...

  2. DPaRL：耶鲁+AWS出品，开放世界持续学习场景的新解法 | ECCV'24

    来源:晓飞的算法工程笔记 公众号,转载请注明出处 论文: Open-World Dynamic Prompt and Continual Visual Representation Learning ...

  3. c++11新增内容

    记录一下c++11新特性方便以后回忆 1.nullptr (对标NULL) 2.auto ,decltype(根据表达式推断类型,表达式不执行) decltype(func()) sum = 5; / ...

  4. 9-4 vector对象是如何增长的

    .size():容器中有多少元素 .capacity():不重新分配内存时,可容纳多少元素 .reserve(n):分配至少能容纳n个元素的内存 n>capacity时会分配使得capacity ...

  5. games101_Homework1

    本次作业的任务是填写一个旋转矩阵和一个透视投影矩阵.给定三维下三个 点 v0(2.0, 0.0, −2.0), v1(0.0, 2.0, −2.0), v2(−2.0, 0.0, −2.0), 你需要 ...

  6. isObject：判断数据是不是引用类型的数据 (例如： arrays, functions, objects, regexes, new Number(0),以及 new String(''))

    function isObject(value) { let type = typeof value; return value != null && (type == 'object ...

  7. java swing 学习

    JSplitPane固定分割比例和禁止拖动分割条 有知友问JSplitPane的问题,在写代码的时候不想让分割条拖动,结果找不到方法,百度了 居然也找不到... 后来在一个犄角旮旯里发现了 ,,  就 ...

  8. python系统模块之re

    正则模块re: 元字符: 字符 描述 . 除换行符外的任意字符 \ 转义字符 [...] 字符集合,匹配任务其中一个 \d 数字:[0-9] \D 非数字:[^\d] \w 单词字符[A-Za-z0- ...

  9. MySQL8.0之特性

    MySQL 8.0 正式版 8.0.11 已发布,官方表示 MySQL 8 要比 MySQL 5.7 快 2 倍,还带来了大量的改进和更快的性能.下面我们将简要介绍下 MySQL 8.0 中值得关注的 ...

  10. Lua之基础篇

    新到一家公司,接触有些业务竟然直接通过服务器,在nginx层面就完成了,主要是基于OpenResty和Lua来实现的.打算深入了解一下这门神奇的语言... 为了嵌入应用程序中,从而为应用程序提供灵活的 ...