Video5
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.
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.
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
- For more information on the HTML5 <video> tag, please consult http://www.w3schools.com/html/html5_video.asp.
- 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)
- 2022-10-28 Update for PHP 8 (Petko)
See also
Contributors
- Recipe written and maintained by TomG.
- The script is partially based on HTML5Video by GNUZoo.
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.