Code a tube website for me where people can watch ...
تم الإنشاء في: ٨ فبراير ٢٠٢٥
تمت الإجابة باستخدام O3 Mini High بواسطة Chat01
تم الإنشاء في: ٨ فبراير ٢٠٢٥
تمت الإجابة باستخدام O3 Mini High بواسطة Chat01
Code a tube website for me where people can watch web series list some of the popular serious in it too and decide everything ur self
Below is one way to build a very simple “tube website” for streaming web series using only HTML, CSS, and JavaScript (with Bootstrap for styling). This example creates two pages:
In a real production system you might use a back end with a database, proper user authentication, streaming infrastructure, and more robust design. But the following code is a self-contained starting point that you can run locally. (For testing, simply save the files and open index.html in your browser.)
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>TubeSeries - Watch Web Series Online</title> <!-- Bootstrap CSS (v4.5) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style> /* Custom styling */ .card-img-top { height: 200px; object-fit: cover; } </style> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">TubeSeries</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="#">Popular</a></li> <li class="nav-item"><a class="nav-link" href="#">Latest</a></li> </ul> </div> </nav> <!-- Main Content --> <div class="container mt-4"> <h1 class="mb-4">Popular Web Series</h1> <div class="row"> <!-- Series Card: Stranger Things --> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img src="https://via.placeholder.com/350x200?text=Stranger+Things" class="card-img-top" alt="Stranger Things"> <div class="card-body"> <h5 class="card-title">Stranger Things</h5> <p class="card-text">A group of kids uncover supernatural mysteries in their small town.</p> <a href="series.html?series=stranger-things" class="btn btn-primary">Watch Now</a> </div> </div> </div> <!-- Series Card: Breaking Bad --> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img src="https://via.placeholder.com/350x200?text=Breaking+Bad" class="card-img-top" alt="Breaking Bad"> <div class="card-body"> <h5 class="card-title">Breaking Bad</h5> <p class="card-text">A high school chemistry teacher turned methamphetamine producer.</p> <a href="series.html?series=breaking-bad" class="btn btn-primary">Watch Now</a> </div> </div> </div> <!-- Series Card: Money Heist --> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img src="https://via.placeholder.com/350x200?text=Money+Heist" class="card-img-top" alt="Money Heist"> <div class="card-body"> <h5 class="card-title">Money Heist</h5> <p class="card-text">A criminal mastermind plans the biggest heist in history.</p> <a href="series.html?series=money-heist" class="btn btn-primary">Watch Now</a> </div> </div> </div> <!-- Series Card: Game of Thrones --> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img src="https://via.placeholder.com/350x200?text=Game+of+Thrones" class="card-img-top" alt="Game of Thrones"> <div class="card-body"> <h5 class="card-title">Game of Thrones</h5> <p class="card-text">Noble families vie for control of the Iron Throne in a mythical land.</p> <a href="series.html?series=game-of-thrones" class="btn btn-primary">Watch Now</a> </div> </div> </div> <!-- Series Card: The Witcher --> <div class="col-md-4"> <div class="card mb-4 shadow-sm"> <img src="https://via.placeholder.com/350x200?text=The+Witcher" class="card-img-top" alt="The Witcher"> <div class="card-body"> <h5 class="card-title">The Witcher</h5> <p class="card-text">A monster hunter struggles to find his place in a turbulent world.</p> <a href="series.html?series=the-witcher" class="btn btn-primary">Watch Now</a> </div> </div> </div> </div> </div> <!-- Footer --> <footer class="bg-dark text-white text-center py-3"> © 2025 TubeSeries. All rights reserved. </footer> <!-- Bootstrap and dependencies (jQuery and Popper.js) --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
This page reads the URL parameter (for example, ?series=breaking-bad
), loads the corresponding data from a hard-coded JavaScript object, and displays a video player along with a list of episodes. When you click an episode, the video changes accordingly.
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Series Details - TubeSeries</title> <!-- Bootstrap CSS (v4.5) --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style> /* Responsive video container */ .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="index.html">TubeSeries</a> </nav> <!-- Main Content --> <div class="container mt-4" id="seriesContent"> <!-- Content will be injected by JavaScript based on the series selected --> </div> <!-- Footer --> <footer class="bg-dark text-white text-center py-3 mt-4"> © 2025 TubeSeries. All rights reserved. </footer> <script> // Helper: Parse URL query string into an object. function getQueryParams() { var params = {}; window.location.search.substr(1).split("&").forEach(function(item) { var pair = item.split("="); params[pair[0]] = decodeURIComponent(pair[1]); }); return params; } // Sample series data. var seriesData = { "stranger-things": { title: "Stranger Things", description: "A group of kids uncover supernatural mysteries in their small town.", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", episodes: [ { title: "Episode 1: The Vanishing of Will Byers", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" }, { title: "Episode 2: The Weirdo on Maple Street", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" } ] }, "breaking-bad": { title: "Breaking Bad", description: "A high school chemistry teacher turned methamphetamine producer.", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4", episodes: [ { title: "Episode 1: Pilot", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" }, { title: "Episode 2: Cat's in the Bag...", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" } ] }, "money-heist": { title: "Money Heist", description: "A criminal mastermind plans the biggest heist in history.", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4", episodes: [ { title: "Episode 1: The Heist Begins", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" }, { title: "Episode 2: The Plan Unfolds", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4" } ] }, "game-of-thrones": { title: "Game of Thrones", description: "Noble families vie for control of the Iron Throne in a mythical land.", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4", episodes: [ { title: "Episode 1: Winter Is Coming", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" }, { title: "Episode 2: The Kingsroad", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" } ] }, "the-witcher": { title: "The Witcher", description: "A monster hunter struggles to find his place in a turbulent world.", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4", episodes: [ { title: "Episode 1: The End's Beginning", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" }, { title: "Episode 2: Four Marks", video: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" } ] } }; // Get the series key from the URL, e.g., ?series=breaking-bad. var params = getQueryParams(); var seriesKey = params.series; if (seriesData[seriesKey]) { var series = seriesData[seriesKey]; var content = '<h1>' + series.title + '</h1>'; content += '<p>' + series.description + '</p>'; content += '<div class="video-container mb-4">'; content += '<video controls><source src="' + series.video + '" type="video/mp4">Your browser does not support the video tag.</video>'; content += '</div>'; content += '<h3>Episodes</h3>'; content += '<div class="list-group">'; series.episodes.forEach(function(ep, index) { content += '<a href="#" class="list-group-item list-group-item-action" onclick="playEpisode(\'' + seriesKey + '\', ' + index + '); return false;">' + ep.title + '</a>'; }); content += '</div>'; document.getElementById('seriesContent').innerHTML = content; } else { document.getElementById('seriesContent').innerHTML = '<p>Series not found. <a href="index.html">Go back to Home</a></p>'; } // Function to change the video source when an episode is selected. function playEpisode(seriesKey, episodeIndex) { var series = seriesData[seriesKey]; var episode = series.episodes[episodeIndex]; var videoContainer = document.querySelector('.video-container'); videoContainer.innerHTML = '<video controls autoplay><source src="' + episode.video + '" type="video/mp4">Your browser does not support the video tag.</video>'; } </script> </body> </html>
File Structure:
Place both files (index.html
and series.html
) in the same folder.
Testing:
Open index.html in your browser. You’ll see a grid of popular web series. Clicking “Watch Now” on a card will load series.html with the appropriate query parameter. The series detail page displays a video player (using a sample video URL) and a list of episodes. Clicking an episode will update the video player.
Customization:
• Replace the placeholder images (currently provided by via.placeholder.com) with actual thumbnails.
• Update the video URLs with your own video sources or embeds.
• Expand the design and functionality (e.g., add user authentication, search functionality, or a database-backed back end) as needed.
This sample is meant to serve as a starting point for a “tube website” where people can browse and watch web series. Enjoy coding and feel free to extend the functionality as you see fit!