shelfy/templates/media_detail.pages.tmpl

<section class="section">
  <div class="container">
    <div class="box">

      <!-- Détail avant lecture -->
      <div id="detail-block">
        <div class="columns is-vcentered">
          <div class="column is-one-third">
            <figure class="image is-3by4">
              <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" />
            </figure>
          </div>
          <div class="column">
            <h1 class="title">{{.item.Title}}</h1>
            {{with .item.Summary}}<p class="content">{{.}}</p>{{end}}
            {{with .item.DurationFmt}}<p class="subtitle is-6">Durée : {{.}}</p>{{end}}
            <button id="play-btn" class="button is-primary">
              <span class="icon"><i class="fas fa-play"></i></span>
              <span>Play</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Player après clic -->
      <div id="player-block" style="display:none;">
        <div class="box">
          <video id="video-player" controls autoplay style="width:100%; height:auto;"></video>
          <button id="close-btn" class="button is-light mt-4">
            <span class="icon"><i class="fas fa-times"></i></span>
            <span>Fermer</span>
          </button>
        </div>
      </div>

    </div>
  </div>
</section>

<script src="https://unpkg.com/hls.js@1.4.0"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var playBtn = document.getElementById('play-btn');
    var closeBtn = document.getElementById('close-btn');
    var detailBlock = document.getElementById('detail-block');
    var playerBlock = document.getElementById('player-block');
    var video = document.getElementById('video-player');

    playBtn.addEventListener('click', function() {
      detailBlock.style.display = 'none';
      playerBlock.style.display = 'block';
      var url = "{{.item.HLSURL}}";
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(video);
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = url;
      } else {
        console.error('HLS non supporté');
      }
      playBtn.style.display = 'none';
    });

    closeBtn.addEventListener('click', function() {
      if (!video.paused) video.pause();
      video.src = '';
      playerBlock.style.display = 'none';
      detailBlock.style.display = 'block';
      playBtn.style.display = 'inline-flex';
    });
  });
</script>