调用js写一个非常美观的html视频播放器,html里写入视频暂停固定的几段暂停时间,按A键继续播放
时间: 2024-04-16 20:23:48 浏览: 22
你可以使用HTML和JavaScript来创建一个美观的视频播放器,并在HTML中设置固定的暂停时间。
首先,在HTML中创建一个视频标签,并设置视频的路径和其他属性:
```html
<video id="myVideo" controls>
<source src="path_to_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
```
接下来,使用JavaScript来控制视频的播放和暂停。你可以监听键盘事件,当按下"A"键时,继续播放视频。同时,你可以使用`setTimeout`函数在指定的时间后暂停视频。
```html
<script>
var video = document.getElementById("myVideo");
var pauseTimes = [5000, 10000, 15000]; // 设置暂停时间,单位为毫秒
var currentPauseIndex = 0;
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
function continuePlaying() {
if (currentPauseIndex >= pauseTimes.length) {
return; // 已经没有更多的暂停时间了
}
setTimeout(function() {
pauseVideo();
currentPauseIndex++;
}, pauseTimes[currentPauseIndex]);
}
document.addEventListener("keydown", function(event) {
if (event.key === "a") {
continuePlaying();
}
});
</script>
```
上述代码会在页面加载时创建一个视频播放器,并设置了三个暂停时间。按下"A"键后,会继续播放视频直到达到下一个暂停时间。
请注意,路径`path_to_video.mp4`需要替换为你自己的视频文件路径。此外,你可以根据需要自定义暂停时间和其他样式来美化视频播放器。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)