Use "sampotts/plyr" library instead of "clappr/clappr"
Signed-off-by: hossainemruz <hossainemruz@gmail.com>
This commit is contained in:
parent
0dafd655db
commit
3e9c936698
6 changed files with 31 additions and 23 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue