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>