VideoAttach

Summary: Handles Attach: videos, provides a video directive and optional support for popular Video Upload sites.
Version: 2017-07-25
Prerequisites:
Status: Beta
Maintainer: ccox
License: GPLv2
Users: (view? / edit)
Discussion: VideoAttach-Talk

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:

Add:
 include_once("cookbook/videoattach.php");

To your local/config.php (or appropriate config file if using a farm).

Configuration

Quick Start

Add:
 
 $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

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

  • 2017-07-25 Fixes for raw link handling especially when contained inside video markup. Defaulting now to preload.

See also

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.