弹来弹去跑马灯!

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）问题。

　　

posted @ 2024-07-17 16:35  wgscd  阅读(2)  评论(0)  编辑  收藏  举报