为了实现在指定的时间点播放列表中的视频，你可以使用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. Canvas简历编辑器-层级渲染与事件管理能力设计

    Canvas简历编辑器-选中绘制与拖拽多选交互设计 在之前我们聊了聊如何基于Canvas与基本事件组合实现了轻量级DOM,并且在此基础上实现了如何进行管理事件以及多层级渲染的能力设计.那么此时我们就依 ...

  2. Linux日志轮替与总结

    目录 基本介绍 轮替文件的命名 配置文件 路径位置 参数说明 举例:把自己的日志加入日志轮替 说明 步骤 日志轮替机制原理[个人理解,仅供参考] 总结[关于日志需要掌握的点] 基本介绍 日志轮替就是把 ...

  3. Air780E篇：采集温湿度传感器数据，并网页查看

    ​ 今天我们学习合宙低功耗4G模组Air780E篇:采集温湿度传感器数据并实现网页查看,以下进入正文. 一.硬件装备 1.1 硬件连接 使用跳线帽将IO_SEL连接3.3V,给引脚供3.3V的电.dh ...

  4. 3大策略+1款工具，在K8s上搞定应用零宕机

    原文链接: https://jaadds.medium.com/building-resilient-applications-on-kubernetes-9e9e4edb4d33 翻译:cloudp ...

  5. 8、tnsnames文件配置

    监听的配置文件 2.tnsnames.ora文件 tnsnames.ora文件:客户端的 配置tnsnames.ora监听文件 1.使用netca命令 指定图像映射机器 [oracle@db11g a ...

  6. gitlab之配置文件.gitlab-ci.yml

    自动化部署給我们带来的好处 自动化部署的好处体现在几个方面 1.提高前端的开发效率和开发测试之间的协调效率 Before 如果按照传统的流程,在项目上线前的测试阶段,前端同学修复bug之后,要手动把代 ...

  7. Java设计模式——适配器模式的精妙应用：探秘 JDK 源码中的 Set 类

    在 Java 编程的世界里,JDK 源码犹如一座神秘的宝藏,其中的 Set 类更是我们日常开发中频繁使用的利器.今天,就让我们像勇敢的探险家一样,深入 JDK 源码,揭开 Set 类的神秘面纱,重点剖 ...

  8. Nuxt.js 应用中的 error 事件钩子

    title: Nuxt.js 应用中的 error 事件钩子 date: 2024/12/3 updated: 2024/12/3 author: cmdragon excerpt: 在任何 Web ...

  9. HUAWEI SECURITY 2023 山东大学专场 WP

    Crypto by Smera1d0 1.ezrsa 题干如下: from Crypto.Util.number import getPrime from secret import flag p = ...

  10. uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)

    自研uni-app+vue3+uv-ui跨三端仿同程/携程酒店预订系统Uni-Vue3-WeTrip. uniapp-vue3-wetrip原创基于vite5+uniapp+pinia2+uni-ui ...