I'd like to do everything through a self-created HTML website, written to support local file playback (mp3 audio/mp4 video). It's also should be possible to play radio streams. This wouldn't require a media player like VLC/WMP, etc., since the interface is the HTML page and the Rainmeter WebView plugin itself. I'm truly grateful for any support. ![:rosegift:]( "Rose Gift")
![:great:]( "Great")
![:thumbup:]( "Thumbs Up")
![:givelove:]( "Give Love")
Another tool would be to read the metadata via HTML.
-Cover
-Title
-Artist
--------------------------------------------------------------------------------
New-Version
Another tool would be to read the metadata via HTML.
-Cover
-Title
-Artist
ezgif-8bbcc64189f743.gif
Old-Website-CodeCode:
<!DOCTYPE html><html lang="de"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HLS Media Player</title> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <!-- HLS.js einbinden --> <style> :root { --text-color: #007BCF; } body { font-family: Arial, sans-serif; margin: 0; background-color: transparent; } .player-wrapper { position: relative; display: inline-block; width: 300px; /* Einheitliche Breite für Media Player */ } #mediaPlayer { display: block; width: 100%; /* Passt sich der Breite des Wrappers an */ height: auto; margin-top: 20px; } .file-input-container { position: relative; display: flex; align-items: center; margin-top: 25px; } .file-input-container label { cursor: pointer; color: var(--text-color); font-size: 24px; width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; } #fileName { position: absolute; top: -20px; left: 0; color: var(--text-color); font-size: 14px; width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; } #fileInput { display: none; } .url-input-container { display: none; position: relative; margin-left: 10px; align-items: center; } .url-input-container input { margin-left: 10px; width: 250px; font-size: 14px; color: var(--text-color); border: 1px solid var(--text-color); padding: 2px; } .url-input-container button { margin-left: 5px; font-size: 14px; background-color: var(--text-color); color: white; border: none; cursor: pointer; } </style></head><body> <div class="player-wrapper"> <!-- Media Player --> <video id="mediaPlayer" controls></video> <!-- Datei Auswahl --> <div class="file-input-container"> <span id="fileName">Bitte Datei auswählen</span> <label for="fileInput">📁</label> <input type="file" id="fileInput" accept="audio/*,video/*"> <label id="magnetLinkButton" style="cursor: pointer; margin-left: 10px;">🔗</label> </div> <!-- URL Eingabe --> <div class="url-input-container" id="urlInputContainer"> <input type="text" id="urlInput" placeholder="Webstream URL eingeben"> <button id="playUrlButton">▶</button> </div> </div> <script> const fileInput = document.getElementById('fileInput'); const mediaPlayer = document.getElementById('mediaPlayer'); const fileNameElement = document.getElementById('fileName'); const urlInputContainer = document.getElementById('urlInputContainer'); const urlInput = document.getElementById('urlInput'); const playUrlButton = document.getElementById('playUrlButton'); const magnetLinkButton = document.getElementById('magnetLinkButton'); // Datei auswählen und abspielen fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { fileNameElement.textContent = file.name; const url = URL.createObjectURL(file); mediaPlayer.src = url; mediaPlayer.play(); } else { fileNameElement.textContent = "Keine Datei ausgewählt"; } }); // Magnet-Link-Button: URL-Eingabe sichtbar machen magnetLinkButton.addEventListener('click', () => { urlInputContainer.style.display = urlInputContainer.style.display === 'none' ? 'flex' : 'none'; }); // HLS-Webstream abspielen const playHlsStream = (url) => { if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource(url); hls.attachMedia(mediaPlayer); hls.on(Hls.Events.MANIFEST_PARSED, () => { mediaPlayer.play(); }); } else if (mediaPlayer.canPlayType('application/vnd.apple.mpegurl')) { mediaPlayer.src = url; mediaPlayer.addEventListener('loadedmetadata', () => { mediaPlayer.play(); }); } else { alert('HLS wird von deinem Browser nicht unterstützt.'); } }; // Webstream abspielen bei Button-Klick playUrlButton.addEventListener('click', () => { const url = urlInput.value; if (url) { fileNameElement.textContent = "Webstream wird abgespielt"; playHlsStream(url); // HLS-Stream starten urlInputContainer.style.display = 'none'; // URL-Eingabefeld ausblenden } }); // Webstream abspielen bei Enter-Taste urlInput.addEventListener('keypress', (event) => { if (event.key === 'Enter') { const url = urlInput.value; if (url) { fileNameElement.textContent = "Webstream wird abgespielt"; playHlsStream(url); // HLS-Stream starten urlInputContainer.style.display = 'none'; // URL-Eingabefeld ausblenden } } }); </script></body></html>New-Version
ezgif-41bc24fc6a9de3.gif
Statistics: Posted by Rooky_89 — Yesterday, 11:04 pm