video
๐ฅ
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"> alternate text content 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" > alternate text content 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:
- Twitter:
- see https://dev.twitter.com/rest/public/uploading-media#videorecs
- Kyle Mahan has used curl to publish a video to Twitter via silo.pub
- Facebook: (need API docs link for posting video to FB!)
- Flickr: (need API docs link for posting video to Flickr!)
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.:
- http://aaronparecki.com/notes/2015/07/21/4/travel-pdx
- markup:
<video>
tag with<source class="u-video">
markup.
- markup:
Previously, video support was limited to autolinking mp4 files and animated GIFs since 2013-04-25, e.g.:
- http://aaronparecki.com/notes/2013/08/10/2/indieweb - screencast of doing a reply in the browser UI
- http://aaronparecki.com/notes/2013/04/25/1/original-post-discovery - MP4 recording of laptop screen demonstrating original-post-discovery.
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:
- http://veganstraightedge.com/videos/2013/05/31/backyard-squirrel-buddy
- markup:
<video>
tag withu-featured
intending to communicate theposter
attribute<source>
tag inside that element withu-video
with thesrc=
attribute with the video URL.<img>
tag also inside the video element, withu-photo
as fallback content.
- markup:
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.
- https://ben.thatmustbe.me/video/2015/1/9/9/
- markup:
<source>
tag withu-video
- markup:
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.
- https://seblog.nl/2017/01/28/3/day-13-video-on-seblog
- feed on https://seblog.nl/videos (since 2017-07-06, when he posted a second video)
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.
- 2013-08-16, failed email upload, corrected manually
- 2013-08-24, successful email upload from iOS
- 2016-10-13
- 2019-03-01
- 2019-05-22
- 2021-06-11 ๐น marked up with
poster
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.
- http://tantek.com/2015/346/t3/world-of-laughter-tears-hopes-fears (added a poster frame after the fact)
- markup:
<video>
tag withu-video
- manual POSSE: https://twitter.com/t/status/676580070698258432
- markup:
- Posted with poster frame: http://tantek.com/2015/360/t2/best-starwars-speak-droid
- manual POSSE: https://twitter.com/t/status/680897393814994944
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
Kyle Mahan uses Red Wind to post video since 2015-12-13.
- https://kylewm.com/2015/12/war-on-pens-video-test
- markup:
<video>
tag withu-video
- POSSE tweet: https://twitter.com/kylewmahan/status/676118863772188672
- markup:
Services Examples
Pestagram
pestagram translates instagram video posts into indieweb video posts since 2015-08-18, e.g.
- Danielle McDonald's videos
- markup uses:
<video>
tag andu-video
!
- markup uses:
Unmung
unmung turns video podcast feeds into h-feed with video posts, e.g.:
- TWiG
- markup uses:
<video>
tag andu-video
!
- markup uses:
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.:
- http://waterpigs.co.uk/notes/707/
- video file itself originally hosted on dropbox, moved to self hosted 2013-08-16 after discussion in IRC
- (could use domain routing of video.waterpigs.co.uk URLs to hide/abstract the backend storage provider).
- http://waterpigs.co.uk/notes/4REFKL/ - feeding geese
- http://waterpigs.co.uk/notes/4RRNfk/ - screencast of using the webaction toolbelt.
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)
- Facebook (length/size limit?)
- Flickr (90 seconds and 150MB limits.)
- Instagram (15 seconds)
- Twitter might be some information here: https://dev.twitter.com/rest/public/uploading-media#videorecs
- Length limit of 2:20
- Aspect ratio limit of maximum 3:1 (presumably in the other direction too) โ twitter.com will not give you a helpful error message, tweetdeck does
- YouTube (limit depends on account, initially 15 minutes)
- TikTok
Reference
Video formats and compatibility
Video formats have two components: the codec, which is how the media content is encoded (typically separately for both video & audio), and the wrapper, which can be thought of as a file envelope that the video sits in. By far the most common video format is h.264 MP4 (video encoded using the h.264 codec and saved in an MP4 envelope file). This is also referred to as AVC, or MPEG-4 Part 10.
Recording devices
Typically, devices save at a vastly higher bitrate than is strictly necessary, in order to make their cameras seem like they take footage at the best possible quality. This has a number of adverse effects when it comes to actually using that footage: the files are often too big to send, and you can't simply upload a video file as-is and expect users to be able to stream it. A 5 minute iPhone video can easily clock in at 1gb in size. (The iPhone will then tell you you've got to wait for wifi to upload it.)
Most consumer devices record h.264 MP4 video; however, a vast array of incompatible video codecs and envelope formats exists, particularly when professional video equipment is taken into consideration. .3gp video is commonly created by older devices.
Web support
To make matters worse, supported video formats vary by browser. While many browsers support h.264 MP4, this is patent encumbered. As a result, some use the WebM envelope format with VP8 video and Vorbis audio streams. Firefox now delegates to the operating system for MP4 support, but there's no guarantee that this exists.
Web video often doesn't truly stream: it's simply downloaded progressively to the browser, which can begin playing it before the download is complete. Real streaming servers are available, which can adapt the bitrate of the stream to match the recipient's bandwidth.
To truly support HTML5 web video, platforms should think about:
- Supporting both WebM and h.264/MP4
- Transcode videos to a smaller bitrate for use with HTTP progressive downloads on the web (or consider a real media streaming server)
However, uploading a video file from your device and serving it from your web server is often sufficient.
If you choose to compress the file further, it's worth considering whether to transcode manually, using one of the many available applications across all platforms, or to integrate an open source encoder like FFMPEG or Handbrake on the server so as to generate friendly streaming versions once your video has been uploaded.
If you are accepting videos from third parties, you may wish to consider the legal implications. YouTube, for example, always archives the exact file that was uploaded, even though it serves a transcoded version to visitors. That way it can prove that it was not the originator of any copyright violations.
Ben Werdmuller works on latakoo, a service that provides apps to compress the video before upload (making for faster uploads from, eg, mobile devices and shared Internet), but it should be noted that this is a paid service that does not explicitly provide Indieweb support. (It does, however, have an API.)
There is also encode.com which compresses video that you host on your own website, they have a paid per usage service, a monthly plan and a free watermarked trial to test their API. - I ([tomasparks]) have had an free account for years.
There is certainly scope for an indie video app that records video, modifies it in the app, and uploads it to the location of the user's choice (or even makes it available for the user to download and re-upload).
Bit Rate and File Size
When transcoding video to prepare it for upload to your personal site, the three parameters which have the largest effects on video quality and file size are codec, size (e.g. 720p, 1080p, etc) and bit rate.
In the process of posting this 1:43 video, Barnaby Walters experimented with various Handbrake/ffmpeg settings to try to find an acceptable size:quality trade-off.
Starting with a 1080p 50fps 10Mb/s QuickTime Movie file exported from DaVinci Resolve weighing 133MB, hereโs how varying the following parameters in Handbrake affected the transcoded video:
- Codec: Tried webm and H.264 in mp4 container. For the same settings and quality, webp was typically 1.4x the size of mp4.
- todo: add actual size data, I deleted most of the webm files before writing this
- Size: I quickly decided on 720p for the uploaded video
- Bit Rate: I made many different renders at different bit rates, both fixed and adaptive.
- 7Mb/s: 90MB file, looks very close to the original
- 4Mb/s: 54MB, from here each reduction in bit rate results in a minor but noticeable reduction in video quality
- 3Mb/s: 41MB
- 2Mb/s: 28MB, hamster fur starts to look much less crisp
- 1Mb/s: 15MB, noticeably blurry with various compression artifacts
- RF 0 (adaptive bitrate): 183MB (!) comparable with the orignal
- RF 11: 183MB, apparently internally the same as RF 0
- RF 21: 85MB, the Handbrake โFast 720p30โ preset default. Comparable with original.
- RF 30: 27MB, details start to look slightly less crisp, but still better than the comparable 2Mb/s fixed bitrate. This is the video I ended up using.
- RF 35: 14MB, very noticeable blur and compression artifacts, but still watchable
- RF 51: 4.5MB, totally unwatchable, extreme pixelation
Based on these tests, for short (<5min) videos intended to be hosted on personal sites, the following Handbrake/ffmpeg settings are likely a good starting point, resulting in approximately 14MB per minute of 720p video:
- MP4 Codec
- โWeb Optimizedโ checkbox
- 1280 x 720 size (720p)
- Video encoder: H.264
- 30 frames per second
- Quality one of
- Constant Quality: RF 28 (ยฑ2)
- Average Bitrate (kbps): 3000 (i.e. 3Mbps)
FAQ
Open realtime video
Q: Are there any non proprietary ways to do realtime video on the web?
A: Yes! WebRTC
Is an embed a video post
Q: Is an iframe embed, like of a YouTube or Vimeo, a video post?
A: No. With just an iframe, you have no video file to point to. u-video is for the actual video file, not a script that does something to do something, nor an iframe that loads something to load something. Also, video posts should be your video, something you recorded, or animated yourself.
See Also
- poster frame
- audio
- posts
- photos
- videos about the indieweb
- Using HTML5 audio and video
- 2018-07-11 An Invisible Tax on the Web: Video Codecs
AV1 is well on its way to becoming a viable alternative to patented video codecs. As of June 2018, the AV1 1.0 specification is stable and available for public use on a royalty-free basis.
- Initial discussion of poster frame discovery as part of PTD
- transcript
- streaming
- OwnCast
- Quality-adaptive Bit Rate Explanation with starting points for transcoding settings
- transcoding