演示不要用谷歌,谷歌不支持本地拖拽进度条 我用的是火狐
主要就是label for 来替代按钮的样式 代码很简单 但是也很实用 学会label for 以后按钮越来越好看了
跳转时间通过currentTime来设置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
label {
display: block;
}
</style>
</head>
<body>
<button onclick="setCurTime()" id="one" type="button" style="display: none"></button>
<button onclick="setCurTimeTwo()" id="two" type="button" style="display: none"></button>
<button onclick="setCurTimeThree()" id="three" type="button" style="display: none"></button>
<button onclick="setCurTimeFour()" id="four" type="button" style="display: none"></button>
<video id="video1" controls="controls">
<source src="./video/art.mp4" type="video/mp4">
</video>
<p style="align-items: center;text-align: center">欧洲简史</p>
<hr>
<label for="one"> <img style="background: white;width: 24px;height: 24px;align-items: center "
src="./video/播放.png" alt=""> 早期基督美术建筑</label>
<label for="two"> <img style="background: white;width: 24px;height: 24px;align-items: center "
src="./video/播放.png" alt=""> 也可以放一个视频中重要的内容片段</label>
<label for="three"> <img style="background: white;width: 24px;height: 24px;align-items: center "
src="./video/播放.png" alt=""> 回到头部</label>
<label for="four"> <img style="background: white;width: 24px;height: 24px;align-items: center "
src="./video/播放.png" alt=""> 回到尾部</label>
<script>
myVid=document.getElementById("video1");
function setCurTime()
{
myVid.currentTime=350;
}
function setCurTimeTwo()
{
myVid.currentTime=500;
}
function setCurTimeThree()
{
myVid.currentTime=0;
}
function setCurTimeFour()
{
myVid.currentTime=641;
}
</script>
</body>
</html>