原生JS点击缩略图全屏视频切换播放特效.zip_前端点缩略图切换视频资源-CSDN文库

共6个文件

png：4个

html：1个

css：1个

版权申诉

前端代码

146 浏览量 2022-11-10 03:56:43 上传评论收藏 774KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

原生JS点击缩略图全屏视频切换播放特效.zip （6个子文件）

132674315974917176

likecs.com_132674316057176032

css

style.css 838B

img

thumb2.png 144KB

thumb1.png 160KB

thumb4.png 176KB

thumb3.png 290KB

index.html 1KB

<!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="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/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>

评论收藏

内容反馈

版权申诉