tag:blogger.com,1999:blog-4832877972311685943Wed, 06 Dec 2023 03:39:40 +0000https://player-hls.blogspot.com/noreply@blogger.com (M3U8 PLAYER)Blogger1125tag:blogger.com,1999:blog-4832877972311685943.post-5398270369645613965Tue, 05 Dec 2023 16:34:00 +00002023-12-05T08:38:21.946-08:00 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>YashRajPW</title> <script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest'></script> <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.jsdelivr.net/gh/ash314314/image-Cdn@main/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.jsdelivr.net/gh/ash314314/image-Cdn@main/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.jsdelivr.net/gh/ash314314/image-Cdn@main/favicon-16x16.png"> <link rel="manifest" href="https://cdn.jsdelivr.net/gh/ash314314/image-Cdn@main/site.webmanifest"> <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css"> <script src="https://cdn.plyr.io/3.7.8/plyr.js"></script> <noscript> <h2>JavaScript is disabled! Please enable JavaScript in your web browser.</h2> <style type="text/css"> .container { display: none; } </style> </noscript> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest'></script> <style> .container { max-width: 800px; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); text-align: center; } .thumbnail { max-width: 100%; height: auto; margin-bottom: 20px; } h1 { color: #000000; /* Blue text color */ } p { color: #333; /* Dark gray text color */ margin-bottom: 20px; } select { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; /* Light gray border */ border-radius: 5px; background-color: #fff; /* White background */ } .plyr { --plyr-color-main: #000000; } button { display: block; width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #000000; /* Blue button background */ color: #fff; /* White text color */ cursor: pointer; margin-bottom: 10px; } button:hover { background-color: #00000080; /* Darker blue on hover */ } /* ... Your existing CSS ... */ /* Media queries for responsive design */ @media (max-width: 768px) { /* Adjust styles for smaller screens (e.g., tablets) */ .container { padding: 10px; } } @media (max-width: 480px) { /* Styles for smaller screens (e.g., smartphones) */ .container { padding: 10px; max-width: 90%; /* Reduce max width to create gaps on left and right */ margin: 0 auto; /* Center the container */ } h1 { font-size: 24px; } p { font-size: 16px; } select, button { font-size: 14px; } } /* Additional mobile-specific styles */ @media (max-width: 320px) { /* Further adjustments for smaller screens (e.g., small smartphones) */ h1 { font-size: 20px; } p { font-size: 14px; } } .telegram-float { position: fixed; bottom: 20px; right: 20px; z-index: 1000; } .telegram-icon { width: 60px; height: 60px; border-radius: 50%; background-color: #000000; display: flex; justify-content: center; align-items: center; animation-name: pulse; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); } 80% { box-shadow: 0 0 0 14px rgba(0, 136, 204, 0); } } .telegram-icon svg { fill: #fff; width: 30px; height: 30px; } .hide{ display: none; } .popup-container { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); z-index: 1000; max-width: 90%; max-height: 80vh; /* 80% of the viewport height */ width: 600px; overflow-y: auto; /* Enable vertical scrolling */ } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 900; } .close-btn { position: absolute; top: 10px; right: 10px; cursor: pointer; } .video-container { position: relative; overflow: hidden; padding-bottom: 56.25%; /* 16:9 aspect ratio */ margin-bottom: 20px; } iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media (max-width: 768px) { .popup-container { width: 90%; } } .close-btn-container { position: absolute; top: 10px; right: 10px; cursor: pointer; z-index: 1; } .close-btn { font-size: 20px; padding: 5px 10px; background-color: #ccc; border-radius: 5px; } /* Custom CSS to hide volume control */ .plyr__controls .plyr__volume { display: none; } .button { background-color: #000000; color: #fff; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 5px; cursor: pointer; border-radius: 4px; } .button:hover { background-color: #00000080; } /* Add this CSS code to make the popup responsive */ .popup-container { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; background-color: #f5f5f5; padding: 20px; border: 1px solid #ddd; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); max-width: 80%; /* Adjust the maximum width as needed */ width: 300px; /* Set a default width for smaller screens */ text-align: center; } /* Add this CSS code to make the close button responsive */ .close-btn-container { position: absolute; top: 10px; right: 10px; cursor: pointer; } /* Add this CSS code to make the popup responsive on smaller screens */ @media screen and (max-width: 600px) { .popup-container { max-width: 90%; /* Adjust the maximum width for smaller screens */ width: 80%; /* Set a default width for smaller screens */ } } </style> <div class="container"> <div class="content"> <input type="text" id="manualM3u8Input" placeholder="Enter M3U8 Link" style="width: auto;"> <br> <br> <button id="manualM3u8Button">Load Video</button> <video id="player" controls> <!-- Video source will be added dynamically using Plyr --> </video> <h2>Play Download Video🚀</h2> <select id="playHLSQualitySelector"> </select> <button id="playHLSButton">Play Here</button> <div> <button id="copyButton">Copy Link</button> <button id="openVLC">Open with VLC</button> <button id="openMXPlayerFree">Open with MX Player</button> <button id="openMXPlayerPro">Open with MX Player Pro</button> <button id="open1DM">Open with 1DM</button> </div> </div> </div> <script> document.addEventListener("DOMContentLoaded", function () { const video = document.getElementById('player'); const qualitySelector = document.getElementById('playHLSQualitySelector'); const playButton = document.getElementById('playHLSButton'); const copyButton = document.getElementById('copyButton'); const openVLCButton = document.getElementById('openVLC'); const openMXPlayerFreeButton = document.getElementById('openMXPlayerFree'); const openMXPlayerProButton = document.getElementById('openMXPlayerPro'); const open1DMButton = document.getElementById('open1DM'); const manualM3u8Input = document.getElementById('manualM3u8Input'); const manualM3u8Button = document.getElementById('manualM3u8Button'); let hls; let player; function initializePlyr() { player = new Plyr('#player', { captions: { active: true, update: true, language: 'auto' }, controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen'], }); } function playVideo(url) { if (Hls.isSupported()) { if (hls) { hls.destroy(); } hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); video.play(); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = url; video.addEventListener('loadedmetadata', function () { video.play(); }); } } function updateQualityDropdowns(m3u8Link) { // Clear existing options qualitySelector.innerHTML = ''; // Extract the filename from the m3u8 link const filename = m3u8Link.substring(m3u8Link.lastIndexOf("/") + 1); // Extract the name before the underscore const nameBeforeUnderscore = filename.substring(0, filename.lastIndexOf("_")); // Construct the base URL const baseURL = "https://lec.pages.dev/"; // Add quality options to the selection dropdown const qualityOptions = ["Auto", "240", "360", "480", "720"]; qualityOptions.forEach(option => { // Display "Auto" in the dropdown, but use "_master" in the link const resolution = option === "Auto" ? "master" : option; // Add the quality option to the HLS selector const hlsOption = document.createElement('option'); hlsOption.value = resolution === "master" ? "Auto" : resolution + "p"; hlsOption.dataset.videoUrl = resolution === "master" ? `${baseURL}${nameBeforeUnderscore}_master.m3u8` : `${baseURL}${nameBeforeUnderscore}_${resolution}.m3u8`; hlsOption.textContent = resolution === "master" ? "Auto" : resolution + "p"; // Display resolution with "p" suffix qualitySelector.appendChild(hlsOption); // Automatically play the video if "Auto" is selected if (option === "Auto") { playVideo(hlsOption.dataset.videoUrl); } }); } // Event listener for the "Play M3U8 Video with HLS.js" button playButton.addEventListener('click', function () { const selectedQualityOption = qualitySelector.options[qualitySelector.selectedIndex]; const m3u8Url = selectedQualityOption.getAttribute('data-video-url'); playVideo(m3u8Url); }); // Event listener for the "Copy Link" button copyButton.addEventListener('click', function () { const selectedQualityOption = qualitySelector.options[qualitySelector.selectedIndex]; const videoUrl = selectedQualityOption.getAttribute('data-video-url'); // Create a temporary input element to copy the text to clipboard const tempInput = document.createElement('input'); tempInput.value = videoUrl; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); // Provide user feedback (you can customize this part) alert('Link copied to clipboard!'); }); // Event listener for the "Open with VLC" button openVLCButton.addEventListener('click', function () { const selectedQualityOption = qualitySelector.options[qualitySelector.selectedIndex]; const videoUrl = selectedQualityOption.getAttribute('data-video-url'); window.open('vlc://' + videoUrl); }); // Event listener for the "Open with MX Player Free" button openMXPlayerFreeButton.addEventListener('click', function () { openInMXPlayer('com.mxtech.videoplayer.ad'); }); // Event listener for the "Open with MX Player Pro" button openMXPlayerProButton.addEventListener('click', function () { openInMXPlayer('com.mxtech.videoplayer.pro'); }); // Event listener for the "Open with 1DM" button open1DMButton.addEventListener('click', function () { const selectedQualityOption = qualitySelector.options[qualitySelector.selectedIndex]; const videoUrl = selectedQualityOption.getAttribute('data-video-url'); const intentUrl = 'intent:' + videoUrl + '#Intent;package=idm.internet.download.manager;end'; window.open(intentUrl); }); // General function to open MX Player with a specific package name function openInMXPlayer(packageName) { const selectedQualityOption = qualitySelector.options[qualitySelector.selectedIndex]; const videoUrl = selectedQualityOption.getAttribute('data-video-url'); // Create an intent URL for MX Player const intentUrl = `intent:${videoUrl}#Intent;package=${packageName};end`; // Open the intent URL window.open(intentUrl, '_blank'); } // Event listener for the "Load Video" button to manually input M3U8 link manualM3u8Button.addEventListener('click', function () { const manualM3u8Link = manualM3u8Input.value.trim(); if (manualM3u8Link) { updateQualityDropdowns(manualM3u8Link); } else { alert('Please enter a valid M3U8 link.'); } }); // Initialize Plyr.io initializePlyr(); // Extract the m3u8 link from the URL const urlParams = new URLSearchParams(window.location.search); const m3u8Link = urlParams.get("m"); if (m3u8Link) { updateQualityDropdowns(m3u8Link); } else { // Invalid URL alert('Invalid URL format. Please make sure the URL contains the "m" query parameter with a valid m3u8 link.'); } }); document.addEventListener("DOMContentLoaded", function () { // ... (your existing JavaScript code) // Toggle navigation menu on button click document.getElementById('toggleButton').addEventListener('click', function () { const navbar = document.querySelector('.navbar'); navbar.classList.toggle('show'); }); }); </script> https://player-hls.blogspot.com/2023/12/m3u8-player.htmlnoreply@blogger.com (M3U8 PLAYER)0