You are a highly skilled web developer specializing in creating interactive and responsive web applications for live streaming and broadcast environments. You possess expert-level knowledge of HTML, CSS, JavaScript, and media streaming protocols. Your goal is to generate the complete HTML code for a functional, elegant, TV-like live player ready for use in a browser or OBS, incorporating the features and channel data provided. Do not summarize, skip, or condense any part of the code. Provide the code in complete, uninterrupted form. Include every necessary line, comment, and element to ensure the HTML is ready to use, copy, or deploy as a real web page. Do NOT shorten the code for brevity, for time, or for any other reason. Consider your answer is not complete until every required part is present, detailed, and in full. If any part is missing, brief, or incomplete, the response is not considered finished. Provide the code only, with no explanation or summary—just the full code. Treat 'finish' or 'complete' to mean nothing is omitted or abbreviated for any reason. Specifically, create a single, complete HTML file containing all necessary HTML, CSS (inline styling), and JavaScript code to implement the following features: 1. Core Structure: * HTML5 `<video>` element: Fullscreen, dominant video pane for the main live stream. * Container (`#tv-container`): Holds all elements (video, banner, controls, ticker, strip, clock) in a single responsive layout. * Responsive Design: The interface adapts to any screen size or OBS window without breaking. 2. Channel Management: * Channel Data Structure: ```js { name: "Channel Name", logo: "Short Name/Letter", url: "Stream URL" } ``` * All Real Streams: Channels pulled from the provided list. Use all channels provided, do not omit any. * Channel Strip (`#channel-strip`): * Horizontal carousel at bottom of screen. * Each channel shows logo/letter. * Hover effect: slightly enlarges thumbnail (`transform: scale(1.05)`). * Click a channel → switches the main video to that stream. 3. Channel Banner: * Overlay banner (`#channel-banner`) in top-left corner: * Displays logo and channel name. * Slight transparency (`rgba(0,0,0,0.6)`), rounded corners. * Updates dynamically when switching channels. 4. Video Controls: * Hover-activated overlay (`#control-overlay`): appears when hovering the video. * Buttons included: 1. Prev Channel (`⏮`): 2. Play/Pause (`⏯`): 3. Next Channel (`⏭`): 4. Volume Slider: range input (`0.0` to `1.0`). 5. Mute Button (`🔊/🔇`): 6. Fullscreen Button (`⛶`): * Transitions: Buttons have hover highlight effect (`background` changes). 5. News Ticker: * Horizontal scrolling ticker (`#news-ticker`) at the bottom above the channel strip. * Ticker text (`#ticker-text`) scrolls left infinitely using CSS `@keyframes`. * Include placeholder text: 'Breaking News: Local elections to be held next Tuesday.' * Designed to mimic real TV network scrolling updates. 6. Digital Clock: * Clock (`#clock`) in the top-right corner. * Shows current system time in HH:MM:SS format. * Updates every second with `setInterval`. * Semi-transparent background for readability. 7. Smooth Transitions: * When switching channels: * `video.style.opacity` transitions from 0 → 1 for smooth fade effect. 8. JavaScript Functionality: * Channel Switching Logic: * `switchChannel(index)` updates the video source, banner, and logo. * Prev/Next buttons cycle through channels using modulo arithmetic. * Play/Pause Handling: toggles button text dynamically. * Volume & Mute Handling: volume slider synced with video element; mute button toggles icon. * Fullscreen API Integration: `requestFullscreen()` and `exitFullscreen()`. * Clock Update: `setInterval` updates every second. * Dynamic Channel Strip: generated from the `channels` array automatically. * MP4/HLS Auto-Switching: Implement a mechanism to detect if the video source is MP4 or HLS (M3U8). If MP4, use the standard `<video>` tag. If HLS, use hls.js for playback. Implement automatic switching and error handling if a stream fails. Provide inline comments explaining how auto-switching is implemented. 9. Styling: * Color Scheme: Dark TV-like aesthetic (`#111` background, dark overlays). * Rounded Corners: banners, channel thumbnails, control overlay. * Hover Effects: channels and buttons subtly highlight on hover. * Typography: clean sans-serif for modern TV look, monospace for clock. * Fade Animations: smooth transition for video opacity and channel hover. * Responsive: works in full screen or windowed mode without breaking layout. 10. User Interaction: * Mouse / Click Controls: fully interactive, no external library required. * Keyboard Compatibility: basic functionality could be added (optional). * OBS Ready: can be added as a browser source directly. 11. Channel Data Integration: * Use the provided channel data to populate the channels array. * Each channel has: * `name` → displayed in banner. * `logo` → displayed in banner and channel strip (use first letter of name if no logo provided). * `url` → HLS/M3U8 or MP4 stream URL. * The player handles any number of channels, dynamically populating the strip. 12. Accessibility: Ensure basic accessibility by providing ARIA labels for interactive elements and semantic HTML structure where appropriate. Channel Data: ``` [ { name: "Petticoat Junction S04E17", logo: "PJ", url: "https://archive.org/download/Petticoat_Junction_Series/Petticoat%20Junction%20-%20Season%204/Petticoat%20Junction%20-%204x17%20-%20Girls!%20Girls!%20Girls!.mp4" }, { name: "Petticoat Junction S04E18", logo: "PJ", url: "https://archive.org/download/Petticoat_Junction_Series/Petticoat%20Junction%20-%20Season%204/Petticoat%20Junction%20-%204x18%20-%20Temperance%2C%20Temperance.mp4" }, { name: "ESPN NEWS", logo: "EN", url: "https://fl3.moveonjoy.com/ESPN_NEWS/index.m3u8" }, { name: "Fox Business Network", logo: "FBN", url: "https://fl3.moveonjoy.com/FOX_Business_Network/index.m3u8" }, { name: "Fox News Channel (FL1)", logo: "FNC", url: "https://fl1.moveonjoy.com/FOX_NEWS_CHANNEL/index.m3u8" }, { name: "Fox News Channel (FL3)", logo: "FNC", url: "https://fl3.moveonjoy.com/FOX_NEWS_CHANNEL/index.m3u8" }, { name: "Fox News Channel (FL4)", logo: "FNC", url: "https://fl4.moveonjoy.com/FOX_NEWS_CHANNEL/index.m3u8" }, { name: "Fox News Channel (FL5)", logo: "FNC", url: "https://fl5.moveonjoy.com/FOX_NEWS_CHANNEL/index.m3u8" }, { name: "Fox News Channel (FL6)", logo: "FNC", url: "https://fl6.moveonjoy.com/FOX_NEWS_CHANNEL/index.m3u8" } ] ``` 13. Output the complete, ready-to-use HTML file with all channels populated and the switching logic implemented, optimized for direct use in OBS or a web browser. Do not use any external CSS or JavaScript files; all styling and scripting must be inline within the HTML file. The player must be completely functional upon opening the HTML file.