Video HTML5 tag

Kirby 3
1

Hi,

I’m trying to build a super basic html5 video tag. It works well, but I have troubles with the poster image: here is my code:

<?php
Kirby::plugin('constantin/vid', [
 
  'tags' => [
    'vid' => [
      'attr' => [
        'poster',
        'class',
        'webm',
        'ogv'
      ],
      'html' => function($tag) {
        $html = '';
        $class = $tag->class;
        if ($tag->file = $tag->file($tag->value)) {
                $tag->src = $tag->file->url();
            } else {
                $tag->src = Url::to($tag->value);
            }
        
        $html .= '<video controls class="' . $class . '" poster="' . ($tag->parent()->file($tag->poster)) . '">';
        if ($tag->value != '') {
          $html .= '<source src="'. $tag->src .'" type="video/mp4">';
        }
        if ($tag->webm != '') {
            $html .= '<source src="' . $tag->parent()->file($tag->webm) . '" type="video/webm">';
          }
        if ($tag->ogv != '') {
          $html .= '<source src="' . $tag->parent()->file($tag->ogv) . '" type="video/ogv">';
        }
        $html .= '</video>';
        return $html;
      }
    ]
  ]
]);

poster output a complete image tag: <img src="..."> but I would just need the image url.

With:

. $tag->parent()->file($tag->poster)->url() .

I can get only the url, but if image title is misspelled in kirbytag, I go to an error Call to a member function url() on null

Thanks for any help and advice

2

See my post here for a HTML 5 Video kirby tag :slight_smile: The answer is probably in there somewhere.

3

Yes, I already read it :wink: there is also an error if image title is misspelled.

4

Do you mean the file name? With your code or my code?

5

Yes in your code also. If image/poster title is misspelled in kirbytag, it goes to an error

exemple: (video: myvideo.mp4 poster: misspelledtitle.jpg)

6

Well you just need to check it exists first before using it, easy enough.

7

Yes, that’s what I did the same way like I did for the others webm or ogv tags, but error is the same :frowning: and at this point my php knowledge can’t help me :frowning: Anyway, I go on finding the go way to solve.

8

Well you can simplify the code by dropping the support for OGV and WEBM. This was important a few years back but now MP4 is widely supported.

I’ll maybe wrap mine up into a plugin and fix the poster image issue. I’ll put it up on Github a bit later.

1 Like
9

Yes you are right about mp4, it should be enough. My goal is rather learning about creating some kirbytags.
But I can’t anderstand why there is this error on the image, and why there is no error video file if title is misspelled…

10

@anon3573533: You should always use an if statement (or something like that), not only for the poster but also for the other video files to check if the file exists. That’s missing in your code.

The tags don’t show errors on the frontend, they fail silently. The code @jimbobrjames posted in the other thread would also need some cleaning up and modernizing, there is especially no need to check all the variables in the snippet, that should be done in the tag itself and then provided to the snippet.

1 Like
11

Yup… i’m actually on it as we speak :slight_smile: It’s looking much cleaner now.

12

@jimbobrjames It would be nice if you share your code :wink:

13

Pateince :slight_smile: i’m testing it… :slight_smile:

1 Like
14

@anon3573533 Here you go …

2 Likes
15

yes thank you James, it seems to work perfectly. I will use it in the theme I’m building until I’m able to finish mine.

1 Like
16

Hmm, seems there is an issue with width and height tags. Also, how do you set controls and preload?

17

Cant see a problem my self with the width and heights. You can set preload and controls on the tag as you would normally. If nothing is supplied, it defaults to preload and controls enabled.

Edit: your right… i just spotted a mistake. Give me 2 minutes.

18

@anon3573533 sorry about that, do a composer update and it should be fixed.

1 Like
19

updated, thanks a lot.

20

No problem. Forgot to point out - if you set a blue print for the video files with the following, you’ll be able to feed title and description through to the schema code in the example snippet:

title: Video

accept: video/*

fields:
  title:
    label: Title
    type: text
  description:
    label: Description
    type: textarea
1 Like