DokuWiki

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

====== html5video Plugin ======

---- plugin ----
description: Embeds video using HTML5 syntax
author     : Jason van Gumster (Fweeb)
email      : jason at monsterjavaguns dot com
type       : Syntax
lastupdate : 2013-03-07
compatible : 2012-10-13 “Adora Belle”,binky,Ponder Stibbons, Detritus, Frusterick Manners, Greebo
depends    : 
conflicts  : 
similar    : videogg, dailymotion
tags       : html5, video, webm, ogv, mp4, vp8, theora, h.264

downloadurl: https://github.com/Fweeb/dokuwiki_plugin_html5video/archive/master.zip
bugtracker : https://github.com/Fweeb/dokuwiki_plugin_html5video/issues
sourcerepo : https://github.com/Fweeb/dokuwiki_plugin_html5video
donationurl: 
----

===== Description =====

Uploading to YouTube (and then embedding that video with one of the plugins already in existence) is great and all, but there are occasions where it's preferrable to host the video on your own server/host. And since we live in an HTML5 world where browsers can play [properly encoded] video natively, there's no need to use a flash-based media player like jwplayer or flowplayer. This plugin adds that functionality to DokuWiki. Video uploaded via the Media Manager can easily be inserted into any of your DokuWiki pages.

===== Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

:!: **External requirements:** This plugin requires the following additional steps to installation: 
  * Add video mime types to DokuWiki configuration
  * Add video mime types to web server (if necessary)

==== Adding Video MIME types to DokuWiki ====

If it isn't already created, you need to add ''mime.local.conf'' to your config directory with the following text added to it:

<code - mime.local.conf>
webm        video/webm
ogv         video/ogg
mp4         video/mp4
</code>

This will allow you to upload video files with ''.webm'', ''.ogv'', or ''.mp4'' file extensions. More on adding MIME types can be found on the [[:mime|DokuWiki MIME configuration]] page.

==== Adding Video MIME types to Your Web Server ====

//(This assumes Apache)//

Most web servers are configured to handle video files. However, particularly in the case of webm, you might need to make the server aware of its mime type. The easiest thing to do is to add the following lines to your ''.htaccess'' file in the root of your Dokuwiki installation (if you don't already have a ''.htaccess'', you'll need to create one):

<code - .htaccess>
AddType application/webm  webm
AddType video/webm        webm
AddType application/ogg   ogv  # Probably not necessary
AddType video/ogg         ogv  # Probably not necessary
AddType application/mp4   mp4  # Probably not necessary
AddType video/mp4         mp4  # Probably not necessary
</code>

After this, you //may// have to restart the web server. But once that's done, embedded video should play just fine from your browser.

===== Examples/Usage =====

Syntax for this plugin matches (as closely as possible) the default syntax for images in DokuWiki.

Simple syntax:

Where ''URL'' is any valid web address or a local DokuWiki address (e.g. '':namespace:video.webm''). If you uploaded your video via the Media Manager, this is the exact syntax used when you insert that file. Any properly encoded webm, ogv, or mp4 file should work. By default, this plugin sets the video size to half 720p (640x360). To enter your own size, use the following syntax:

<code>{{URL|WIDTHxHEIGHT}}</code>

Example:

<code>{{:videos:totally_sweet_tutorial.webm|320x240}}</code>

More detailed Syntax descriptions and additional features are covered in the next section.

===== Syntax =====

Syntax:
<code>{{URL|WIDTHxHEIGHT|ATTRIBUTES}}</code>
  * **''URL''** can be one of this:
    * A valid web URL (e.g. ''%%http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv%%'')
    * A media link within your wiki (e.g. ''%%namespace:my_video.webm%%'')
  * **''WIDTHxHEIGHT''** is the desired width and height of your video player within the page
  * **''ATTRIBUTES''** can be one or both of the following (separated by commas)
    * //loop// - Loops the video to play again once it reaches the end
    * //autoplay// - Automatically starts the video when the page is loaded

