SDLP

mail@pastecode.io avatar
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>