HTML5 video extension for Kirby CMS

Kirby is the plain-text CMS I use to manage this blog. It has its own language, the kirbytext, which uses tags wrapped in parenthesis, such as link, image and others. Each tag accepts its own parameters, for example, class, which is awesome to circumvent some Markdown limitations. Kirby has tags for Vimeo and Youtube, but it lacks a native HTML5 for the video attribute and I built one.

This is my first PHP script ever and I had to test a couple of times until I found out semi-colons are really important here. I wouldn’t have made this extension without a previously written custom extension for the <figure> attribute and Kirby’s own support files. If you decide to install the following extension, you must read the article by the Kirby creator on how to extend kirbytext.

<?php
    class kirbytextExtended extends kirbytext {
        function __construct($text, $markdown=true) {
            parent::__construct($text, $markdown);
            $this->addTags('video');
            $this->addAttributes('width', 'height', 'ogg', 'webm', 'class', 'title', 'fallback');
    }
    function video($params) {
        global $site;
        $page = ($this->obj) ? $this->obj : $site->pages()->active();
        $video = $page->videos()->find($params['video'])->url();
            $defaults = array(
                'width' => c::get('kirbytext.video.width'),
                'height' => c::get('kirbytext.video.height’),
                            'ogg' => '',
                            'webm' => '',
                            'fallback' => '',
                            'title' => '',
                            'class' => ''
            );
        $options = array_merge($defaults, $params);
            $class = $options['class'];
            $title = $options['title'];
            $ogg = $options['ogg'];
            $webm = $options['webm'];
        // add a classname to the video
            if(!empty($class)) $class = ' class="' . $class . '"';
        // add a title to the video
            if(!empty($title)) $title = ' title="' . $title . '"';
        // add an OGG video
            if(!empty($ogg)) $ogg = '<source src="' . $page->videos()->find($ogg)->url() . '" type="video/ogg">';
        // add a WebM video
            if(!empty($webm)) $webm = '<source src="' . $page->videos()->find($webm)->url() . '" type="video/webm">';
        // return the full code
        return '<video width="' . $options['width'] . '" height="' . $options['height'] . '"' . $class . $title . 'controls><source src="' . $video . '" type="video/mp4">' . $ogg . $webm . $options['fallback'] . '</video>';
        }
    }
    ?>

After installation, you can use video in your Kirby articles. It works like this:

(video: file.mp4 ogg: file.ogg webm: file.webm class: video title: This is a video width: 640 height: 360 fallback: Your browser doesn’t support videos.)

Which would generate this:

<video width="640" height="360" class="video" title="This is a video" controls="">
    <source src=“absolute.url/file.mp4" type="video/mp4">
    <source src="absolute.url/file.ogg” type="video/ogg">
    <source src="absolute.url/file.webm” type="video/webm">
    Your browser doesn’t support videos.
</video>

Suggestions? Questions? You can reach me at App.net or Twitter. Now all I need is a video.