HTML:视频播放器（html+css+javascript）

目录一、作品展示二、代码实现三、文件目录一、作品展示二、代码实现<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" c

陪我吹吹海風吧

2120人浏览 · 2022-05-16 22:00:07

陪我吹吹海風吧 · 2022-05-16 22:00:07 发布

🤱作者简介：大家好！我是陪我吹吹海風吧。
📁喜欢：点赞收藏！持续更新
✊加油，共勉

一、作品展示

在这里插入图片描述

二、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Responsive Video Playlist Tutorial</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   
<div class="box">
   <div class="main-box">
      <video src="images/哆啦A梦.mp4" loop controls class="main-video"></video>
      <h3 class="main-title">house flood animation</h3>
   </div>
   <div class="video-box">
      <div class="list active">
         <video src="images/哆啦A梦.mp4" class="list-video"></video>
         <h3 class="list-title">house flood animation</h3>
      </div>
      <div class="list">
         <video src="images/小黄人.mp4" class="list-video"></video>
         <h3 class="list-title">zoombie walking animation</h3>
      </div>
      <div class="list">
         <video src="images/樱桃小丸子.mp4" class="list-video"></video>
         <h3 class="list-title">emoji falling animation</h3>
      </div>
      <div class="list">
         <video src="images/花园宝宝.mp4" class="list-video"></video>
         <h3 class="list-title">3D town animation</h3>
      </div>
      <div class="list">
         <video src="images/名侦探柯南.mp4" class="list-video"></video>
         <h3 class="list-title">man chasing carrot animation</h3>
      </div>
      <div class="list">
         <video src="images/成龙历险记.mp4" class="list-video"></video>
         <h3 class="list-title">door hinge animation</h3>
      </div>
      <div class="list">
         <video src="images/火影忍者.mp4" class="list-video"></video>
         <h3 class="list-title">poeple walking in town animation</h3>
      </div>
      <div class="list">
         <video src="images/百变小樱.mp4" class="list-video"></video>
         <h3 class="list-title">knight chasing virus animation</h3>
      </div>
      <div class="list">
         <video src="images/喜洋洋与灰太狼.mp4" class="list-video"></video>
         <h3 class="list-title">3D helicopter animation</h3>
      </div>
   </div>
</div>
<script src="js/script.js"></script>
</body>
</html>