为了实现在指定的时间点播放列表中的视频，你可以使用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. 记录一个vscode无法ssh树莓派，但是mobaxterm可以ssh登录的问题

    一.为什么会遇到这个问题 帮别人开发一个树莓派小车的时候,买了一个新的树莓派3B,回来安装好桌面系统之后开启了ssh功能,便想开始使用vscode来ssh开发,省的后续一直要插着屏幕开发,很麻烦.但是 ...

  2. nsenter 常用操作

    nsenter 是一个可以用来进入到目标程序说在 namespace 中运行命令的工具,一般可以用于在容器外 debug 容器中运行的程序.简单记录一下 nsenter 的常用用法. 常用参数 最常用 ...

  3. jenkins集成cucumber-resport报告

    需要安装的jenkins插件-Cucumber Reports jenkins版本:2.273 jenkins插件下载地址:点击下载 下载插件后通过jenkins插件管理上传已下载好的插件即可 等待j ...

  4. 干货分享：Air780E开发板如何使用？

    ​ 一.概述 CORE-AIR780E 开发板是合宙通信推出的基于 Air780E 模组所开发的,包含电源,SIM 卡,USB,天线,音频等必要功能的最小硬件系统.以方便用户在设计前期对 Air780 ...

  5. 使用越来越广泛的2FA双因素认证，缘何越发受到推崇？

    大家好,我是vzn呀,又见面了. 随着互联网在生活方方面面的应用,日常少不了要登录各个网站或者应用.或者是银行转账等需要验证自己身份的场景.从早期的输入账号密码来登录,到后来普遍开始通过手机验证码进行 ...

  6. PHP7.4之编译安装

    虽然之前写过很多编译安装PHP的文章, 但是隔段时间还是会重新安装一些PHP的版本,再次记录一下 1. 下载安装编译工具 yum groupinstall 'Development Tools' 2. ...

  7. elasticsearch之python操作

    总结使用python对于elasticsearch的常用操作 安装 pip install elasticsearch 2. 连接 from elasticsearch import Elastics ...

  8. LiV-GS: LiDAR-Vision Integration for 3D Gaussian Splatting SLAM in Outdoor Environments

    arxiv |哈工大发布 LiV-GS:户外环境中基于3D高斯泼溅的LiDAR-视觉集成SLAM系统 [LiV-GS: LiDAR-Vision Integration for 3D Gaussian ...

  9. 【朝花夕拾】蓝牙&WiFi常识篇

    一.蓝牙常识点 1.常见英文缩写 缩写 英文全称 释义 BLE Bluetooth Low Energy 低功耗蓝牙 BR Basic Rate 基本速率,一般说的经典蓝牙就是指BR/EDR EDR ...

  10. Nuxt.js 应用中的 close 事件钩子

    title: Nuxt.js 应用中的 close 事件钩子 date: 2024/12/2 updated: 2024/12/2 author: cmdragon excerpt: close 钩子 ...