VideoAttach
Description
Allow Attach: links to produce inline videos similar to the way images work.
The recipe actually provides several things:
- (:video ...:) directive (wrapper around MarkupExpr)
- Attach:attachment.mp4 video inlining
- Inline playback of raw video urls
- Embedding of popular video upload sources (e.g. Youtube, Vimeo, Dailymotion)
Compatibility
If you have disabled direct downloads of attachments $EnableDirectDownload=0;
, then Apple Safari will not play the video. Safari requires byte range support from the server and PmWiki's secure download mechanism does not support that. For desktops and laptops, you can use Google Chrome or Firefox to get around this limitation. Actually I coded my own HandleDownload action and it didn't matter. Mp4 is just plain broken on Safari (might work, might not).
Demo Site
https://endlessnow.com/wiki1/Test/Mp4
Installation
Download and place in your cookbook:
include_once("cookbook/videoattach.php");
To your local/config.php (or appropriate config file if using a farm).
Configuration
Quick Start
$EnableVA_All=TRUE; include_once("cookbook/videoattach.php");
to your config.php. That will enable all the features. The $EnableVA_All
will enable all the popular Internet upload site handling in addition to this recipe's regular features.
CSS
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; } .video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; } video { max-width: 100%; width: 100%; height: auto; } table.vert td.markup1 code { display: inline-block; word-break: break-all; }
You will need that CSS in your skin or css/local.css
file. The last piece is optional but allows for responsive resizing of things inside of PmWiki's (:markup:) directives. Note: In later versions of PmWiki, 2.2.98 or higher, that last piece makes no sense at all, and I haven't tested on those versions yet.
Specific Configurations
You can also enable just specific upload site embedding:
$EnableVA_Youtube=TRUE; $EnableVA_Dailmotion=TRUE; $EnableVA_Vimeo=TRUE; $EnabelVA_Twitch=TRUE;
You can even disable the primary purpose of this recipe and just use the popular Internet video upload sites by setting $EnableVA_Attach=FALSE
.
Because the (:video ...:) directive is used by other recipes, you can set the directive to whatever value you want:
$VideoAttach_Directive='videoattach';
Usage
(:video ...:)
Markup Expression
The general format is:
(:video attachment-path.mp4 option=value:)
For example:
(:video bigbuckbunny.mp4:) (:video PmWiki/bigbuckbunny.mp4 autoplay=1 loop=1 muted=1 controls=0 type=video/mp4 poster=PmWiki/bigbuckbunny.jpg:) (:video https://example.com/myvideo.mp4 poster=https://example.com/myposter.jpg :) (:video PmWiki/bigbuckbunny.mp4 poster=https://example.com/myposter.jpg :) |
Valid options and their defaults are:
- autoplay=0
- loop=0
- muted=0
- controls=1
- type=
- poster=
- error=url link to video optionally using poster image
- width=100%
- height=
Quick Inline Video
If you don't require all the features of the complete markup and can accept the defaults you can a simple Attach: or url direct to video with the option of providing a poster in a link tooltip manner.
For example:
Attach:bigbuckbunny.mp4 Attach:PmWiki/bigbuckbunny.mp4"bigbuckbunny.jpg" |
or
http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_640x360.m4v |
Right now the following video extensions are handled: mp4, m4v, avi, webm, ogv. You can set $VideoExtPattern="\\.(?:mp4|m4v|avi|webm|ogv?|MP4|M4V|AVI|WEBM|OGV)";
in your config.php to extend the video extensions that will match.
Popular Video Upload Sites
https://www.youtube.com/watch?v=Yakau0Ur9Do https://www.youtube.com/embed/dKWF56Y9cEU https://youtu.be/C9fpNQ67SaE https://www.dailymotion.com/video/xkez5a_neal-morse-sweet-elation-in-the-fire-live-2007_music https://vimeo.com/140318241 https://www.twitch.tv/videos/143142820
Notes
Change log / Release notes
- 2017-07-25 Fixes for raw link handling especially when contained inside video markup. Defaulting now to preload.
See also
- Cookbook /
- Ape Embed videos, maps, documents, and more in wiki pages (Stable)
- AutoPlay Unobtrusive embedding of video players from simple links (Superseded by Ape)
- Dailymotion Markup for embedding DailyMotion videos (Stable)
- Flash Embedding Flash movies; plus recipes for embedding Flash from specific sites like YouTube, Vimeo, GoogleVideo, Flickr, Archive.org, and more...
- FlashMediaPlayer Embed flash media players in your pages (Beta)
- FLVPlayer Embedding of Flash video (.flv) files into wiki pages the easy way. (initial release)
- Html5AVCtrl Enable youtube-like keyboard and mouse control of HTML5 video and audio.
- HTML5Video Show HTML5 Video (obsolete - use APE - Automagical PmWiki Embed instead)
- QuickTime Embed QuickTime content on wiki sites. (Stable)
- Video5 HTML5 Video Support for PmWiki (Stable)
- VideoAttach Handles Attach: videos, provides a video directive and optional support for popular Video Upload sites. (Beta)
- WMPlayer Embedding a Windows Media Player (stable)
Contributors
Comments
See discussion at VideoAttach-Talk
User notes? : 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.