SDLP
unknown
html
6 months ago
7.4 kB
1
Indexable
Never
<!DOCTYPE html> <html> <!-- Métadonnées --> <head> <meta charset="utf-8" /> <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script> <script src="https://softvelum.com/player/releases/sldp-v2.24.1.min.js"></script> </head> <!-- Styles --> <style> .type-container { margin: 0 auto; text-align: center; } .player-container { margin: 0 auto; text-align: center; } .logo-container img { width: 100px; height: 100px; cursor: pointer; /* Ajout pour le curseur de souris */ } .active { background-color: greenyellow; color: white } </style> <!-- Corps du message --> <body> <!-- CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous" /> <link rel="stylesheet" href="https://vjs.zencdn.net/8.3.0/video-js.min.css" /> <!-- Title --> <br> <div class="header"> <h1 style="text-align: center">AIRMONT BOUQUET</h1> </div> <!-- Bouton Type Player --> <br> <div class="type-container"> <button id="hlsButton" onclick="selectPlayer('hls')">HLS</button> <button id="dashButton" onclick="selectPlayer('dash')">DASH</button> <button id="sldpButton" onclick="selectPlayer('sldp')">SLDP</button> </div> <!-- Player --> <br> <br> <div class="player-container"> <div id="player"></div> </div> <!-- URL --> <br> <br> <div class="logo-container"> <!-- Clock Reference --> <img src="https://media.istockphoto.com/id/952696392/fr/vectoriel/carte-de-test-de-t%C3%A9l%C3%A9vision.jpg?s=612x612&w=0&k=20&c=axZ2TRF-1hYqthrZZU8BuMzgEmgQlbpvudp7LBOhrJs=" alt="Clock Reference" onclick="setUrl('https://feeds.airmont.tv/clock/9999_CLOCK_REFERENCE/playlist.m3u8')"> <!-- CNN --> <img src="https://feeds.airmont.tv/logo_channels/cnn_international.png" alt="CNN" onclick="setUrl('https://feeds.airmont.tv/astra/6420_CNN_INTERNATIONAL/playlist.m3u8')" /> <!-- France 24 --> <img src="https://feeds.airmont.tv/logo_channels/france_24_ara.png" alt="France 24 Arabic" onclick="setUrl('https://feeds.airmont.tv/francemediamonde/6200_FRANCE_24_ARA/playlist.m3u8')"> <img src="https://feeds.airmont.tv/logo_channels/france_24_eng.png" alt="France 24 English" onclick=setUrl("https://feeds.airmont.tv/francemediamonde/6201_FRANCE_24_ENG/playlist.m3u8")"> <img src="https://feeds.airmont.tv/logo_channels/france_24_fre.png" alt="France 24 French" onclick="setUrl('https://feeds.airmont.tv/francemediamonde/6202_FRANCE_24_FRA/playlist.m3u8')"> <img src="https://feeds.airmont.tv/logo_channels/france_24_spa.png" alt="France 24 Spanish" onclick="setUrl('https://feeds.airmont.tv/francemediamonde/6203_FRANCE_24_SPA/playlist.m3u8')"> <!-- France Info --> <img src="https://feeds.airmont.tv/logo_channels/france_info.png" alt="France Info" onclick="setUrl('https://feeds.airmont.tv/tntfr/6325_FRANCE_INFO/playlist.m3u8')"> <!-- Trace TV --> <img src="https://feeds.airmont.tv/logo_channels/trace_urban.png" alt="Trace Urban Int." onclick="setUrl('https://feeds.airmont.tv/tracetv/6400_TRACE_URBAN_INT/playlist.m3u8')"> <img src="https://feeds.airmont.tv/logo_channels/trace_latina.png" alt="Trace Latina" onclick="setUrl('https://feeds.airmont.tv/tracetv/6401_TRACE_LATINA/playlist.m3u8')"> <img src="https://feeds.airmont.tv/logo_channels/trace_sport_stars.png" alt="Trace Sport Stars" onclick="setUrl('https://feeds.airmont.tv/tracetv/6402_TRACE_SPORT_STARS/playlist.m3u8')"> </div> <!-- JavaScript --> <script type="text/javascript"> // Sélection des boutons document.addEventListener("DOMContentLoaded", initPlayer("wss://feeds.airmont.tv/ws/clock/9999_CLOCK_REFERENCE",true)); var hlsButton = document.getElementById("hlsButton"); var dashButton = document.getElementById("dashButton"); var sldpButton = document.getElementById("sldpButton"); // Fonction pour mettre en évidence le bouton sélectionné function highlightButton(button) { // Réinitialiser la classe active sur tous les boutons hlsButton.classList.remove("active"); dashButton.classList.remove("active"); sldpButton.classList.remove("active"); // Ajouter la classe active au bouton sélectionné button.classList.add("active"); } // Fonction pour initialiser le lecteur en fonction du type sélectionné function selectPlayer(type) { var url = ""; // URL du flux vidéo correspondant au type sélectionné // Réinitialiser la classe active sur tous les boutons hlsButton.classList.remove("active"); dashButton.classList.remove("active"); sldpButton.classList.remove("active"); // Ajouter la classe active au bouton sélectionné if (type === "hls") { hlsButton.classList.add("active"); url = "https://feeds.airmont.tv/clock/9999_CLOCK_REFERENCE/playlist.m3u8"; } else if (type === "dash") { dashButton.classList.add("active"); url = "https://feeds.airmont.tv/clock/9999_CLOCK_REFERENCE/playlist.m3u8"; } else if (type === "sldp") { sldpButton.classList.add("active"); url = "https://feeds.airmont.tv/clock/9999_CLOCK_REFERENCE/playlist.m3u8"; } // Initialiser le lecteur avec l'URL spécifiée removePlayer(); initPlayer(url, true); } // Initialisation du Player function initPlayer(url, play) { if (play === true) { sldpPlayer = SLDP.init({ container: 'player', stream_url: url, buffering: 500, autoplay: true, muted: false, height: 360, width: 426, onError: function (error) { console.error('SLDP Player error:', error); } }); console.log('sld : ', sldpPlayer); } else { sldpPlayer = SLDP.init({ container: 'player', stream_url: url, buffering: 500, autoplay: false, muted: false, controls: false, height: 360, width: 426, onError: function (error) { console.error('SLDP Player error:', error); } }); console.log('sld : ', sldpPlayer); } } // Modification de l'URL du Player function setUrl(url) { removePlayer(); initPlayer(url, true); } // Suppression du Player function removePlayer() { sldpPlayer.destroy(function () { console.log('SLDP Player is destroyed.'); }); } </script> </body> </html>