up

templates/media_detail.pages.tmpl

@@ -1,23 +1,19 @@
 <section class="section">
   <div class="container">
     <div class="box">
+
+      <!-- Détail avant lecture -->
       <div id="detail-block">
         <div class="columns is-vcentered">
-          <!-- Thumbnail column -->
           <div class="column is-one-third">
             <figure class="image is-3by4">
               <img src="{{.item.ThumbURL}}" alt="{{.item.Title}}" />
             </figure>
           </div>
-          <!-- Details & Play button -->
           <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}}
+            {{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>
@@ -25,22 +21,23 @@
           </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;">
-            <source src="{{.item.HLSURL}}" type="application/vnd.apple.mpegURL">
-            Votre navigateur ne supporte pas la lecture HLS.
-          </video>
+          <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');
@@ -52,21 +49,26 @@
     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("{{.item.HLSURL}}");
+        hls.loadSource(url);
         hls.attachMedia(video);
+      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
       } else {
-        video.src = "{{.item.HLSURL}}";
+        console.error('HLS non supporté');
       }
+      playBtn.style.display = 'none';
     });
 
     closeBtn.addEventListener('click', function() {
-      if (video.pause) video.pause();
+      if (!video.paused) video.pause();
+      video.src = '';
       playerBlock.style.display = 'none';
       detailBlock.style.display = 'block';
-      // reset source to stop download
-      video.src = '';
+      playBtn.style.display = 'inline-flex';
     });
   });
 </script>
+