JS原生点击缩略图全屏视频切换播放特效代码素材
JS原生点击缩略图全屏视频切换播放特效代码素材
JS原生点击缩略图全屏视频切换播放特效是一款原生js简单的点击缩略图滑块视频切换特效。
经测试该代码素材适用于浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗.。不支持Safari、IE8及以下浏览器。
html代码部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS缩略图全屏视频切换特效</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<video id="slider" autoplay muted loop>
<source src="video2.mp4" type="video/mp4"> <!-- 这里更换成你的视频地址 -->
</video>
<ul class="nav"><!-- 以下部分更换成你准备的图片，建议每张图片大小一致。 -->
<li onClick="videoUrl('video2.mp4')"><img src="img/thumb1.png" alt=""></li>
<li onClick="videoUrl('video1.mp4')"><img src="img/thumb2.png" alt=""></li>
<li onClick="videoUrl('video2.mp4')"><img src="img/thumb3.png" alt=""></li>
<li onClick="videoUrl('video1.mp4')"><img src="img/thumb4.png" alt=""></li>
</ul>
</section>
<script type="text/javascript">
function videoUrl(url){
document.getElementById('slider').src=`https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/${url}`
}
</script>
</body>
</html>css部分：
*{
margin: 0;
padding: 0;
font-family:"微软雅黑,"sans-serif ;
}
section{
position: relative;
width: 100%;
height: 100vh;
}
section video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section .nav{
position: absolute;
bottom: 20%;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
}
section .nav li{
list-style: none;
cursor: pointer;
margin: 0 10px;
background:#fff;
padding: 3px 3px 0;
opacity: .7;
transition: .5s;
}
section .nav li:hover{
opacity: 1;
}
section .nav li img{
width: 120px;
opacity: 1;
}
section .nav li img:hover{
width: 200px;
opacity: 1;
}