Last active
January 14, 2025 15:26
-
-
Save EyalSi/f47875d6b158ad880d1790a30ca75e28 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Live Stream</title> | |
| <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
| <style> | |
| #buywith-video { | |
| display: none; /* Initially hide the video element */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <video id="buywith-video" controls></video> | |
| <script> | |
| const liveID = 'PUT_HERE_THE_LIVE_ID'; // Replace with the actual session ID | |
| // Buywith video stream URLs: | |
| // - Shopwithme experience: https://video.buywith.com/{sessionID}/live.m3u8 | |
| // - Fullscreen host view: https://video.buywith.com/{sessionID}/fullscreen/live.m3u8 | |
| // - Desktop session view: https://video.buywith.com/{sessionID}/desktop/live.m3u8 | |
| const liveStreamUrl = `https://video.buywith.com/${liveID}/live.m3u8`; | |
| const video = document.getElementById('buywith-video'); | |
| let hls; // Declare HLS instance outside for reuse | |
| function startStream() { | |
| if (Hls.isSupported()) { | |
| if (!hls) { | |
| hls = new Hls(); | |
| hls.on(Hls.Events.ERROR, (event, data) => { | |
| if (data.type === Hls.ErrorTypes.NETWORK_ERROR) { | |
| console.error('Network error:', data.details); | |
| } | |
| }); | |
| hls.on(Hls.Events.LEVEL_LOADED, () => { | |
| console.log('HLS Level Loaded: Stream is ready!'); | |
| }); | |
| hls.on(Hls.Events.FRAG_LOADED, () => { | |
| console.log('Fragment Loaded'); | |
| }); | |
| } | |
| hls.loadSource(liveStreamUrl); | |
| hls.attachMedia(video); | |
| video.style.display = 'block'; // Show the video element once the stream starts | |
| // Play the video when it's ready | |
| video.muted = true; | |
| video.play().then(() => { | |
| console.log('Video started playing'); | |
| }).catch((error) => { | |
| console.error('Error playing video:', error); | |
| }); | |
| } else if (video.canPlayType('application/vnd.apple.mpegurl')) { | |
| video.src = liveStreamUrl; | |
| video.style.display = 'block'; | |
| video.muted = true; | |
| video.play().then(() => { | |
| console.log('Video started playing'); | |
| }).catch((error) => { | |
| console.error('Error playing video:', error); | |
| }); | |
| } else { | |
| console.error('HLS is not supported in this browser.'); | |
| } | |
| } | |
| // Polling function to check stream availability | |
| async function checkStreamAvailability() { | |
| try { | |
| const response = await fetch(liveStreamUrl, { method: 'HEAD' }); | |
| if (response.ok) { | |
| startStream(); | |
| } else if (response.status >= 400 && response.status < 500) { | |
| console.log('Stream not available. Retrying in 30 seconds...'); | |
| setTimeout(checkStreamAvailability, 30000); | |
| } | |
| } catch (error) { | |
| console.error('Error checking stream availability:', error); | |
| setTimeout(checkStreamAvailability, 30000); | |
| } | |
| } | |
| // Open live stream URL in a new tab when the video is clicked | |
| video.addEventListener('click', () => { | |
| window.open(liveStreamUrl, '_blank'); | |
| }); | |
| // Initial check when the page is loaded | |
| window.onload = checkStreamAvailability; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment