使用VScode构建抖音风格的视频播放界面-CSDN博客

本文链接：https://blog.csdn.net/qq_48956903/article/details/125546070

本文介绍了如何使用VScode实现类似抖音的视频播放功能，包括界面设计、CSS和JS文件的应用，以及滑动切换视频的实现。通过引入swiper库和自定义样式，创建了包含视频播放、控制栏和用户交互的界面。同时，详细讲解了视频播放、暂停和进度条更新的JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果界面图

1.1完整效果

1.2 界面展示

1.2 暂停展示

1.3 使用css、js文件样式：

// 引用css文件字体样式

//引用swipe文件滑块模式

//引用swiper滑块样式文件

注释：swipe是滑动事件

2、index.html 设计

2.1、style设计：

<style>

body{padding: 0;margin: 0;background-color: #111;overflow: hidden;font-family: "微软雅黑 Light"}

.header{height: 100px;line-height: 100px;position:fixed;top: 0px;z-index: 1;background-color: #111;color: #fff;width: 100%}

.header li{list-style: none;line-height: 100px;display: block;float: left;margin: 0 10px;font-size: 20px;}

.header-add{width: 20px;height: 20px;margin: 40px auto;border: solid 2px #fff;border-radius: 50%;display: block;line-height: 16px;text-align: center}

.container{width:96%;margin: 0 auto}

.main{height: 490px;position: absolute;top: 100px;width: 100%;overflow: hidden}

.video-container{width: 100%;height: 490px;}

.footer {height: 80px;position: fixed;bottom: 0;color: #ffffff;width: 100%}

.footer li{list-style: none;line-height: 80px;display: block;float: left;margin: 0 18px;font-size: 18px;}

.footer li span{display: block;height: 20px;width: 40px;border-radius: 5px;border: 3px solid #ffffff;margin: 30px auto;line-height: 18px;text-align: center}

.player{height: 490px;z-index: 999;width: 100%;}

.player video{height: 480px;width: 100%}

.right{position: absolute;right: 0;top: 130px;z-index: 9999;width: 60px;height: 260px}

.header-u{border-radius: 50%;width: 40px;height: 40px;border: solid 2px #fff;overflow: hidden;margin: 4px}

.header-b{border-radius: 50%;width: 30px;height: 30px;border: solid 4px #777;overflow: hidden;margin-top: 80px}

.header-u img{margin-top: -20px}

.ops{width: 60px;text-align: center;height: 60px}

.bottom-s{position: absolute;bottom: 100px;z-index: 99999;width: 80%;height: 40px}

.bottom-s span{font-size: 14px;height: 20px}

.bottom-s p{font-size: 14px;}

@keyframes rotations {

100%{

transform: rotate(360deg);

}

.music2{

animation: rotations 3s linear 0s infinite;

/* animation-duration:reverse; */

/* animation-duration:alternate; */

animation-duration:alternate-reverse;

}

a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}

.progress{

height: 2px;background: #777;width: 100%;position: absolute;z-index: 9999;bottom: 0px;overflow: hidden;

}

.progress .progress-in{

height: 3px;width: 20%;background-color: #fff;z-index: 999999;

}

</style>

2.2、body排版

<body>

VScode实现抖音功能