DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:html5video

This is an old revision of the document!


html5video Plugin

Compatible with DokuWiki

2012-10-13 “Adora Belle”,binky,Ponder Stibbons

plugin Embeds video using HTML5 syntax

Last updated on
2012-12-08
Provides
Syntax
Repository
Source

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to dailymotion, html5video2, htvid, videogg

Tagged with h.264, html5, mp4, ogv, theora, video, vp8, webm

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

Install the plugin using the Plugin Manager and the download URL above, which points to latest version of the plugin. 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:

mime.local.conf
webm        video/webm
ogv         video/ogg
mp4         video/mp4

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 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 .htacces, you'll need to create one):

.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

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:

{{URL|}}

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 (640×360). To enter your own size, use the following syntax:

{{URL|WIDTHxHEIGHT}}

Example:

{{:videos:totally_sweet_tutorial.webm|320x240}}

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

Syntax

Syntax:

{{URL|WIDTHxHEIGHT|ATTRIBUTES}}
  • 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:
    {{URL| }}
  • Float video right:
    {{ URL|}}
  • Center video:
    {{ URL| }}

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.

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

Project fork

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

{{ videos:vid.webm|videos:vid.ogv|videos:vid.mp4|320x240|loop }}

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

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? — 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? — 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, “Ponder Stibbons”

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

What may I miss ?

Chris

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). — 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? — 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. — Jason van Gumster 2013/01/05 10:51

Bugs

Please make any reports using the github issue tracker

plugin/html5video.1406320034.txt.gz · Last modified: 2014-07-25 22:27 by 88.185.117.196

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki