Синхронизация
This commit is contained in:
kromskii2 committed
1 parent
5432bc6bb0
commit
b7d803c5aa
4 files changed
+425
No files matched your search
+84
@@ -0,0 +1,84 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const video = document.getElementById('video');
|
||||
const playPauseBtn = document.getElementById('playPauseBtn');
|
||||
const muteBtn = document.getElementById('muteBtn');
|
||||
const fullscreenBtn = document.getElementById('fullscreenBtn');
|
||||
const progressBar = document.querySelector('.progress-bar');
|
||||
const volumeSlider = document.querySelector('.volume-slider');
|
||||
const videoContainer = document.querySelector('.video-frame');
|
||||
|
||||
// Play/Pause
|
||||
function togglePlay() {
|
||||
if (video.paused) {
|
||||
video.play();
|
||||
playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
|
||||
} else {
|
||||
video.pause();
|
||||
playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
|
||||
}
|
||||
}
|
||||
|
||||
// Update progress bar
|
||||
function updateProgress() {
|
||||
const progress = (video.currentTime / video.duration) * 100;
|
||||
progressBar.value = progress;
|
||||
}
|
||||
|
||||
// Set video time based on progress bar
|
||||
function setVideoProgress() {
|
||||
video.currentTime = (progressBar.value * video.duration) / 100;
|
||||
}
|
||||
|
||||
// Volume controls
|
||||
function updateVolume() {
|
||||
video.volume = volumeSlider.value;
|
||||
updateVolumeIcon();
|
||||
}
|
||||
|
||||
function toggleMute() {
|
||||
video.muted = !video.muted;
|
||||
updateVolumeIcon();
|
||||
}
|
||||
|
||||
function updateVolumeIcon() {
|
||||
const icon = muteBtn.querySelector('i');
|
||||
if (video.muted || video.volume === 0) {
|
||||
icon.className = 'fas fa-volume-mute';
|
||||
volumeSlider.value = 0;
|
||||
} else {
|
||||
icon.className = 'fas fa-volume-up';
|
||||
volumeSlider.value = video.volume;
|
||||
}
|
||||
}
|
||||
|
||||
// Fullscreen
|
||||
function toggleFullscreen() {
|
||||
if (!document.fullscreenElement) {
|
||||
videoContainer.requestFullscreen();
|
||||
fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
|
||||
} else {
|
||||
document.exitFullscreen();
|
||||
fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
playPauseBtn.addEventListener('click', togglePlay);
|
||||
video.addEventListener('click', togglePlay);
|
||||
video.addEventListener('timeupdate', updateProgress);
|
||||
progressBar.addEventListener('change', setVideoProgress);
|
||||
muteBtn.addEventListener('click', toggleMute);
|
||||
volumeSlider.addEventListener('input', updateVolume);
|
||||
fullscreenBtn.addEventListener('click', toggleFullscreen);
|
||||
|
||||
// Keyboard controls
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.code === 'Space') {
|
||||
e.preventDefault();
|
||||
togglePlay();
|
||||
}
|
||||
});
|
||||
|
||||
// Log ready state
|
||||
console.log('Video player initialized');
|
||||
});
|
||||
+258
@@ -0,0 +1,258 @@
|
||||
:root {
|
||||
--primary: hsl(320, 80%, 80%);
|
||||
--primary-foreground: hsl(320, 10%, 20%);
|
||||
--background: linear-gradient(to bottom right, #ffd1dc, #e6e6fa, #add8e6);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, sans-serif;
|
||||
min-height: 100vh;
|
||||
background: var(--background);
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
width: 100%;
|
||||
max-width: 64rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* Decorative elements */
|
||||
.decoration-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
}
|
||||
|
||||
.top-left {
|
||||
top: -5rem;
|
||||
left: -5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background: rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.bottom-right {
|
||||
bottom: -5rem;
|
||||
right: -5rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
background: rgba(230, 230, 250, 0.3);
|
||||
}
|
||||
|
||||
.mid-left {
|
||||
top: 50%;
|
||||
left: -8rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background: rgba(173, 216, 230, 0.3);
|
||||
}
|
||||
|
||||
.mid-right {
|
||||
top: 50%;
|
||||
right: -8rem;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background: rgba(255, 182, 193, 0.3);
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
font-size: 2.5rem;
|
||||
color: rgba(255, 182, 193, 0.8);
|
||||
}
|
||||
|
||||
.top-heart {
|
||||
top: -2.5rem;
|
||||
right: 2.5rem;
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
|
||||
.bottom-heart {
|
||||
bottom: -2.5rem;
|
||||
left: 2.5rem;
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 1rem;
|
||||
background: rgba(255, 182, 193, 0.2);
|
||||
color: var(--primary-foreground);
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
padding: 0.75rem;
|
||||
background: linear-gradient(to right, #ffd1dc, #e6e6fa, #add8e6);
|
||||
border-radius: 2.5rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.video-frame {
|
||||
position: relative;
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
.video-controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.video-frame:hover .video-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.progress-bar::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.progress-bar::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.controls-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-controls, .right-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.volume-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.volume-slider {
|
||||
width: 6rem;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.volume-slider::-webkit-slider-thumb:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.made-with {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 9999px;
|
||||
font-size: 0.875rem;
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user