diff options
| author | Florian Larysch | 2017-01-03 01:43:04 +0100 |
|---|---|---|
| committer | Florian Larysch | 2017-01-03 01:48:41 +0100 |
| commit | 00990497857e5ec27405e2b795310fa0dc925545 (patch) | |
| tree | 4aa9ff0591289e4cfdae9c0e064fd88bb30ee7b0 | |
| parent | 7aa212fc8151b52136fefb901ccd6b410ced96a8 (diff) | |
relive: add scrubbing thumbnail support
When the Relive manifest contains preview thumbnails for scrubbing,
display them to the user.
| -rw-r--r-- | assets/js/lustiges-script.js | 15 | ||||
| -rw-r--r-- | template/assemblies/player/relive.phtml | 6 | ||||
| -rw-r--r-- | template/page.phtml | 1 |
3 files changed, 22 insertions, 0 deletions
diff --git a/assets/js/lustiges-script.js b/assets/js/lustiges-script.js index 81db426..e949c6e 100644 --- a/assets/js/lustiges-script.js +++ b/assets/js/lustiges-script.js @@ -23,10 +23,25 @@ $(function() { if($relivePlayer.length > 0) { var player = new Clappr.Player({ baseUrl: 'assets/clapprio/', + plugins: { + core: [ClapprThumbnailsPlugin] + }, + source: $relivePlayer.data('m3u8'), height: $relivePlayer.data('height'), width: $relivePlayer.data('width'), autoPlay: true, + scrubThumbnails: { + backdropHeight: 64, + spotlightHeight: 84, + thumbs: ClapprThumbnailsPlugin.buildSpriteConfig( + $relivePlayer.data("sprites"), + $relivePlayer.data("sprites-n"), + 160, 90, + $relivePlayer.data("sprites-cols"), + $relivePlayer.data("sprites-interval") + ), + }, events: { onReady: function() { var playback = player.getPlugin('hls'); diff --git a/template/assemblies/player/relive.phtml b/template/assemblies/player/relive.phtml index 93b6c95..361e1bb 100644 --- a/template/assemblies/player/relive.phtml +++ b/template/assemblies/player/relive.phtml @@ -4,5 +4,11 @@ data-width="<?=h($width)?>" data-height="<?=h($height)?>" data-m3u8="<?=h(forceproto($talk['playlist']))?>" + <? if(array_key_exists('sprites', $talk)): ?> + data-sprites="<?= h($talk['sprites']['url']) ?>" + data-sprites-n="<?= h($talk['sprites']['n']) ?>" + data-sprites-cols="<?= h($talk['sprites']['cols']) ?>" + data-sprites-interval="<?= h($talk['sprites']['interval']) ?>" + <? endif ?> > </div> diff --git a/template/page.phtml b/template/page.phtml index 508b271..016debf 100644 --- a/template/page.phtml +++ b/template/page.phtml @@ -56,6 +56,7 @@ <script type="text/javascript" src="<?=h($assets)?>mejs/mediaelement-and-player.min.js"></script> <script type="text/javascript" src="<?=h($assets)?>clapprio/clappr.min.js"></script> + <script type="text/javascript" src="<?=h($assets)?>clapprio/clappr-thumbnails-plugin.js"></script> <script type="text/javascript" src="<?=h($assets)?>js/lustiges-script.js"></script> <? if(isset($subtitles) && $subtitles->isEnabled()): ?> |