:!: //Note that you can use ''ATTRIBUTES'' without specifying a ''WIDTHxHEIGHT'', but if you do so, you **must** include the additional pipe(|) character (e.g. ''%%{{:namespace:myvid.webm||loop,autoplay}}%%''//

You can also align your video with the same basic syntax that works on images in DokuWiki. That is, by adding a space before or after the syntax, within the curly braces. A space at the beginning aligns the video to the right (text flows around the left), a space at the end aligns the video to the left (text flows around the right), and a space on both sides centers the video as a block and text starts below it.

Example:

* Float video left: <code>{{URL| }}</code>
  * Float video right: <code>{{ URL|}}</code>
  * Center video: <code>{{ URL| }}</code>

FIXME it seem this should be at least with ''2016-06-26a "Elenor of Tsort"''
  * Float video left: <code>{{URL |}}</code>
  * Float video right: <code>{{ URL|}}</code>
  * Center video: <code>{{ URL |}}</code>
===== Configuration and Settings =====

See the [[#Installation]] section for MIME type configuration.

Do also note that you need to have videos that are properly encoded for playing in a browser. The intricacies of video encoding are beyond the scope of this wiki page, but the information is fairly easy to find online. One unfortunate note is that there's not one video format that's supported by all browsers. If you want to support all browsers, you'll need to encode and upload your video in at least webm and mp4 (.h264 codec with AAC audio). Currently, this also means you'll have to post the video to your page multiple times. Future versions of this plugin will allow you to use a single syntax for multiple files, depending on the user's browser.

===== Development =====

=== Change Log ===

* **2012-10-31**
    * Initial release
  * **2012-12-05**
    * Bugfix to regex and file type checks
  * **2012-12-08**
    * Goofy bugfix (forgotten curly brace)

=== Known Bugs and Issues ===

* Must manually write syntax for multiple formats of the same file.
  * Filenames must use lower-case letters only.

=== ToDo/Wish List ===

* Allow for graceful fallback to other web video formats for different browsers (user will still need to encode/upload multiple versions of the video in different formats)
  * Might be a good idea to use a stylesheet instead of inline styles for aligning the video
  * Possibly support automatic transcoding if the user uploads only one format of video
  * Playlist support
  * Disabling download menu/button

=== Project fork ===

Here is my fork allowing you to support multiple video formats using this syntax :

<code>
{{ videos:vid.webm|videos:vid.ogv|videos:vid.mp4|320x240|loop }}
</code>

[[https://github.com/MaximeMorel/dokuwiki_plugin_html5video]]

Plugin archive link : [[https://github.com/MaximeMorel/dokuwiki_plugin_html5video/archive/master.zip]]

===== FAQ =====

Nothing yet... but something is certainly likely to be asked more than once.

===== Discussion =====

-----

Hi, I just wanted to inform users of this plugin that if you use it in a LAN with a firewall (or machine restrictions) restricting URLs (for limited users) you leed to allow traffic to http://vjs.zencdn.net/3.2/video-js.swf otherwise the player will not load for those restricted users. took me half-a-day to figure this out. Fabio

> For which browser? This plugin should be using the browser's native HTML5 player. There should be no need to pull from an external URL... especially for a SWF file. That sounds pretty strange. [[user>fweeb|Jason van Gumster]] //2015/03/09 08:31//

-----

> That don't work properly :-\  :
    * apache web server = OK (mime type)
    *.webm file =  OK 
    * dokuwiki syntax to display webm videos = OK
Result : a link to play the video in an other window !

>> What version of DokuWiki are you using? I've only confirmed it working with the latest "Adora Belle" release. If that's not the case, perhaps your webm video is not encoded properly? If you do a test case with straight HTML5 and your video, does it successfully play in the browser? --- [[user>fweeb|Jason van Gumster]] //2012/11/09 10:26//

Same here : 
> That don't work properly for me too :
    * Dokuwiki Adora Belle
    * Apache web server = ok (mime type) = Apache 2.2.23
    *.mp4 file =  ok (H.264/AVC/MPEG-4 Part 10) 
    * Dokuwiki syntax to display mp4 videos = ok

> Result : a link to play the video in an other window.
> 
> Thanks in advance!
> 
> Eric St-Cyr

>> Is it playing in another browser window or a video player (like VLC or Windows Media Player)? Also, which browser are you using? --- [[user>fweeb|Jason van Gumster]] //2013/01/31 11:06//

>>> I use Chrome (24.01...) and it's only a link to play the video with VLC embed in a window browser.

Similar issue :
Using Firefox 30/31 or IE11

<code>
{{ computing:cisco_anyconnect_720p_h.264-aac_.mp4|320x200 }}
</code>

Displays a small icon (like a blank page icon) with the text 320x200 right to it. If I click the icon it plays the video full page in the browser.

What may I miss ?

It seems if I do insert it in this page is shows a small player. So I guess I miss something in my configuration somewhere.

I only updated as mentionned in the installation documentation :
 Mime configuration file : /etc/dokuwiki/mime.local.conf
.htaccess : /etc/dokuwiki/.htaccess

It looks like I use an old version 2012-01-25b "Angua". Since I upgraded to latest version it works fine.
Sorry.

==== AVI Support ====
=== Question ===
> I know the description for this plugin says this will allow you to upload video files with .webm, .ogv, or .mp4 file extensions but can it also support .AVIs if I add the file MIME type in DokuWiki?

>> You'd have to also make a small change to the source on line 90 to make sure it checks for avi files as well. However, the bigger problem is that, to my knowledge at least, there's no browser that supports playing video in an AVI container. This plugin uses HTML5 and the browser's native video player functionality. To support AVI, we'd have to embed the video with a different tag and hope that the user has a generic video player plugin installed in their browser. The preferred solution would be to transcode your video to one of the three formats that browsers actually use (webm, ogv, mp4). --- [[user>fweeb|Jason van Gumster]] //2012/12/03 09:35//

==== Question:  Error: The video must be in webm, ogv, or mp4 format ====

> Hi, i´ve add mp4 and webm to the iis7 server and to the mime.local.conf file in the wiki....
> I tried one mp4 video and one webm video but get allways the same error:
> 
> Error: The video must be in webm, ogv, or mp4 format 
> /dokuwiki/lib/exe/fetch.php?media=URL 
> 
> what did i wrong?

>> What is the filename for you video? Specifically, is the extension (e.g. mp4, webm) in all lowercase? My suspicion is that since you're dealing with Windows environment, maybe your filename's extension is in all uppercase letters (e.g. MP4, WEBM). The code in this plugin doesn't currently look for that... though it's a relatively simple change. Could you verify that this is the issue by renaming your file with all lowercase letters in the extension? --- [[user>fweeb|Jason van Gumster]] //2013/01/31 10:59//

>>> Thx for replay! The extension is in lower case... maybe the problem is that I use IE8?  (but with chrome portable I get the same error)

>>>> No... this certainly seems like a server-side issue. I can only think of a couple causes. Does your filename have spaces or special characters in it? There's a chance that maybe my regex is choking there. Are you positive you've entered the syntax correctly in your code? It's a silly question, I know, but I figured it'd be worth asking.
>>>> 
>>>> If you could, let's move this to the bug tracker (on github). There, you can share the exact syntax you're using and maybe I can figure out if it's my code that's causing the problem. --- [[user>fweeb|Jason van Gumster]] //2013/01/05 10:51//
===== Bugs =====

Please make any reports using the github issue tracker

Please fill all the letters into the box to prove you're human. C N M X X Please keep this field empty:

Edit summary

Note: By editing this page you agree to license your content under the following license: CC Attribution-Share Alike 4.0 International