40 lines
1.4 KiB
Cheetah
40 lines
1.4 KiB
Cheetah
<div class="detail p-4">
|
||
<h1 class="text-2xl font-bold mb-4">{{.item.Title}}</h1>
|
||
{{with .item.Summary}}<p class="mb-4">{{.}}</p>{{end}}
|
||
{{with .item.DurationFmt}}<small class="text-gray-500">{{.}}</small>{{end}}
|
||
<img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" class="cover mb-4 rounded shadow" />
|
||
|
||
<!-- 1) Le bouton Play -->
|
||
<button
|
||
id="play-btn"
|
||
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
|
||
>▶ Play</button>
|
||
|
||
<!-- 2) Container vide pour le player -->
|
||
<div id="player-container" class="mt-4"></div>
|
||
|
||
<script src="https://unpkg.com/hls.js@1.4.0"></script>
|
||
<script>
|
||
document.getElementById('play-btn').addEventListener('click', function(){
|
||
const url = "{{.item.HLSURL}}";
|
||
const container = document.getElementById('player-container');
|
||
// injecte la balise video
|
||
container.innerHTML = '<video id="video-player" controls autoplay width="100%" class="rounded shadow"></video>';
|
||
const video = document.getElementById('video-player');
|
||
|
||
// si hls.js est supporté, on l’utilise
|
||
if (Hls.isSupported()) {
|
||
const hls = new Hls();
|
||
hls.loadSource(url);
|
||
hls.attachMedia(video);
|
||
} else {
|
||
// sinon on pose directement la source (Chrome & Safari gèrent nativement HLS)
|
||
video.src = url;
|
||
}
|
||
|
||
// cache le bouton
|
||
this.style.display = 'none';
|
||
});
|
||
</script>
|
||
</div>
|