Uploaded video doesn't display

1

In the Panel I’ve uploaded a video (.mp4 file) along with several images.

When I view the page in browser I can see my images, but not the video. The video is in the source code, but it is not displaying.

<img src="http://localhost:8888/media/pages/portfolio/example/4356dadd48-1662994384/video-720p.mp4" alt="" class="false">

Looking at the developer tools the video is 0 x 0 pixels. And inside an <img> tag.

How do I get video to display?
Will most people be able to view an .mp4 file?
How do I set preload none and autoplay and loop etc?

Can’t find any info on the Kirby website

2

Well, you need to output a local video with an HTML video tag, not an image.

This will also allow you to provide multiple sources.

3

How do I do that in Kirby?

Client wants to be able to upload images and videos, in the Panel and to be able to order them differently on different pages, i.e. have a few images and then a video and then a few more images, or a few videos and then one image etc.

4

You can check the file type/mime and output either an image tag or the video tag.

5

Any ideas how to do that?

6

Here is an example: Sorting of different file types

Tip: Use the search function here, this forum is already full of such examples.

7

Yes I’ve been looking at that thread. It’s given me a headache! I think that is well beyond my comprehension.

8

Basically like this, assuming you are looping through a collection of files:

<?php foreach ($page->files() as $file) { if ($file->type() === 'image') { // render image } if ($file->type() === 'video') { // render video } endforeach; ``` Instead of directly rendering the HTML, putting the image/video HTML into a snippet (video.php/image.php, depending on file type) keeps your code clean.
9

I was just using images. The following code worked:

<div class="image-content">
	<?php $images =  $page->image_content()->toFiles();
	foreach($images as $image): ?>
		<img src="<?= $image->url() ?>" alt="<?= $image->alt() ?>" class="<?= $image->border() ?>">
		<?php if ($image->caption()->isNotEmpty()): ?>
			<p class="caption"><?= $file->caption() ?></p>
		<?php endif ?>	
	<?php endforeach ?>
</div>

But I now need to add video into the div called image-content.

My new template code is:

<div class="image-content">
	<?php foreach ($page->image_content() as $file): ?>
		<?= snippet($file->type(), ['file' => $file]) ?>
		<?php if ($file->caption()->isNotEmpty()): ?>
			<p class="caption"><?= $image->caption() ?></p>
		<?php endif ?>
	<?php endforeach ?>
</div>

And I have a snippet called image.php
<img src="<?= $file->url() ?>" alt="<?= $file->alt() ?>" class="<?= $file->border() ?>">

And a video.php snippet
<video src="<?= $file->url() ?>" alt="<?= $file->alt() ?>" class="<?= $file->border() ?>"></video>

But it’s not working

10

If something is not working, always indicate what exactly is not working. We don’t have crystal balls :wink:

Please check the docs for the video tag linked above, your code is not valid.

11

In the browser I get the following error
Call to a member function type() on string

I think it is referring to this line

<?= snippet($file->type(), ['file' => $file]) ?>

I’ll have a look at the video snippet - thanks for the heads up

12

You forgot to convert the field content to files

13

Okay so I need to convert the (text?) content of the field in the Panel, to files? I’ve tried the following. I’ve also tried to rename $file to $anyname to differentiate between the name file and the file as a thing.

<div class="image-content">
	<?php $anyname =  $page->image_content()->toFiles();
		foreach ($page->image_content() as $anyname): ?>
		<?= snippet($anyname->type(), ['anyname' => $file]) ?>
		<?php if ($anyname->caption()->isNotEmpty()): ?>
			<p class="caption"><?= $anyname->caption() ?></p>
		<?php endif ?>
	<?php endforeach ?>
</div>

But I get the following error message in the browser:
Call to a member function type() on string

On this line

<?= snippet($anyname->type(), ['anyname' => $file]) ?>

As you can imagine I have no idea what any of this means!

14

I’ve been doing some more digging around and found the following code (see below), but I don’t know where to put it. It looks very different from the code I already have.

<?php if($file->type() == 'image'): ?>
  <!-- markup for image -->
<?php endif ?>
<?php if($file->type() == 'video'): ?>
  <!-- markup for video -->
<?php endif ?>
15

I’ve now tried:

<div class="image-content">
	<?php $anyname =  $page->image_content()->toFiles();
		foreach ($page->image_content() as $anyname): ?>
		<?php if($anyname->type() == 'image'): ?>
			<img src="<?= $anyname->url() ?>" alt="<?= $anyname->alt() ?>" class="<?= $anyname->border() ?>">
		<?php endif ?>
		<?php if($anyname->type() == 'video'): ?>
			<video>
				<source src="<?= $anyname->url() ?>" alt="<?= $anyname->alt() ?>" class="<?= $anyname->border() ?>">
			</video>
		<?php endif ?>
		<?php if ($anyname->caption()->isNotEmpty()): ?>
			<p class="caption"><?= $anyname->caption() ?></p>
		<?php endif ?>
	<?php endforeach ?>
</div>

But get error message:
Call to a member function type() on string

On line;

<?php if($anyname->type() == 'image'): ?>
16

This cannot possibly work, While you first convert your field to a files collection, you then try to loop through the same stuff as before. However, you have to loop through the files you get once you have converted the field value to a files object. I think I mentioned it before, but each of our field types has its own documentation, including a chapter how to use it in your templates.

I think I mentioned it before that each field has a section how to use it in your templates and snippets.

17

Okay I now have

<div class="image-content">
	<?php $anyname =  $page->image_content()->toFiles();
		<?php if($anyname->type() == 'image'): ?>
			<img src="<?= $anyname->url() ?>" alt="<?= $anyname->alt() ?>" class="<?= $anyname->border() ?>">
		<?php endif ?>
		<?php if($anyname->type() == 'video'): ?>
			<video>
				<source src="<?= $anyname->url() ?>" alt="<?= $anyname->alt() ?>" class="<?= $anyname->border() ?>">
			</video>
		<?php endif ?>
		<?php if ($anyname->caption()->isNotEmpty()): ?>
			<p class="caption"><?= $anyname->caption() ?></p>
		<?php endif ?>
	<?php endforeach ?>
</div>

But it’s still not working. I get an error message:
syntax error, unexpected token “<”, expecting end of file

<?php if($anyname->type() == 'image'): ?>
18

Please read the example closely:

You are missing the foreach loop. And I would call the collection $files, variables should make sense.

19

If I use the following the video doesn’t display. It needs to be in a video tag:

<?php
$images =  $page->gallery()->toFiles();
foreach($images as $image): ?>
  <img src="<?= $image->url() ?>" alt="">
<?php endforeach ?>
20

I hate to say it, but of course you have to combine the loop with the original if-else…