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 & ...
随机推荐
- Flink RetractStream示例及UDF函数实现
介绍 今天在Flink 1.7.2版本上跑一个Flink SQL 示例 RetractPvUvSQL,报 Exception in thread "main" org.apache ...
- WIN10 SERVICES -- 部署IIS
一 . 添加角色功能 二. 添加WEB服务器(IIS) 三. 打开TCP ASP.NET 安装 供运行端口
- 接口测试中如何保持session鉴权/会话
当接口使用token鉴权时,可以直接在响应数据中提取token的值,关联到其他接口使用 如果接口使用的是session鉴权,可以使用session=resquests.Session()方法,创建一个 ...
- P5987 [PA2019] Terytoria / 2023NOIP A层联测13 T3 全球覆盖
P5987 [PA2019] Terytoria / 2023NOIP A层联测13 T3 全球覆盖 题面及数据范围 对于一个点对,可以降维为线段,转化为 1 维的问题. 如图: 我们可以在横着的方向 ...
- 使用Ollama和Open WebUI管理本地开源大模型
Open WebUI和Ollama介绍 Open WebUI 是一个功能丰富且用户友好的自托管 Web 用户界面(WebUI),它被设计用于与大型语言模型(LLMs)进行交互,特别是那些由 Ollam ...
- RMI原理及常见反序列化攻击手法
这是对网上一些文章和视频的再总结,可以参考以下资料,师傅们分析的都挺详细了,我这就是记录一下师傅们写的博客. 廖雪峰 - 给了简单的小例子,了解即可 B站视频(白师傅) 先知社区(小阳师傅) - 讲的 ...
- Java Study For Five Day( 面向对象一)
面向对象 1.面向对象的概念 2.理解面向对象 *面向对象其实是相对面向过程而言的,面向对象和面向过程都是一种思想,它们所强调的内容不一样. *面向对象:强调的是功能的行为,将功能进行了封装成了对象, ...
- 基本ROP
ret2text [NewStarCTF 2023 公开赛道]ret2text (64) execve本身并不是一个后门函数. 实际上,execve是一个标准的系统调用函数,用于在 Linux和类 U ...
- 一个关于CountDownLatch的并发需求
需求 A,B,C可并发运行,全部成功才算成功,一个失败全员回滚. 思考 使用CountDownLatch,可以保证三个线程结束后,才进行提交成功状态.但是怎么才能判断某个任务失败了呢? 捕获子线程异常 ...
- Pytorch 手写数字识别 深度学习基础分享
本篇是一次内部分享,给项目开发的同事分享什么是深度学习.用最简单的手写数字识别做例子,讲解了大概的原理. 手写数字识别 展示首先数字识别项目的使用.项目实现过程: 训练出模型 准备html手写板 fl ...