Video5

Summary: HTML5 Video Support for PmWiki
Version: 2015-10-05
Prerequisites: PmWiki 2.2.x, php >= 5.2, a recent browser
Status: Stable
License: GPL2+
Maintainer: TomG
Users: +1 (view / edit)
Discussion: Video5-Talk

Questions answered by this recipe

How can I use the (not so) new HTML5 <video> element?
How can I add videos to my page in the same easy way as if they were images?

Description

This recipe provides the HTML5 <video> tag for PmWiki.
The video files can (but don't have to) be standard pmwiki uploads.

Installation

  • Get video5.phpΔ and copy it to your cookbook directory
  • Add the following line to config.php: include_once("$FarmD/cookbook/video5.php");

Video5 Markup extensions

This recipe adds the (:video:) markup to PmWiki.

Usage

Basic usage

Example

(:video myvideo width=640 height=480:)

This example will embedd the video myvideo on your page.
Please note, you do not have to include the video file extension, e.g. (:video myvideo.mp4 ... :). However, no harm will be done if you do so anyway.

You will then have to upload the video files to PmWiki as you would do it with any upload.

  • The file(s) need to be named myvideo.mp4, myvideo.ogv or myvideo.webm.
  • If you'd like a poster image to be displayed before the video has started playing also upload an image file with the same name (myvideo.png, myvideo.jpg or myvideo.gif).
  • If you want to show subtitles also upload a corresponding WebVTT or SRT file. This file has to be named myvideo.vtt or myvideo.srt respectively.

There are three possible video formats for the <video> element: MP4, WebM, and Ogg. Not every browser supports all formats. It is therefore recommended that you upload your video in at least two formats:

  • MP4 (myvideo.mp4)
    • Supported by every major browser except Firefox and Opera
  • and either Ogg (myvideo.ogv) or WebM (myvideo.webm) (or both of them)
    • Supported by for every major browser except Internet Explorer and Safari

More on video format browser support: http://en.wikipedia.org/wiki/HTML5_video#Browser_support

Update 2015: H.264 (MP4) has won the "video format war" for now. If you want to upload just one file use mp4.

Please note, it is best to always specify both the height and width attributes for videos. However, do not try to rescale videos with these attributes!

Advanced usage

Advanced example

Video5 supports all attributes of the HTML <video> Tag. Here is an example where all possible options are being used:

(:video myvideo autoplay=0 controls=1 loop=0 muted=0 preload=auto width=640 height=480:)

In this example all options are set to their default values.

The detailed effect of the options is described on various websites, e.g. http://www.w3schools.com/tags/tag_video.asp.

You can change the default values in your config.php by setting any of these variables before including video5.php:

$VideoWidth = '640';
$VideoHeight = '480';
$VideoPreload = 'auto';   // (auto|metadata|none)
$VideoAutoplay = 0;
$VideoControls = 1;
$VideoLoop = 0;
$VideoMuted = 0;

Default video order

By default Video5 loads video files in the following order: mp4, ogv, webm

You can change this behaviour in your config.php before including video5.php:

$VideoExtensions = array('mp4','ogv','webm');

PmWiki setting EnableDirectDownload

Video5 respects the the setting of $EnableDirectDownload.
However, please note that video playback does not work with most browsers if $EnableDirectDownload=0; is set.

Storage matters

Maybe you don't have enough storage to store video files in the same place as other PmWiki attachments. If so, you can configure the source URL to point to your video storage.

An example setting for config.php (note the trailing slash):

$VideoUrl = 'http://server.example.com/path/to/videofolder/';

You'll now need to upload your videos to this place.

Unsupported browsers

Users of old browsers will see a message, showing the lack of HTML <video> support. You can change this message in config.php:

$VideoNotSupportedText = 'Sorry, your browser does not support HTML5 video.';

Notes

  • This is my first recipe. Comments are very welcome.
  • For more information on the HTML5 <video> tag, please consult http://www.w3schools.com/html/html5_video.asp.
  • There are a lot of video conversion tools out there. For example, a free and simple one which can handle MP4, Ogg (Theora) and WebM is Miro Video Converter. This is not an commercial, but I think the tool is helpful for getting started and testing HTML5 video.
  • Most video players (e.g. VLC) are able to create poster files out of a video (snapshot).

Change log / Release notes

  • 20121101
    • Initial Release
  • 20131022
    • added support for the track element (subtitles)
    • removed necessity to use the (:video file:) markup without file extensions
    • video format order is now configurable
    • video5 now shows upload links if no video files are found
    • documentation update
  • 20131023
    • added support for the srt track format
  • 20131203
    • added support for attachments on other groups/pages (:video group/page/file:)
  • 20151005
    • added support for PHP 5.5 (replaced Markup with Markup_e, thanks RandyB for the hint)

See also

Contributors

Comments

See discussion at Video5-Talk

User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.