shelfy/templates/media_detail.pages.tmpl

<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>