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 & ...
随机推荐
- mysql 备份还原命令备忘
1.备份 mysqldump -u username -p databasename tableName > backupfile.sql 2.还原 mysql -u username -p p ...
- 最逼真的AI换脸软件，Pluse下载介绍（可直播）
Pluse是基于人工智能的实时AI换脸工具,可以在无需任何前期数据训练的情况下,通过一张照片快速替换视频中的人脸,它支持高分辨率细节重建.色彩矫正,并能实时替换多目标人脸,非常适合娱乐社交.影视制作和 ...
- Reviewbot 开源 | 为什么我们要打造自己的代码审查服务？
Reviewbot 是七牛云开源的一个项目,旨在提供一个自托管的代码审查服务, 方便做 code review/静态检查, 以及自定义工程规范的落地. 静态检查不是个新鲜事. 我记得早在几年前,我们就 ...
- chapter1 events and probability
第一章 事件和概率 1.1 Appication: verifying polynomial identities 1.2 Axioms of probability 1.3 Application ...
- CCF网站提供的资源
1. 电子刊物,如<CCF通讯> 实时更新:http://www.ccf.org.cn/dl/publications/ 过往期刊:http://history.ccf.org.cn/si ...
- 9-5 额外的string操作
9.5.1 构造string的其他方法:略 9.5.2 改变string的其他方法:略 9.5.3 string搜索操作:略 9.5.4 compare函数:略 9.5.5 数值转换 int main ...
- .NET斗鱼直播弹幕客户端(上)
现在直播平台由于弹幕的存在,主播与观众可以更轻松地进行互动,非常受年轻群众的欢迎.斗鱼TV就是一款非常流行的直播平台,弹幕更是非常火爆.看到有不少主播接入弹幕语音播报器.弹幕点歌等模块,这都需要首先连 ...
- npm 发包命令
npm publish 此命令发布latest版本 npm publish --tag=alpha 发布alpha版本(测试版本) 紧急回退包方案: 分享一下bnpm给的处理方案 如果因为 ...
- SQL注入sqlmap联动burpsuite之burp4sqlmap++插件
目录 sqlmap和burpsuite介绍 sqlmap4burp++介绍 sqlmap4burp++的使用 小插曲:sqlmap报错文件不存在怎么办? 官方扩展CO2之SQLmapper sqlma ...
- 在vue中使用html2canvas生成图片
首先,在vue中引入html2canvas,执行命令 npm install --save html2canvas 然后在需要生成图片的页面中引入 import html2canvas from 'h ...