73 lines
2.4 KiB
Cheetah
73 lines
2.4 KiB
Cheetah
<section class="section">
|
|
<div class="container">
|
|
<div class="box">
|
|
<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}}
|
|
<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>
|
|
<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>
|
|
<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>
|
|
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';
|
|
if (Hls.isSupported()) {
|
|
var hls = new Hls();
|
|
hls.loadSource("{{.item.HLSURL}}");
|
|
hls.attachMedia(video);
|
|
} else {
|
|
video.src = "{{.item.HLSURL}}";
|
|
}
|
|
});
|
|
|
|
closeBtn.addEventListener('click', function() {
|
|
if (video.pause) video.pause();
|
|
playerBlock.style.display = 'none';
|
|
detailBlock.style.display = 'block';
|
|
// reset source to stop download
|
|
video.src = '';
|
|
});
|
|
});
|
|
</script>
|