Use "sampotts/plyr" library instead of "clappr/clappr"

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
hossainemruz 2021-04-06 01:09:28 +06:00
parent 0dafd655db
commit 3e9c936698
6 changed files with 31 additions and 23 deletions

View file

@ -1,19 +1,13 @@
<div class="container">
<div id="player-wrapper" class="{{ .Get 1 }}"></div>
</div>
{{ $src := .Get "src" }}
{{ $type := .Get "type" }}
{{/*
A page can have multiple videos. We need to generate unique id for them.
Here, we are generating a sequence from 1 to 200 and taking the first element after a shuffle.
This will give a random number in most cases. However, if the page has many videos, we might have a collision.
We should find a better approach for doing this.
*/}}
{{ $randNumber := index (seq 200 | shuffle) 0 }}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js">
</script>
<script>
var playerElement = document.getElementById("player-wrapper");
var player = new Clappr.Player({
source: {{ .Get 0 }},
mute: true,
height: 360,
width: 640
});
player.attachTo(playerElement);
</script>
<video class="video-player" id="video-{{ $randNumber }}" playsinline controls>
<source src="{{ $src }}" type="{{ $type | default "video/mp4" }}" />
</video>