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 & ...
随机推荐
- macos安装Charles
一.安装jdk 1.地址:https://www.oracle.com/cn/java/technologies/downloads/#java11,下载后双击安装 2.查看java的安装地址,在ma ...
- P8392 BalticOI 2022 Day1 Uplifting Excursion
P8392 BalticOI 2022 Day1 Uplifting Excursion 贪心加动规,好题,这两个甚至完全相反的东西可以融进一道题-- 思路 物品较少,贡献较小,体积较小,但总体积巨大 ...
- apisix lua插件开发
1. 怎么定义ngx自定义变量 ngx.var.custom_var nginx_config: # config for render the template to generate nginx. ...
- JVM学习笔记-操作数栈(Operand Stack)
Like the local variables, the operand stack is organized as an array of words. But unlike the local ...
- 推荐给初级Java程序员的3本进阶书
ImportNew 注: 原作者在这篇文章中介绍3本不错的技术书籍.作者认为这些书籍对新手或者学生而言尤其有帮助.通过一些基础性的教程入门后,我们可以使用Java做基础性的编程.然而,当我们需要从初级 ...
- Python:pygame游戏编程之旅三（玩家控制的小球）
上一节实现了小球自由移动,本节在上节基础上增加通过方向键控制小球运动,并为游戏增加了背景图片. 一.实现: # -*- coding:utf-8 -*- import os import sys im ...
- 安卓抓包之SocksDroid
之前一直使用电脑端的Charles代理软件, 然后手机端WiFi代理设置为Charles的代理ip与端口, 也就是8888 但是发现有些软件的请求包是抓取不到的, 于是查看apk源码发现发送网络请求使 ...
- Linux终端命令之screen
screen的功能 screen的功能大体有三个: 会话恢复:只要Screen本身没有终止,在其内部运行的会话都可以恢复.这一点对于远程登录的用户特别有用--即使网络连接中断,用户也不会失去对已经打开 ...
- Blazor 组件库 BootstrapBlazor 中Carousel组件介绍
组件介绍 Carousel 走马灯的作用是在有限空间内,循环播放同一类型的图片.文字等内容. 代码如下: <Carousel Images="@Images" Width=& ...
- 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 ...