[video] microhtml and no-jquery
This commit is contained in:
parent
9ed58a69a0
commit
2a23c235ec
1 changed files with 26 additions and 30 deletions
|
@ -4,17 +4,13 @@ declare(strict_types=1);
|
|||
|
||||
namespace Shimmie2;
|
||||
|
||||
use function MicroHTML\{A, BR, VIDEO, SOURCE, emptyHTML};
|
||||
|
||||
class VideoFileHandlerTheme extends Themelet
|
||||
{
|
||||
public function display_image(Page $page, Image $image)
|
||||
{
|
||||
global $config;
|
||||
$ilink = $image->get_image_link();
|
||||
$thumb_url = make_http($image->get_thumb_link()); //used as fallback image
|
||||
$mime = strtolower($image->get_mime());
|
||||
$autoplay = $config->get_bool(VideoFileHandlerConfig::PLAYBACK_AUTOPLAY);
|
||||
$loop = $config->get_bool(VideoFileHandlerConfig::PLAYBACK_LOOP);
|
||||
$mute = $config->get_bool(VideoFileHandlerConfig::PLAYBACK_MUTE);
|
||||
|
||||
$width = "auto";
|
||||
if ($image->width > 1) {
|
||||
|
@ -25,31 +21,31 @@ class VideoFileHandlerTheme extends Themelet
|
|||
$height = $image->height."px";
|
||||
}
|
||||
|
||||
$html = "Video not playing? <a href='$ilink'>Click here</a> to download the file.<br/>";
|
||||
$html = emptyHTML(
|
||||
"Video not playing? ",
|
||||
A(['href' => $image->get_image_link()], "Click here"),
|
||||
" to download the file.",
|
||||
BR(),
|
||||
VIDEO(
|
||||
[
|
||||
'controls' => true,
|
||||
'class' => 'shm-main-image',
|
||||
'id' => 'main_image',
|
||||
'alt' => 'main image',
|
||||
'poster' => make_http($image->get_thumb_link()),
|
||||
'autoplay' => $config->get_bool(VideoFileHandlerConfig::PLAYBACK_AUTOPLAY),
|
||||
'loop' => $config->get_bool(VideoFileHandlerConfig::PLAYBACK_LOOP),
|
||||
'muted' => $config->get_bool(VideoFileHandlerConfig::PLAYBACK_MUTE),
|
||||
'style' => "height: $height; width: $width; max-width: 100%; object-fit: contain; background-color: black;",
|
||||
'onloadstart' => 'this.volume = 0.25',
|
||||
],
|
||||
SOURCE([
|
||||
'src' => $image->get_image_link(),
|
||||
'type' => strtolower($image->get_mime())
|
||||
])
|
||||
)
|
||||
);
|
||||
|
||||
//Browser media format support: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
|
||||
|
||||
if (MimeType::matches_array($mime, VideoFileHandler::SUPPORTED_MIME)) {
|
||||
if ($mime == MimeType::WEBM) {
|
||||
//Several browsers still lack WebM support sadly: https://caniuse.com/#feat=webm
|
||||
$html .= "<!--[if IE]><p>To view webm files with IE, please <a href='https://tools.google.com/dlpage/webmmf/' target='_blank'>download this plugin</a>.</p><![endif]-->";
|
||||
}
|
||||
|
||||
$autoplay = ($autoplay ? ' autoplay' : '');
|
||||
$loop = ($loop ? ' loop' : '');
|
||||
$mute = ($mute ? ' muted' : '');
|
||||
|
||||
$html .= "
|
||||
<video controls class='shm-main-image' id='main_image' alt='main image' poster='$thumb_url' {$autoplay} {$loop} {$mute}
|
||||
style='height: $height; width: $width; max-width: 100%; object-fit: contain; background-color: black;'>
|
||||
<source src='{$ilink}' type='{$mime}'>
|
||||
</video>
|
||||
<script>$('#main_image').prop('volume', 0.25);</script>
|
||||
";
|
||||
} else {
|
||||
//This should never happen, but just in case let's have a fallback..
|
||||
$html = "Video type '$mime' not recognised";
|
||||
}
|
||||
$page->add_block(new Block("Video", $html, "main", 10));
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue