Spaces:
Running
Running
File size: 3,424 Bytes
1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce 1425826 288fdce |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Streaming Platform</title>
<style>
/* General Styling */
body {
font-family: 'Arial', sans-serif;
background-color: #121212; /* Dark background */
color: #f0f0f0; /* Light text for contrast */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Video Container Styling */
.video-container {
background-color: #1e1e1e; /* Dark card background */
border-radius: 15px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); /* Soft shadow for a modern look */
padding: 20px;
max-width: 900px;
width: 100%;
}
/* Video Element Styling */
video {
width: 100%;
border-radius: 10px;
outline: none;
}
/* Heading Styling */
h1 {
color: #ff6e40; /* Accent color for heading */
text-align: center;
font-weight: 700;
font-size: 2rem;
margin-bottom: 15px;
}
/* Control Buttons Styling */
.controls {
display: flex;
justify-content: center;
margin-top: 20px;
}
button {
background-color: #ff6e40; /* Button background */
border: none;
color: #fff;
padding: 12px 24px;
text-align: center;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #ff3d00; /* Darker shade on hover */
}
/* Responsive Design */
@media (max-width: 768px) {
.video-container {
padding: 15px;
}
h1 {
font-size: 1.5rem;
}
button {
padding: 10px 20px;
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="video-container">
<h1>Watch The Passion of The Christ</h1>
<video id="videoPlayer" controls>
<source src="The Passion of the Christ [2004].mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="controls">
<button onclick="loadProgress()">Resume from Last Watch</button>
</div>
</div>
<script>
const video = document.getElementById('videoPlayer');
function saveProgress() {
localStorage.setItem('videoProgress', video.currentTime);
}
function loadProgress() {
const savedTime = localStorage.getItem('videoProgress');
if (savedTime) {
video.currentTime = parseFloat(savedTime);
video.play();
} else {
alert('No saved progress found.');
}
}
// Auto-save progress every 5 seconds
setInterval(saveProgress, 5000);
// Load saved progress when the page loads
window.onload = loadProgress;
</script>
</body>
</html>
|