video

From IndieWeb

🎥

video is a type of post whose primary content is a video file. Video can consist of recorded movie, animation, titles, typically with audio. It has growing support on the indie web. Video posts are supported by several silos.

See also:

Why

Video posts are popular on general silos like Facebook, media silos: Instagram, TikTok, Snapchat, YouTube, Vimeo, Flickr. Vine was an early video silo which became subject to site death.

Post videos on your own site instead for all the usual reasons.

How

How to markup

Use an h-entry as always, and then an HTML5 <video> element with class name u-video and src attribute of the URL of the video file, e.g.

Simple example of a video with a single source and a poster image. Note only the video src will be picked up by microformats parsing (currently, there are discussions to do something special with the poster attribute in such cases). 

<video class="u-video" controls="controls"
       src="http://ben.example.com/camcorder.mp4" 
       poster="http://ben.example.com/camcorder.png">
  warning text only for browsers that do not support the video tag
</video>

Alternatively (with separate source element from poster frame, and fallback img tag for browsers that do not support the video tag) this provides a way of mf2 parsing the poster image as a featured image for the video: 

<video class="u-featured" controls poster="http://ben.example.com/camcorder.png">
  <source class="u-video" src="http://ben.example.com/camcorder.mp4">
  <img src="http://ben.example.com/camcorder.png" class="u-photo" />
</video>

Alternatively multiple formats for the same video can each be provided as a u-video, though it’s unclear if any consuming application would treat these as different formats for the same video, or more likely, different videos in a multi-video post: 

<video controls="controls">
  <source class="u-video" src="http://ben.example.com/camcorder.webm" >
  <source class="u-video" src="http://ben.example.com/camcorder.mp4" >
  warning text only for browsers that do not support the video tag
</video>

How to POSSE

To POSSE video, you may want to consider the following destinations:

Bridgy Publish supports POSSEing video posts to Twitter, Facebook, and Flickr.

IndieWeb Examples

The following indie web sites have video posts.

Aaron Parecki

Aaron Parecki uses p3k to post recorded video with sound since 2014-09-10, e.g.:

Previously, video support was limited to autolinking mp4 files and animated GIFs since 2013-04-25, e.g.:

The video files themselves appear to have one-off named (undated) permalinks at the same domain, and are only shown/visible/posted within the context of short notes posts.

Shane Becker

Shane Becker uses Dark Matter to manually PESOS video posts from Vine and YouTube to http://veganstraightedge.com/videos as of 2013-07-07 (though older posts were ported over then), e.g. newest post appears to be from 2013-05-31:

The video files themselves use datestamped indieweb subdomain URLs of the form:

  • assets.veganstraightedge.com/videos/YYYY/M(M)/D(D)/file-name.mp4

Ben Roberts

Ben Roberts uses Postly to post video since 2015-01-09.

Christian Weiske

Christian Weiske uses <video class="u-featured"> and <source class="u-video"> - e.g. http://cweiske.de/tagebuch/murmelbahn.htm

Ryan Rix

Ryan Rix (rrix) is able to embed both local video elements and YouTube videos in to Arcology since 2016-4-24.

- YouTube videos are provided by adding a `YOUTUBE-URL' to a post - Embedded <video> posts are handled by using Org-mode attachments to add a video file (ogv, mkv, mp4) to the entry.

Sebastiaan Andeweg

Sebastiaan Andeweg posted his first video on 2017-01-28, using the HTML <video>-tag on autoplay and loop, in style of Vine.

Barnaby Walters

Barnaby Walters posted their first video post on 2013-08-16, and has since posted several more. The older ones were not originally posted with u-video, but the class was edited in later.

Past Examples

The following examples all worked at the time of publication (and often for years later), yet as of 2022 appear to be broken (either 404 for the permalink, or 404 for the video resource there). If the permalinks are fixed to work again (including showing the videos therein), they can be moved back into the main examples section above.

Ben Werdmuller

Ben Werdmüller uses Idno to post recorded video, as well as video recorded at the point of upload using a phone, since 2013-08-16. (Previously he'd been uploading to YouTube.) e.g.:

  • http://werd.io/view/520ed6b7bed7de4914317083
    • 2015-12-12 link appears to be 404 - content may have been removed.
  • NEED ANOTHER video post permalink for werd.io!

Each video has a link to the file itself, in case it cannot be played in an embedded state in the browser.

Tantek

Tantek Çelik uses Falcon to post video since 2015-12-12.

Temporarily (24h) the markup used an extra "u-photo" in addition to u-video as a hack to test whether Bridgy Publish's photo support would work for POSSEing video to Twitter and Facebook (which did not work at the time, hence Bridgy issues 572 and 573 were filed, and subsequently implemented!).

Kyle Mahan

Kara Mahan uses Red Wind to post video since 2015-12-13.

Services Examples

Pestagram

pestagram translates instagram video posts into indieweb video posts since 2015-08-18, e.g.

Unmung

unmung turns video podcast feeds into h-feed with video posts, e.g.:

  • TWiG
    • markup uses: <video> tag and u-video!

Proto video examples

Examples resembling but not quite video posts.

Barnaby Walters

Barnaby Walters uses Taproot to post very short silent looping videos in the form of animated GIFs on his site since 2012-12-18, e.g.:

The video files themselves in general appear to have one-off named (undated) permalinks at the same domain, and are only shown/visible/posted within the context of short notes posts.

There is no explicit markup to indicate a video post, or that the img gifs are animated.

Brainstorming

Video Upload UX

A simplest-case Indieweb video system might work like the following:

  • Provide a file upload form, where the file input might have an accept="video/*;capture=camcorder" attribute (the capture=camcorder attribute allows the device's camera to be used, where one exists)
  • Videos can then be uploaded via both desktop & mobile browsers
  • The uploaded file is stored in a location that can be made accessible to site visitors
  • HTML5 video tags are used to display the video on the page.

The size implications of video files created by modern devices (see below) may mean that some video files cannot be uploaded; this is particularly true from mobile connections, or where the user's web server configuration cannot be altered (the default is often very low). It's possible to detect the size of files to be uploaded using Javascript, and perhaps warn the user about files that might be too large.

Animated images / GIFs

Some animated image files may be considered to have movie-like properties. These can be uploaded like standard images.

POSSE Internet Archive

It may make sense to POSSE your videos to the Internet Archive. They have a specific service/site for this.

See Also:

Timestamp links

Inspired by Youtube, video posts could have some JS code which parses the content for timestamps, makes them clickable, and moves the playhead to that location when clicked. Ideally, detect and auto-link them server-side to make them linkable (maybe even webmentionable? with video-synced comment display?!), then the client-side code just looks for a ?t= query string parameter and moves the playhead accordingly.

Silo Examples

The following silos support video posts (with limits)

Alt text

Some silos let you add alt text to videos.

(This is maybe a bit of a misnomer, since the HTML video tag doesn't have the alt attribute, but no matter.)

Bluesky

Bluesky's video upload UI has a clickable Captions and alt text label under the video.

When you click it, you get a text box to enter alt text, and an upload form for uploading a .vtt caption/subtitle file.

When you publish a post with alt text, it's not rendered in the UI, but it's included in the HTML in a figcaption element inside the video element.