I'll create a YouTube-like HLS video player using video.js, which is a popular library for building video players with HLS support. YouTube-like HLS Player

Sample HLS Video Stream

12,345 views Oct 15, 2023

Demo Channel

1.2M subscribers

This is a demonstration of an HLS video player using video.js with a YouTube-like interface.

HLS (HTTP Live Streaming) is a protocol developed by Apple that enables adaptive bitrate streaming.

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', Arial, sans-serif; } body { background-color: #f9f9f9; color: #030303; } .container { max-width: 1200px; margin: 20px auto; padding: 0 20px; } .player-container { width: 100%; background-color: #000; margin-bottom: 20px; border-radius: 4px; overflow: hidden; } /* Video.js custom styles */ .video-js { width: 100%; height: auto; aspect-ratio: 16/9; } .video-js .vjs-big-play-button { background-color: rgba(0, 0, 0, 0.45); border: none; border-radius: 50%; height: 60px; width: 60px; line-height: 60px; margin-left: -30px; margin-top: -30px; } .video-js:hover .vjs-big-play-button { background-color: rgba(255, 0, 0, 0.9); } /* Video info section */ .video-info { padding: 20px 0; border-bottom: 1px solid #e5e5e5; } .video-title { font-size: 18px; font-weight: 500; margin-bottom: 10px; } .video-meta { display: flex; color: #606060; font-size: 14px; margin-bottom: 15px; } .views { margin-right: 10px; } .actions { display: flex; justify-content: flex-start; padding: 10px 0; border-bottom: 1px solid #e5e5e5; margin-bottom: 15px; } .action-btn { background: none; border: none; padding: 8px 16px; margin-right: 10px; cursor: pointer; font-size: 14px; color: #606060; display: flex; align-items: center; border-radius: 18px; } .action-btn:hover { background-color: #f2f2f2; } .icon { display: inline-block; width: 24px; height: 24px; margin-right: 6px; background-color: #606060; mask-size: cover; -webkit-mask-size: cover; } .icon.like { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z'%3E%3C/path%3E%3C/svg%3E"); } .icon.dislike { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z'%3E%3C/path%3E%3C/svg%3E"); } .icon.share { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'%3E%3C/path%3E%3C/svg%3E"); } .icon.save { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z'%3E%3C/path%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z'%3E%3C/path%3E%3C/svg%3E"); } .channel-info { display: flex; align-items: center; padding: 15px 0; margin-bottom: 15px; } .channel-avatar { width: 48px; height: 48px; border-radius: 50%; background-color: #ff0000; margin-right: 15px; } .channel-details { flex-grow: 1; } .channel-name { font-size: 14px; font-weight: 500; margin-bottom: 5px; } .subscribers { font-size: 13px; color: #606060; } .subscribe-btn { background-color: #cc0000; color: white; border: none; padding: 10px 16px; border-radius: 2px; font-size: 14px; font-weight: 500; cursor: pointer; text-transform: uppercase; } .subscribe-btn:hover { background-color: #aa0000; } .description { font-size: 14px; line-height: 1.4; color: #606060; } .description p { margin-bottom: 10px; } /* Responsive adjustments */ @media (max-width: 768px) { .video-title { font-size: 16px; } .actions { flex-wrap: wrap; } .action-btn { padding: 6px 12px; font-size: 13px; } .channel-avatar { width: 40px; height: 40px; } } document.addEventListener('DOMContentLoaded', function() { // Initialize the player const player = videojs('my-video', { fluid: true, responsive: true, html5: { hls: { overrideNative: true } } }); // Apply YouTube theme player.addClass('vjs-theme-youtube'); // Sample HLS streams - you can replace with your own HLS stream URL const hlsStreams = [ { name: 'Big Buck Bunny (Low)', src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8' }, { name: 'Sintel Trailer (Medium)', src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8' }, { name: 'Tears of Steel (High)', src: 'https://cdn.theoplayer.com/video/tears_of_steel/playlist.m3u8' } ]; // Set the default source player.src({ src: hlsStreams[0].src, type: 'application/x-mpegURL' }); // Create a source selector menu createSourceSelector(player, hlsStreams); // Add custom controls behavior addCustomControls(player); // Handle player events handlePlayerEvents(player); }); function createSourceSelector(player, streams) { // Create a container for the source selector const container = document.createElement('div'); container.className = 'source-selector'; container.style.cssText = 'position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,0.7); border-radius: 4px; padding: 5px;'; // Create a button to toggle the source menu const button = document.createElement('button'); button.textContent = 'Quality'; button.style.cssText = 'background: none; border: none; color: white; cursor: pointer; font-size: 14px;'; // Create the dropdown menu const menu = document.createElement('div'); menu.className = 'source-menu'; menu.style.cssText = 'display: none; position: absolute; top: 100%; right: 0; background: rgba(0,0,0,0.9); border-radius: 4px; padding: 5px; width: 150px;'; // Add source options to the menu streams.forEach(stream => { const option = document.createElement('div'); option.textContent = stream.name; option.style.cssText = 'padding: 5px 10px; color: white; cursor: pointer; font-size: 14px;'; option.addEventListener('click', () => { player.src({ src: stream.src, type: 'application/x-mpegURL' }); player.play(); menu.style.display = 'none'; }); menu.appendChild(option); }); // Toggle menu display on button click button.addEventListener('click', () => { menu.style.display = menu.style.display === 'none' ? 'block' : 'none'; }); // Add elements to the container container.appendChild(button); container.appendChild(menu); // Add the container to the player player.el().appendChild(container); } function addCustomControls(player) { // Add a custom button to toggle theater mode const theaterButton = document.createElement('button'); theaterButton.className = 'vjs-control vjs-button theater-mode-button'; theaterButton.innerHTML = 'Theater Mode'; theaterButton.style.cssText = 'font-size: 1.8em; cursor: pointer;'; theaterButton.addEventListener('click', () => { const container = document.querySelector('.container'); if (container.style.maxWidth === '100%') { container.style.maxWidth = '1200px'; theaterButton.querySelector('.vjs-icon-placeholder').textContent = '[]'; } else { container.style.maxWidth = '100%'; theaterButton.querySelector('.vjs-icon-placeholder').textContent = '[]'; } }); // Add the button to the control bar const controlBar = player.getChild('controlBar'); controlBar.addChild('button', { el: theaterButton }); } function handlePlayerEvents(player) { // Update video info when metadata is loaded player.on('loadedmetadata', () => { // You could update video info based on metadata here console.log('Video metadata loaded'); }); // Track play progress player.on('timeupdate', () => { const currentTime = player.currentTime(); const duration = player.duration(); const progressPercent = (currentTime / duration) * 100; // You could update a custom progress bar or other UI elements here console.log(`Progress: ${progressPercent.toFixed(2)}%`); }); // Handle video end player.on('ended', () => { console.log('Video ended'); // You could implement autoplay next video functionality here }); // Handle errors player.on('error', () => { console.error('Video playback error'); // You could display a custom error message here }); } // Add event listeners for the action buttons document.querySelectorAll('.action-btn').forEach(button => { button.addEventListener('click', function() { const action = this.textContent.trim(); console.log(`${action} button clicked`); // You would implement actual functionality here if (action.includes('Like')) { this.classList.toggle('active'); } else if (action.includes('Subscribe')) { this.textContent = this.textContent === 'Subscribe' ? 'Subscribed' : 'Subscribe'; this.style.backgroundColor = this.textContent === 'Subscribed' ? '#606060' : '#cc0000'; } }); }); // Subscribe button functionality document.querySelector('.subscribe-btn').addEventListener('click', function() { this.textContent = this.textContent === 'Subscribe' ? 'Subscribed' : 'Subscribe'; this.style.backgroundColor = this.textContent === 'Subscribed' ? '#606060' : '#cc0000'; }); # YouTube-like HLS Video Player This project implements a YouTube-like video player with HLS (HTTP Live Streaming) support using video.js. ## Features - HLS video streaming support - YouTube-inspired UI and controls - Responsive design - Quality selector for different streams - Theater mode - Like, dislike, share, and save buttons - Channel information section ## Technologies Used - HTML5 - CSS3 - JavaScript - video.js - For the video player - videojs-http-streaming - For HLS support - videojs-youtube-theme - For YouTube-like styling ## Usage 1. Open `index.html` in a web browser 2. The player will load with a default HLS stream 3. Use the quality selector to switch between different streams 4. Interact with the player controls and UI elements ## Sample HLS Streams The player comes with three sample HLS streams: - Big Buck Bunny (Low quality) - Sintel Trailer (Medium quality) - Tears of Steel (High quality) You can replace these with your own HLS stream URLs in the `script.js` file. ## Customization You can customize the player by: - Modifying the CSS in `styles.css` - Adding more features in `script.js` - Changing the layout in `index.html` ## License This project is available for personal and commercial use. This YouTube-like HLS video player includes: 1. A responsive video player with HLS support using video.js 2. YouTube-inspired UI with video info, like/dislike buttons, and channel section 3. Quality selector to switch between different HLS streams 4. Theater mode toggle 5. Custom controls and event handling To use your own HLS streams, simply replace the URLs in the `hlsStreams` array in script.js with your own m3u8 playlist URLs.