jquery实现自适应视频播放及播放列表效果代码
代码语言:html
所属分类:多媒体
代码描述:jquery实现自适应视频播放及播放列表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; text-transform: capitalize; } body { background: #eee; } .heading { color: #444; font-size: 40px; text-align: center; padding: 10px; } .container { display: grid; grid-template-columns: 2fr 1fr; gap: 15px; align-items: flex-start; padding: 5px 5%; } .container .main-video { background: #fff; border-radius: 5px; padding: 10px; } .container .main-video video { width: 100%; border-radius: 5px; } .container .main-video .title { color: #333; font-size: 23px; padding-top: 15px; padding-bottom: 15px; } .container .video-list { background: #fff; border-radius: 5px; height: 582px; overflow-y: scroll; } .container .video-list::-webkit-scrollbar { width: 7px; } .container .video-list::-webkit-scrollbar-track { background: #ccc; border-radius: 50px; } .container .video-list::-webkit-scrollbar-thumb { background: #666; border-radius: 50px; } .container .video-list .vid video { width: 100px; border-radius: 5px; } .container .video-list .vid { display: flex; align-items: center; gap: 15px; background: #f7f7f7; border-radius: 5px; margin: 10px; padding: 10px; border: 1px solid rgba(0,0,0,.1); cursor: pointer; } .container .video-list .vid:hover { background: #eee; } .container .video-list .vid.active { background: #2980b9; } .container .video-list .vid.active .title { color: #fff; } .container .video-list .vid .title { color: #333;; font-size: 17px; } @media (max-width: 991px) { .container { grid-template-columns: 1.5fr 1fr; padding: 10px; } } @media (max-width: 768px) { .container { grid-template-columns: 1fr; } } </style> </head> <body > <h3 class="heading">video gallery</h3> <div class="container"> <div class="main-video"> <div class="video"> <video src ="//repo.bfw.wiki/bfwrepo/video/modushanghai.mp4" controls muted autoplay></video> <h3 class="title">01. teenager Boy</h3> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0