41 lines
1.0 KiB
HTML
41 lines
1.0 KiB
HTML
{{ $id := .Get "id" }}
|
|
<link href="/css/vendor/video-js.min.css" rel="stylesheet">
|
|
<script src="/js/videojs/video.min.js"></script>
|
|
|
|
<div class="responsive-video-container">
|
|
<video
|
|
id="{{ $id }}"
|
|
class="video-js vjs-default-skin vjs-big-play-centered"
|
|
controls
|
|
preload="auto"
|
|
width="640"
|
|
height="360"
|
|
poster="/videos/hls/{{ $id }}/poster.webp"
|
|
data-setup='{"fluid": true}'>
|
|
<source src="/videos/hls/{{ $id }}/index.m3u8" type="video/mp4">
|
|
<p class="vjs-no-js">
|
|
To view this video please enable JavaScript, and consider upgrading to a
|
|
web browser that
|
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
|
</p>
|
|
</video>
|
|
</div>
|
|
|
|
<style>
|
|
.responsive-video-container {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.video-js {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16/9;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var player = videojs('{{ $id }}');
|
|
});
|
|
</script> |