Questions answered by this recipe
How can I use the (not so) new HTML5
How can I add videos to my page in the same easy way as if they were images?
This recipe provides the HTML5 <video> tag for PmWiki.
The video files can (but don't have to) be standard pmwiki uploads.
- Get video5.phpΔ and copy it to your cookbook directory
- Add the following line to config.php:
Video5 Markup extensions
This recipe adds the
(:video:) markup to PmWiki.
(: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!
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
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.
Note that setting this value will change how video posters are found by the recipe.
Quote from video5.php :
// can't check if a poster file exists if $VideoUrl was set manually - if so, just add it
See inside the video5.php file, for more information.
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.';
- 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
- Initial Release
- 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
- added support for the srt track format
- added support for attachments on other groups/pages (:video group/page/file:)
- added support for PHP 5.5 (replaced Markup with Markup_e, thanks RandyB for the hint)
See discussion at Video5-Talk