为了实现在指定的时间点播放列表中的视频，你可以使用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. CentOS 7环境下DM8数据库的安装与配置

    一.环境准备 首先,确保你的系统已经安装了CentOS 7,并且具有足够的磁盘空间和内存来支持DM8数据库的运行.此外,你还需要具备管理员权限,以便进行后续的安装和配置操作. 二.下载DM8安装包 访 ...

  2. 整理程序员面试中HR最常问的问题

    前言 不要慌,不要怕,要调适好自己的情绪,在介绍自己的基本情况时面无表情,说的头头是道,必要的时候包装下自己,不属于你的功能也能说是你的(难不成会去查?查也查不到).不过在面试前,建议可以找自己的朋友 ...

  3. Redis工具可视化工具Redis Desktop Manager（附安装包）

    前言 redis工具,我相信每个开发都需要,如果每次查都去client执行指令,我怕查完之后,老大就要发版咯.我之前一直用的Redis可视化工具RedisDesktopManager,总觉得差点意思, ...

  4. Python311新特性-特化指令specializing adaptive interpreter-typing-asyncio

    Python3新特性 python3.11增加了许多特性,让python更快更加安全,本文从应用层面来讲一下python3.11的这些新特性 特化自适应解析器是什么,如何利用特化写出更高性能的代码 如 ...

  5. java通过SSE实现消息推送

    一.什么是SSE 严格地说,HTTP 协议无法做到服务器主动推送信息.但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming). 也就是说,发送的不是一次性的数据包, ...

  6. LLM应用实战: AI资讯的自动聚合及报告生成

    1.背景 花了整整两天时间,本qiang~开发了一个关于AI新闻资讯的自动聚合及报告生成工具. 本篇记录一下整体的框架和实现原理,并且本着它山之石可以攻玉,本qiang~开放了所有的源码,源码可见如下 ...

  7. games101_Homework7

    实现完整的 Path Tracing 算法 需要修改这一个函数: • castRay(const Ray ray, int depth)in Scene.cpp: 在其中实现 Path Tracing ...

  8. Help document of CAD Plus

    中文使用帮助 Help for Mobile Update time: 2023-07-29; This article will help you how to use the CAD Plus a ...

  9. 干货分享：通用加解密函数(crypto)，Air780E篇

    一.加解密概述 加解密算法是保证数据安全的基础技术,无论是在数据传输.存储,还是用户身份验证中,都起着至关重要的作用.随着互联网的发展和信息安全威胁的增加,了解并掌握常用的加解密算法已经成为开发者和安 ...

  10. 高性能计算-雅可比算法MPI通信优化(5)

    雅可比算法原理:如下图对方阵非边界元素求上下左右元素的均值,全部计算元素的数值计算完成后更新矩阵,进行下一次迭代. 测试目标:用MPI实现对8*8方阵雅可比算法迭代并行计算,用重复非阻塞的通信方式 # ...