add video preview

This commit is contained in:
buttle 2021-04-04 11:14:03 +02:00
parent 11742e39da
commit dd5f653fcf
2 changed files with 22 additions and 24 deletions

View File

@ -73,6 +73,7 @@ class PanoramaViewer extends AbstractBlockLayout
$urls = []; $urls = [];
$media_types = []; $media_types = [];
$thumbnails = [];
$panorama_type = $block->dataValue('panorama_type'); $panorama_type = $block->dataValue('panorama_type');
static $id = 0; static $id = 0;
@ -88,6 +89,7 @@ class PanoramaViewer extends AbstractBlockLayout
} elseif (strpos($mediaType, 'image/') !== false){ } elseif (strpos($mediaType, 'image/') !== false){
array_push($urls, $media->originalUrl()); array_push($urls, $media->originalUrl());
} }
array_push($thumbnails, $media->thumbnailUrls());
} }
} }
$width = $block->dataValue('width'); $width = $block->dataValue('width');
@ -101,6 +103,7 @@ class PanoramaViewer extends AbstractBlockLayout
'urls' => $urls, 'urls' => $urls,
'id' => 'pv-' . ++$id, 'id' => 'pv-' . ++$id,
'mediaTypes' => $media_types, 'mediaTypes' => $media_types,
'thumbnails' => $thumbnails,
]); ]);
} }
} }

View File

@ -1,4 +1,4 @@
<div style="position:relative;"> <div class="pannemmul-wrap" style="position:relative;">
<?php <?php
$this->headLink()->appendStylesheet($this->assetUrl('vendor/pannellum/pannellum.css', $this->headLink()->appendStylesheet($this->assetUrl('vendor/pannellum/pannellum.css',
@ -28,32 +28,27 @@
} }
</style> </style>
<?php if ($panorama_type == "video") { ?> <div class="pannellum-wrap">
<?php if ($panorama_type == "video") { ?>
<video id="<?= $id ?>" <video id="<?= $id ?>"
class="video-js vjs-default-skin vjs-big-play-centered" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="none" controls preload="none"
style="width:<?= $width ?>px; height: <?= $height ?>px;" poster="<?= $thumbnails[0]['medium'] ?>"
poster="/images/video/jfk-poster.jpg" crossorigin="anonymous">
crossorigin="anonymous"> <?php for($i = 0; $i < count($urls); ++$i) { ?>
<?php for($i = 0; $i < count($urls); ++$i) { ?> <source src="<?= $urls[$i] ?>" type="<?= $mediaTypes[$i] ?>"/>
<source src="<?= $urls[$i] ?>" type="<?= $mediaTypes[$i] ?>"/> <?php } ?>
<?php } ?> <p class="vjs-no-js">
<p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to
To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/"
a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
target="_blank">supports HTML5 video</a> </p>
</p> </video>
</video> <?php } else { ?>
<?php } else { ?>
<div class="pannellum">
<div id="<?= $id ?>" class="panorama-viewer"></div> <div id="<?= $id ?>" class="panorama-viewer"></div>
<?php } ?>
</div> </div>
<?php } ?>
<script> <script>
<?php if ($panorama_type == "equirectangular") { ?> <?php if ($panorama_type == "equirectangular") { ?>