Merge ../containerchan into containerchan-integration

10 years ago · 71a4a9296c
15 changed files with 1753 additions and 0 deletions
--- a/containerchan/LICENSE.md
+++ b/containerchan/LICENSE.md
@ -0,0 +1,22 @@
+# License
+Copyright (c) 2010-2013 Tinyboard Development Group (tinyboard.org)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+All copyright notices and permission notices (including this file) shall be
+included and remain unedited in all copies or substantial portions of the
+Software. This explicitly includes but is not limited to the Tinyboard copyright
+notices found in the footers of some template files.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/containerchan/README.md
+++ b/containerchan/README.md
@ -0,0 +1,51 @@
+This project is an effort to enable imageboards to host small video clips.  With modern video compression, it's possible to share much higher-quality videos in a few megabytes than what you can do with animated GIF files.
+
+The software here extends [Tinyboard](http://tinyboard.org/) to display metadata and create pseudo-thumbnails for WebM video files.  It is intended to work on very basic web hosting services, including any hosting service that can run Tinyboard.  In particular, it does not depend on any external video conversion software such as FFmpeg or Libav.  Rather, it parses the video container to extract a single frame from the video to use in place of a thumbnail.  If you can run FFmpeg or Libav on your server, it's a good idea to modify this code to use those tools to create true thumbnails; in the future, an option will be added to enable this.
+
+A board using this code can be found at:
+http://containerchan.org/tb/demo/
+
+Be aware that this is beta software.  Please report any bugs you find.
+
+Much of the code is not specific to Tinyboard, and you are welcome to use it in your own projects.  See the [core](https://github.com/ccd0/containerchan/tree/core) branch for a version without material from Tinyboard.
+
+Installation
+------------
+
+Create a directory named cc at the root of your Tinyboard installation.  Upload these files into that directory.
+
+Replace the files templates/post_thread.html and templates/post_reply.html with the files given here.
+
+Move video.png to the static directory.
+
+Add these lines to inc/instance-config.php:
+
+    $config['allowed_ext_files'][] = 'webm';
+    $config['file_icons']['webm'] = 'video.png';
+    $config['additional_javascript'][] = 'cc/settings.js';
+    $config['additional_javascript'][] = 'cc/expandvideo.js';
+    require_once 'cc/posthandler.php';
+    event_handler('post', 'postHandler');
+
+And add this to stylesheets/style.css:
+
+    video.post-image {
+        display: block;
+        float: left;
+        margin: 10px 20px;
+        border: none;
+    }
+    div.post video.post-image {
+        padding: 0px;
+        margin: 10px 25px 5px 5px;
+    }
+    span.settings {
+        position: fixed;
+        top: 1em;
+        right: 1em;
+    }
+
+License
+-------
+
+See [LICENSE.md](https://github.com/ccd0/containerchan/blob/master/LICENSE.md).
--- a/containerchan/collapse.gif
+++ b/containerchan/collapse.gif
--- a/containerchan/expandvideo.js
+++ b/containerchan/expandvideo.js
@ -0,0 +1,235 @@
+/* This file is dedicated to the public domain; you may do as you wish with it. */
+/* Note: This code expects the global variable configRoot to be set. */
+
+function setupVideo(thumb, url) {
+    var video = null;
+    var videoContainer, videoHide;
+    var expanded = false;
+    var hovering = false;
+    var loop = true;
+    var loopControls = [document.createElement("span"), document.createElement("span")];
+    var fileInfo = thumb.parentNode.querySelector(".fileinfo");
+    var mouseDown = false;
+
+    function unexpand() {
+        if (expanded) {
+            expanded = false;
+            if (video.pause) video.pause();
+            videoContainer.style.display = "none";
+            thumb.style.display = "inline";
+            video.style.maxWidth = "inherit";
+            video.style.maxHeight = "inherit";
+        }
+    }
+
+    function unhover() {
+        if (hovering) {
+            hovering = false;
+            if (video.pause) video.pause();
+            videoContainer.style.display = "none";
+            video.style.maxWidth = "inherit";
+            video.style.maxHeight = "inherit";
+        }
+    }
+
+    // Create video element if does not exist yet
+    function getVideo() {
+        if (video == null) {
+            video = document.createElement("video");
+            video.src = url;
+            video.loop = loop;
+            video.innerText = "Your browser does not support HTML5 video.";
+
+            videoHide = document.createElement("img");
+            videoHide.src = configRoot + "cc/collapse.gif";
+            videoHide.alt = "[ - ]";
+            videoHide.title = "Collapse video";
+            videoHide.style.marginLeft = "-15px";
+            videoHide.style.cssFloat = "left";
+            videoHide.addEventListener("click", unexpand, false);
+
+            videoContainer = document.createElement("div");
+            videoContainer.style.paddingLeft = "15px";
+            videoContainer.style.display = "none";
+            videoContainer.appendChild(videoHide);
+            videoContainer.appendChild(video);
+            thumb.parentNode.insertBefore(videoContainer, thumb.nextSibling);
+
+            // Dragging to the left collapses the video
+            video.addEventListener("mousedown", function(e) {
+                if (e.button == 0) mouseDown = true;
+            }, false);
+            video.addEventListener("mouseup", function(e) {
+                if (e.button == 0) mouseDown = false;
+            }, false);
+            video.addEventListener("mouseenter", function(e) {
+                mouseDown = false;
+            }, false);
+            video.addEventListener("mouseout", function(e) {
+                if (mouseDown && e.clientX - video.getBoundingClientRect().left <= 0) {
+                    unexpand();
+                }
+                mouseDown = false;
+            }, false);
+        }
+    }
+
+    // Clicking on thumbnail expands video
+    thumb.addEventListener("click", function(e) {
+        if (setting("videoexpand") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+            getVideo();
+            expanded = true;
+            hovering = false;
+
+            video.style.position = "static";
+            video.style.pointerEvents = "inherit";
+            video.style.display = "inline";
+            videoHide.style.display = "inline";
+            videoContainer.style.display = "block";
+            videoContainer.style.position = "static";
+            thumb.style.display = "none";
+
+            video.muted = (setting("videovolume") == 0);
+            video.volume = setting("videovolume");
+            video.controls = true;
+            if (video.readyState == 0) {
+                video.addEventListener("loadedmetadata", expand2, false);
+            } else {
+                setTimeout(expand2, 0);
+            }
+            video.play();
+            e.preventDefault();
+        }
+    }, false);
+
+    function expand2() {
+        video.style.maxWidth = "100%";
+        video.style.maxHeight = window.innerHeight + "px";
+        var bottom = video.getBoundingClientRect().bottom;
+        if (bottom > window.innerHeight) {
+            window.scrollBy(0, bottom - window.innerHeight);
+        }
+        // work around Firefox volume control bug
+        video.volume = Math.max(setting("videovolume") - 0.001, 0);
+        video.volume = setting("videovolume");
+    }
+
+    // Hovering over thumbnail displays video
+    thumb.addEventListener("mouseover", function(e) {
+        if (setting("videohover")) {
+            getVideo();
+            expanded = false;
+            hovering = true;
+
+            var docRight = document.documentElement.getBoundingClientRect().right;
+            var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right;
+            var maxWidth = docRight - thumbRight - 20;
+            if (maxWidth < 250) maxWidth = 250;
+
+            video.style.position = "fixed";
+            video.style.right = "0px";
+            video.style.top = "0px";
+            var docRight = document.documentElement.getBoundingClientRect().right;
+            var thumbRight = thumb.querySelector("img, video").getBoundingClientRect().right;
+            video.style.maxWidth = maxWidth + "px";
+            video.style.maxHeight = "100%";
+            video.style.pointerEvents = "none";
+
+            video.style.display = "inline";
+            videoHide.style.display = "none";
+            videoContainer.style.display = "inline";
+            videoContainer.style.position = "fixed";
+
+            video.muted = (setting("videovolume") == 0);
+            video.volume = setting("videovolume");
+            video.controls = false;
+            video.play();
+        }
+    }, false);
+
+    thumb.addEventListener("mouseout", unhover, false);
+
+    // Scroll wheel on thumbnail adjusts default volume
+    thumb.addEventListener("wheel", function(e) {
+        if (setting("videohover")) {
+            var volume = setting("videovolume");
+            if (e.deltaY > 0) volume -= 0.1;
+            if (e.deltaY < 0) volume += 0.1;
+            if (volume < 0) volume = 0;
+            if (volume > 1) volume = 1;
+            if (video != null) {
+                video.muted = (volume == 0);
+                video.volume = volume;
+            }
+            changeSetting("videovolume", volume);
+            e.preventDefault();
+        }
+    }, false);
+
+    // [play once] vs [loop] controls
+    function setupLoopControl(i) {
+        loopControls[i].addEventListener("click", function(e) {
+            loop = (i != 0);
+            thumb.href = thumb.href.replace(/([\?&])loop=\d+/, "$1loop=" + i);
+            if (video != null) {
+                video.loop = loop;
+                if (loop && video.currentTime >= video.duration) {
+                    video.currentTime = 0;
+                }
+            }
+            loopControls[i].style.fontWeight = "bold";
+            loopControls[1-i].style.fontWeight = "inherit";
+        }, false);
+    }
+
+    loopControls[0].textContent = "[play once]";
+    loopControls[1].textContent = "[loop]";
+    loopControls[1].style.fontWeight = "bold";
+    for (var i = 0; i < 2; i++) {
+        setupLoopControl(i);
+        loopControls[i].style.whiteSpace = "nowrap";
+        fileInfo.appendChild(document.createTextNode(" "));
+        fileInfo.appendChild(loopControls[i]);
+    }
+}
+
+function setupVideosIn(element) {
+    var thumbs = element.querySelectorAll("a.file");
+    for (var i = 0; i < thumbs.length; i++) {
+        if (/\.webm$/.test(thumbs[i].pathname)) {
+            setupVideo(thumbs[i], thumbs[i].href);
+        } else {
+            var m = thumbs[i].search.match(/\bv=([^&]*)/);
+            if (m != null) {
+                var url = decodeURIComponent(m[1]);
+                if (/\.webm$/.test(url)) setupVideo(thumbs[i], url);
+            }
+        }
+    }
+}
+
+if (window.addEventListener) window.addEventListener("load", function(e) {
+    // Insert menu from settings.js
+    if (typeof settingsMenu != "undefined") document.body.insertBefore(settingsMenu, document.body.firstChild);
+
+    // Setup Javascript events for videos in document now
+    setupVideosIn(document);
+
+    // Setup Javascript events for videos added by updater
+    if (window.MutationObserver) {
+        var observer = new MutationObserver(function(mutations) {
+            for (var i = 0; i < mutations.length; i++) {
+                var additions = mutations[i].addedNodes;
+                if (additions == null) continue;
+                for (var j = 0; j < additions.length; j++) {
+                    var node = additions[j];
+                    if (node.nodeType == 1) {
+                        setupVideosIn(node);
+                    }
+                }
+            }
+        });
+        observer.observe(document.body, {childList: true, subtree: true});
+    }
+}, false);
+
--- a/containerchan/matroska-elements.txt
+++ b/containerchan/matroska-elements.txt
@ -0,0 +1,224 @@
+a45dfa3 container EBML root
+286 uint EBMLVersion a45dfa3
+2f7 uint EBMLReadVersion a45dfa3
+2f2 uint EBMLMaxIDLength a45dfa3
+2f3 uint EBMLMaxSizeLength a45dfa3
+282 string DocType a45dfa3
+287 uint DocTypeVersion a45dfa3
+285 uint DocTypeReadVersion a45dfa3
+6c binary Void *
+3f binary CRC-32 *
+b538667 container SignatureSlot *
+3e8a uint SignatureAlgo b538667
+3e9a uint SignatureHash b538667
+3ea5 binary SignaturePublicKey b538667
+3eb5 binary Signature b538667
+3e5b container SignatureElements b538667
+3e7b container SignatureElementList 3e5b
+2532 binary SignedElement 3e7b
+8538067 container Segment root
+14d9b74 container SeekHead 8538067
+dbb container Seek 14d9b74
+13ab binary SeekID dbb
+13ac uint SeekPosition dbb
+549a966 container Info 8538067
+33a4 binary SegmentUID 549a966
+3384 string SegmentFilename 549a966
+1cb923 binary PrevUID 549a966
+1c83ab string PrevFilename 549a966
+1eb923 binary NextUID 549a966
+1e83bb string NextFilename 549a966
+444 binary SegmentFamily 549a966
+2924 container ChapterTranslate 549a966
+29fc uint ChapterTranslateEditionUID 2924
+29bf uint ChapterTranslateCodec 2924
+29a5 binary ChapterTranslateID 2924
+ad7b1 uint TimecodeScale 549a966
+489 float Duration 549a966
+461 date DateUTC 549a966
+3ba9 string Title 549a966
+d80 string MuxingApp 549a966
+1741 string WritingApp 549a966
+f43b675 container Cluster 8538067
+67 uint Timecode f43b675
+1854 container SilentTracks f43b675
+18d7 uint SilentTrackNumber 1854
+27 uint Position f43b675
+2b uint PrevSize f43b675
+23 binary SimpleBlock f43b675
+20 container BlockGroup f43b675
+21 binary Block 20
+22 binary BlockVirtual 20
+35a1 container BlockAdditions 20
+26 container BlockMore 35a1
+6e uint BlockAddID 26
+25 binary BlockAdditional 26
+1b uint BlockDuration 20
+7a uint ReferencePriority 20
+7b int ReferenceBlock 20
+7d int ReferenceVirtual 20
+24 binary CodecState 20
+35a2 int DiscardPadding 20
+e container Slices 20
+68 container TimeSlice e
+4c uint LaceNumber 68
+4d uint FrameNumber 68
+4b uint BlockAdditionID 68
+4e uint Delay 68
+4f uint SliceDuration 68
+48 container ReferenceFrame 20
+49 uint ReferenceOffset 48
+4a uint ReferenceTimeCode 48
+2f binary EncryptedBlock f43b675
+654ae6b container Tracks 8538067
+2e container TrackEntry 654ae6b
+57 uint TrackNumber 2e
+33c5 uint TrackUID 2e
+3 uint TrackType 2e
+39 uint FlagEnabled 2e
+8 uint FlagDefault 2e
+15aa uint FlagForced 2e
+1c uint FlagLacing 2e
+2de7 uint MinCache 2e
+2df8 uint MaxCache 2e
+3e383 uint DefaultDuration 2e
+34e7a uint DefaultDecodedFieldDuration 2e
+3314f float TrackTimecodeScale 2e
+137f int TrackOffset 2e
+15ee uint MaxBlockAdditionID 2e
+136e string Name 2e
+2b59c string Language 2e
+6 string CodecID 2e
+23a2 binary CodecPrivate 2e
+58688 string CodecName 2e
+3446 uint AttachmentLink 2e
+1a9697 string CodecSettings 2e
+1b4040 string CodecInfoURL 2e
+6b240 string CodecDownloadURL 2e
+2a uint CodecDecodeAll 2e
+2fab uint TrackOverlay 2e
+16aa uint CodecDelay 2e
+16bb uint SeekPreRoll 2e
+2624 container TrackTranslate 2e
+26fc uint TrackTranslateEditionUID 2624
+26bf uint TrackTranslateCodec 2624
+26a5 binary TrackTranslateTrackID 2624
+60 container Video 2e
+1a uint FlagInterlaced 60
+13b8 uint StereoMode 60
+13c0 uint AlphaMode 60
+13b9 uint OldStereoMode 60
+30 uint PixelWidth 60
+3a uint PixelHeight 60
+14aa uint PixelCropBottom 60
+14bb uint PixelCropTop 60
+14cc uint PixelCropLeft 60
+14dd uint PixelCropRight 60
+14b0 uint DisplayWidth 60
+14ba uint DisplayHeight 60
+14b2 uint DisplayUnit 60
+14b3 uint AspectRatioType 60
+eb524 binary ColourSpace 60
+fb523 float GammaValue 60
+383e3 float FrameRate 60
+61 container Audio 2e
+35 float SamplingFrequency 61
+38b5 float OutputSamplingFrequency 61
+1f uint Channels 61
+3d7b binary ChannelPositions 61
+2264 uint BitDepth 61
+62 container TrackOperation 2e
+63 container TrackCombinePlanes 62
+64 container TrackPlane 63
+65 uint TrackPlaneUID 64
+66 uint TrackPlaneType 64
+69 container TrackJoinBlocks 62
+6d uint TrackJoinUID 69
+40 uint TrickTrackUID 2e
+41 binary TrickTrackSegmentUID 2e
+46 uint TrickTrackFlag 2e
+47 uint TrickMasterTrackUID 2e
+44 binary TrickMasterTrackSegmentUID 2e
+2d80 container ContentEncodings 2e
+2240 container ContentEncoding 2d80
+1031 uint ContentEncodingOrder 2240
+1032 uint ContentEncodingScope 2240
+1033 uint ContentEncodingType 2240
+1034 container ContentCompression 2240
+254 uint ContentCompAlgo 1034
+255 binary ContentCompSettings 1034
+1035 container ContentEncryption 2240
+7e1 uint ContentEncAlgo 1035
+7e2 binary ContentEncKeyID 1035
+7e3 binary ContentSignature 1035
+7e4 binary ContentSigKeyID 1035
+7e5 uint ContentSigAlgo 1035
+7e6 uint ContentSigHashAlgo 1035
+c53bb6b container Cues 8538067
+3b container CuePoint c53bb6b
+33 uint CueTime 3b
+37 container CueTrackPositions 3b
+77 uint CueTrack 37
+71 uint CueClusterPosition 37
+70 uint CueRelativePosition 37
+32 uint CueDuration 37
+1378 uint CueBlockNumber 37
+6a uint CueCodecState 37
+5b container CueReference 37
+16 uint CueRefTime 5b
+17 uint CueRefCluster 5b
+135f uint CueRefNumber 5b
+6b uint CueRefCodecState 5b
+941a469 container Attachments 8538067
+21a7 container AttachedFile 941a469
+67e string FileDescription 21a7
+66e string FileName 21a7
+660 string FileMimeType 21a7
+65c binary FileData 21a7
+6ae uint FileUID 21a7
+675 binary FileReferral 21a7
+661 uint FileUsedStartTime 21a7
+662 uint FileUsedEndTime 21a7
+43a770 container Chapters 8538067
+5b9 container EditionEntry 43a770
+5bc uint EditionUID 5b9
+5bd uint EditionFlagHidden 5b9
+5db uint EditionFlagDefault 5b9
+5dd uint EditionFlagOrdered 5b9
+36 container ChapterAtom 5b9 36
+33c4 uint ChapterUID 36
+1654 string ChapterStringUID 36
+11 uint ChapterTimeStart 36
+12 uint ChapterTimeEnd 36
+18 uint ChapterFlagHidden 36
+598 uint ChapterFlagEnabled 36
+2e67 binary ChapterSegmentUID 36
+2ebc uint ChapterSegmentEditionUID 36
+23c3 uint ChapterPhysicalEquiv 36
+f container ChapterTrack 36
+9 uint ChapterTrackNumber f
+0 container ChapterDisplay 36
+5 string ChapString 0
+37c string ChapLanguage 0
+37e string ChapCountry 0
+2944 container ChapProcess 36
+2955 uint ChapProcessCodecID 2944
+50d binary ChapProcessPrivate 2944
+2911 container ChapProcessCommand 2944
+2922 uint ChapProcessTime 2911
+2933 binary ChapProcessData 2911
+254c367 container Tags 8538067
+3373 container Tag 254c367
+23c0 container Targets 3373
+28ca uint TargetTypeValue 23c0
+23ca string TargetType 23c0
+23c5 uint TagTrackUID 23c0
+23c9 uint TagEditionUID 23c0
+23c4 uint TagChapterUID 23c0
+23c6 uint TagAttachmentUID 23c0
+27c8 container SimpleTag 3373 27c8
+5a3 string TagName 27c8
+47a string TagLanguage 27c8
+484 uint TagDefault 27c8
+487 string TagString 27c8
+485 binary TagBinary 27c8
--- a/containerchan/matroska.php
+++ b/containerchan/matroska.php
@ -0,0 +1,524 @@
+<?php
+/* This file is dedicated to the public domain; you may do as you wish with it. */
+
+// Information needed to parse an element type
+class EBMLElementType {
+    public $name;
+    public $datatype;
+    public $validParents;
+}
+
+// Information needed to parse all possible element types in a document
+class EBMLElementTypeList {
+    private $_els;
+    private $_ids;
+
+    public function __construct($filename) {
+        $lines = file($filename);
+        foreach($lines as $line) {
+            $fields = explode(' ', trim($line));
+            $t = new EBMLElementType;
+            $id = hexdec($fields[0]);
+            $t->datatype = $fields[1];
+            $t->name = $fields[2];
+            $t->validParents = array();
+            for ($i = 0; $i + 3 < count($fields); $i++) {
+                if ($fields[$i+3] == '*' || $fields[$i+3] == 'root') {
+                    $t->validParents[$i] = $fields[$i+3];
+                } else {
+                    $t->validParents[$i] = hexdec($fields[$i+3]);
+                }
+            }
+            $this->_els[$id] = $t;
+            $this->_ids[strtoupper($t->name)] = $id;
+        }
+    }
+
+    public function exists($id) {
+        return isset($this->_els[$id]);
+    }
+
+    public function name($id) {
+        if (!isset($this->_els[$id])) return NULL;
+        return $this->_els[$id]->name;
+    }
+
+    public function id($name) {
+        $name = strtoupper($name);
+        if (!isset($this->_ids[$name])) return NULL;
+        return $this->_ids[$name];
+    }
+
+    public function datatype($id) {
+        if ($id == 'root') return 'container';
+        if (!isset($this->_els[$id])) return 'binary';
+        return $this->_els[$id]->datatype;
+    }
+
+    public function validChild($id1, $id2) {
+        if (!isset($this->_els[$id2])) return TRUE;
+        $parents = $this->_els[$id2]->validParents;
+        return in_array('*', $parents) || in_array($id1, $parents);
+    }
+}
+
+// Matroska element types
+global $EBML_ELEMENTS;
+$EBML_ELEMENTS = new EBMLElementTypeList(dirname(__FILE__) . '/matroska-elements.txt');
+
+// Decode big-endian integer
+function ebmlDecodeInt($data, $signed=FALSE, $carryIn=0) {
+    $n = $carryIn;
+    if (strlen($data) > 8) throw new Exception('not supported: integer too long');
+    for ($i = 0; $i < strlen($data); $i++) {
+        if ($n > (PHP_INT_MAX >> 8) || $n < ((-PHP_INT_MAX-1) >> 8)) {
+            $n = floatval($n);
+        }
+        $n = $n * 0x100 + ord($data[$i]);
+        if ($i == 0 && $signed && ($n & 0x80) != 0) {
+            $n -= 0x100;
+        }
+    }
+    return $n;
+}
+
+// Decode big-endian IEEE float
+function ebmlDecodeFloat($data) {
+    switch (strlen($data)) {
+        case 0:
+            return 0;
+        case 4:
+            switch(pack('f', 1e9)) {
+                case '(knN':
+                    $arr = unpack('f', strrev($data));
+                    return $arr[1];
+                case 'Nnk(':
+                    $arr = unpack('f', $data);
+                    return $arr[1];
+                default:
+                    error_log('cannot decode floats');
+                    return NULL;
+            }
+        case 8:
+            switch(pack('d', 1e9)) {
+                case "\x00\x00\x00\x00\x65\xcd\xcd\x41":
+                    $arr = unpack('d', strrev($data));
+                    return $arr[1];
+                case "\x41\xcd\xcd\x65\x00\x00\x00\x00":
+                    $arr = unpack('d', $data);
+                    return $arr[1];
+                default:
+                    error_log('cannot decode floats');
+                    return NULL;
+            }
+        default:
+            error_log('unsupported float length');
+            return NULL;
+    }
+}
+
+// Decode big-endian signed offset from Jan 01, 2000 in nanoseconds
+// Convert to offset from Jan 01, 1970 in seconds
+function ebmlDecodeDate($data) {
+    return ebmlDecodeInt($data, TRUE) * 1e-9 + 946684800;
+}
+
+// Decode data of specified datatype
+function ebmlDecode($data, $datatype) {
+    switch ($datatype) {
+       case 'int':    return ebmlDecodeInt($data, TRUE);
+       case 'uint':   return ebmlDecodeInt($data, FALSE);
+       case 'float':  return ebmlDecodeFloat($data);
+       case 'string': return chop($data, "\0");
+       case 'date':   return ebmlDecodeDate($data);
+       case 'binary': return $data;
+       default: throw new Exception('unknown datatype');
+    }
+}
+
+// Methods for reading data from section of EBML file
+class EBMLReader {
+    private $_fileHandle;
+    private $_offset;
+    private $_size;
+    private $_position;
+
+    public function __construct($fileHandle, $offset=0, $size=NULL) {
+        $this->_fileHandle = $fileHandle;
+        $this->_offset = $offset;
+        $this->_size = $size;
+        $this->_position = 0;
+    }
+
+    // Tell position within data section
+    public function position() {
+        return $this->_position;
+    }
+
+    // Set position within data section
+    public function setPosition($position) {
+        $this->_position = $position;
+    }
+
+    // Total size of data section (NULL if unknown)
+    public function size() {
+        return $this->_size;
+    }
+
+    // Set end of data section
+    public function setSize($size) {
+        if ($this->_size === NULL) {
+            $this->_size = $size;
+        } else {
+            throw new Exception('size already set');
+        }
+    }
+
+    // Determine whether we are at end of data
+    public function endOfData() {
+        if ($this->_size === NULL) {
+            fseek($this->_fileHandle, $this->_offset + $this->_position);
+            fread($this->_fileHandle, 1);
+            if (feof($this->_fileHandle)) {
+                $this->_size = $this->_position;
+                return TRUE;
+            } else {
+                return FALSE;
+            }
+        } else {
+            return $this->_position >= $this->_size;
+        }
+    }
+
+    // Create EBMLReader containing $size bytes and advance
+    public function nextSlice($size) {
+        $slice = new EBMLReader($this->_fileHandle, $this->_offset + $this->_position, $size);
+        if ($size !== NULL) {
+            $this->_position += $size;
+            if ($this->_size !== NULL && $this->_position > $this->_size) {
+                throw new Exception('unexpected end of data');
+            }
+        }
+        return $slice;
+    }
+
+    // Read entire region
+    public function readAll() {
+        if ($this->_size == 0) return '';
+        if ($this->_size === NULL) throw new Exception('unknown length');
+        fseek($this->_fileHandle, $this->_offset);
+        $data = fread($this->_fileHandle, $this->_size);
+        if ($data === FALSE || strlen($data) != $this->_size) {
+            throw new Exception('error reading from file');
+        }
+        return $data;
+    }
+
+    // Read $size bytes
+    public function read($size) {
+        return $this->nextSlice($size)->readAll();
+    }
+
+    // Read variable-length integer
+    public function readVarInt($signed=FALSE) {
+        // Read size and remove flag
+        $n = ord($this->read(1));
+        $size = 0;
+        if ($n == 0) {
+            throw new Exception('not supported: variable-length integer too long');
+        }
+        $flag = 0x80;
+        while (($n & $flag) == 0) {
+            $flag = $flag >> 1;
+            $size++;
+        }
+        $n -= $flag;
+
+        // Read remaining data
+        $rawInt = $this->read($size);
+
+        // Check for all ones
+        if ($n == $flag - 1 && $rawInt == str_repeat("\xFF", $size)) {
+            return NULL;
+        }
+
+        // Range shift for signed integers
+        if ($signed) {
+            if ($flag == 0x01) {
+                $n = ord($rawInt[0]) - 0x80;
+                $rawInt = $rawInt.substr(1);
+            } else {
+                $n -= ($flag >> 1);
+            }
+        }
+
+        // Convert to integer
+        $n = ebmlDecodeInt($rawInt, FALSE, $n);
+
+        // Range shift for signed integers
+        if ($signed) {
+            if ($n == PHP_INT_MAX) {
+                $n = floatval($n);
+            }
+            $n++;
+        }
+
+        return $n;
+    }
+}
+
+// EBML element
+class EBMLElement {
+    private $_id;
+    private $_name;
+    private $_datatype;
+    private $_content;
+    private $_headSize;
+
+    public function __construct($id, $content, $headSize) {
+        global $EBML_ELEMENTS;
+        $this->_id = $id;
+        $this->_name = $EBML_ELEMENTS->name($this->_id);
+        $this->_datatype = $EBML_ELEMENTS->datatype($this->_id);
+        $this->_content = $content;
+        $this->_headSize = $headSize;
+    }
+
+    public function id()       {return $this->_id;}
+    public function name()     {return $this->_name;}
+    public function datatype() {return $this->_datatype;}
+    public function content()  {return $this->_content;}
+    public function headSize() {return $this->_headSize;}
+
+    // Total size of element (including ID and datasize)
+    public function size() {
+        return $this->_headSize + $this->_content->size();
+    }
+
+    // Read and interpret content
+    public function value() {
+        if ($this->_datatype == 'binary') {
+            return $this->_content;
+        } else {
+            return ebmlDecode($this->_content->readAll(), $this->_datatype);
+        }
+    }
+}
+
+// Iterate over EBML elements in data
+class EBMLElementList extends EBMLElement implements Iterator {
+    private $_cache;
+    private $_position;
+    private static $MAX_ELEMENTS = 10000;
+
+    public function __construct($id, $content, $headSize) {
+        parent::__construct($id, $content, $headSize);
+        $this->_cache = array();
+        $this->_position = 0;
+    }
+
+    public function rewind() {
+        $this->_position = 0;
+    }
+
+    public function current() {
+        if ($this->valid()) {
+            return $this->_cache[$this->_position];
+        } else {
+            return NULL;
+        }
+    }
+
+    public function key() {
+        return $this->_position;
+    }
+
+    public function next() {
+        $this->_position += $this->current()->size();
+        if ($this->content()->size() !== NULL && $this->_position > $this->content()->size()) {
+            throw new Exception('unexpected end of data');
+        }
+    }
+
+    public function valid() {
+        global $EBML_ELEMENTS;
+        if (isset($this->_cache[$this->_position])) return TRUE;
+        $this->content()->setPosition($this->_position);
+        if ($this->content()->endOfData()) return FALSE;
+        $id = $this->content()->readVarInt();
+        if ($id === NULL) throw new Exception('invalid ID');
+        if ($this->content()->size() === NULL && !$EBML_ELEMENTS->validChild($this->id(), $id)) {
+            $this->content()->setSize($this->_position);
+            return FALSE;
+        }
+        $size = $this->content()->readVarInt();
+        $headSize = $this->content()->position() - $this->_position;
+        $content = $this->content()->nextSlice($size);
+        if ($EBML_ELEMENTS->datatype($id) == 'container') {
+            $element = new EBMLElementList($id, $content, $headSize);
+        } else {
+            if ($size === NULL) {
+                throw new Exception('non-container element of unknown size');
+            }
+            $element = new EBMLElement($id, $content, $headSize);
+        }
+        $this->_cache[$this->_position] = $element;
+        return TRUE;
+    }
+
+    // Total size of element (including ID and size)
+    public function size() {
+        if ($this->content()->size() === NULL) {
+            $iElement = 0;
+            foreach ($this as $element) { // iterate over elements to find end
+                $iElement++;
+                if ($iElement > self::$MAX_ELEMENTS) throw new Exception('not supported: too many elements');
+            }
+        }
+        return $this->headSize() + $this->content()->size();
+    }
+
+    // Read and interpret content
+    public function value() {
+        return $this;
+    }
+
+    // Get element value by name
+    public function get($name, $defaultValue=NULL) {
+        $iElement = 0;
+        foreach ($this as $element) {
+            $iElement++;
+            if ($iElement > self::$MAX_ELEMENTS) throw new Exception('not supported: too many elements');
+            if (strtoupper($element->name()) == strtoupper($name)) {
+                return $element->value();
+            }
+        }
+        return $defaultValue;
+    }
+}
+
+// Parse block
+class MatroskaBlock {
+    const LACING_NONE = 0;
+    const LACING_XIPH = 1;
+    const LACING_EBML = 3;
+    const LACING_FIXED = 2;
+    public $trackNumber;
+    public $timecode;
+    public $keyframe;
+    public $invisible;
+    public $lacing;
+    public $discardable;
+    public $frames;
+
+    public function __construct($reader) {
+        # Header
+        $this->trackNumber = $reader->readVarInt();
+        $this->timecode = ebmlDecodeInt($reader->read(2), TRUE);
+        $flags = ord($reader->read(1));
+        if (($flags & 0x70) != 0) {
+            throw new Exception('reserved flags set');
+        }
+        $this->keyframe = (($flags & 0x80) != 0);
+        $this->invisible = (($flags & 0x08) != 0);
+        $this->lacing = ($flags >> 1) & 0x03;
+        $this->discardable = (($flags & 0x01) != 0);
+
+        # Lacing sizes
+        if ($this->lacing == self::LACING_NONE) {
+            $nsizes = 0;
+        } else {
+            $nsizes = ord($reader->read(1));
+        }
+        $sizes = array();
+        switch ($this->lacing) {
+            case self::LACING_XIPH:
+                for ($i = 0; $i < $nsizes; $i++) {
+                    $size = 0;
+                    $x = 255;
+                    while ($x == 255) {
+                        $x = ord($reader->read(1));
+                        $size += $x;
+                        if ($size > 65536) throw new Exception('not supported: laced frame too long');
+                    }
+                    $sizes[$i] = $size;
+                }
+                break;
+            case self::LACING_EBML:
+                $size = 0;
+                for ($i = 0; $i < $nsizes; $i++) {
+                    $dsize = $reader->readVarInt($i != 0);
+                    if ($dsize === NULL || $size + $dsize < 0) {
+                        throw new Exception('invalid frame size');
+                    }
+                    $size += $dsize;
+                    $sizes[$i] = $size;
+                }
+                break;
+            case self::LACING_FIXED:
+                $lenRemaining = $reader->size() - $reader->position();
+                if ($lenRemaining % ($nsizes + 1) != 0) {
+                    throw new Exception('data size not divisible by frame count');
+                }
+                $size = (int) ($lenRemaining / ($nsizes + 1));
+                for ($i = 0; $i < $nsizes; $i++) {
+                    $sizes[$i] = $size;
+                }
+                break;
+        }
+
+        # Frames
+        $this->frames = array();
+        for ($i = 0; $i < $nsizes; $i++) {
+            $this->frames[$i] = $reader->nextSlice($sizes[$i]);
+        }
+        $this->frames[$nsizes] = $reader->nextSlice($reader->size() - $reader->position());
+    }
+}
+
+// Create element list from $fileHandle
+function readMatroska($fileHandle) {
+    $reader = new EBMLReader($fileHandle);
+    if ($reader->read(4) != "\x1a\x45\xdf\xa3") {
+        throw new Exception('not an EBML file');
+    }
+    $root = new EBMLElementList('root', $reader, 0);
+    $header = $root->get('EBML');
+    $ebmlVersion = $header->get('EBMLReadVersion', 1);
+    $docType = $header->get('DocType');
+    $docTypeVersion = $header->get('DocTypeReadVersion', 1);
+    if ($ebmlVersion != 1) {
+        throw new Exception('unsupported EBML version');
+    }
+    if ($docType != 'matroska' && $docType != 'webm') {
+        throw new Exception ('unsupported document type');
+    }
+    if ($docTypeVersion < 1 || $docTypeVersion > 4) {
+        throw new Exception ('unsupported document type version');
+    }
+    return $root;
+}
+
+function ebmlEncodeVarInt($n) {
+    $data = '';
+    $flag = 0x80;
+    while ($n >= $flag) {
+        if ($flag == 0) {
+            throw new Exception('not supported: number too large');
+        }
+        $data = chr($n & 0xFF) . $data;
+        $n = $n >> 8;
+        $flag = $flag >> 1;
+    }
+    $data = chr($n | $flag) . $data;
+    return $data;
+}
+
+function ebmlEncodeElementName($name) {
+    global $EBML_ELEMENTS;
+    return ebmlEncodeVarInt($EBML_ELEMENTS->id($name));
+}
+
+function ebmlEncodeElement($name, $content) {
+    return ebmlEncodeElementName($name) . ebmlEncodeVarInt(strlen($content)) . $content;
+}
--- a/containerchan/player.php
+++ b/containerchan/player.php
@ -0,0 +1,25 @@
+<?php 
+/* This file is dedicated to the public domain; you may do as you wish with it. */
+$params = '?v=' . urlencode($_GET['v']) . '&amp;t=' . urlencode($_GET['t']);
+$loop = ($_GET['loop'] != "0");
+?><!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title><?php echo htmlspecialchars($_GET['t']); ?></title>
+    <link rel="stylesheet" href="playerstyle.css">
+    <script src="settings.js"></script>
+    <script src="playersettings.js"></script>
+</head>
+<body>
+    <div id="playerheader">
+        <a id="loop0" href="<?php echo $params; ?>&amp;loop=0"<?php if (!$loop) echo ' style="font-weight: bold"'; ?>>[play once]</a>
+        <a id="loop1" href="<?php echo $params; ?>&amp;loop=1"<?php if ($loop) echo ' style="font-weight: bold"'; ?>>[loop]</a>
+    </div>
+    <div id="playercontent">
+        <video controls<?php if ($loop) echo ' loop'; ?> src="<?php echo htmlspecialchars($_GET['v']); ?>">
+            Your browser does not support HTML5 video. <a href="<?php echo htmlspecialchars($_GET['v']); ?>">[Download]</a>
+        </video>
+    </div>
+</body>
+</html>
--- a/containerchan/playersettings.js
+++ b/containerchan/playersettings.js
@ -0,0 +1,28 @@
+/* This file is dedicated to the public domain; you may do as you wish with it. */
+if (window.addEventListener) window.addEventListener("load", function(e) {
+    document.getElementById("playerheader").appendChild(settingsMenu);
+
+    var video = document.getElementsByTagName("video")[0];
+
+    var loopLinks = [document.getElementById("loop0"), document.getElementById("loop1")];
+    function setupLoopLink(i) {
+        loopLinks[i].addEventListener("click", function(e) {
+            if (!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
+                video.loop = (i != 0);
+                if (i != 0 && video.currentTime >= video.duration) {
+                    video.currentTime = 0;
+                }
+                loopLinks[i].style.fontWeight = "bold";
+                loopLinks[1-i].style.fontWeight = "inherit";
+                e.preventDefault();
+            }
+        }, false);
+    }
+    for (var i = 0; i < 2; i++) {
+        setupLoopLink(i);
+    }
+
+    video.muted = (setting("videovolume") == 0);
+    video.volume = setting("videovolume");
+    video.play();
+}, false);
--- a/containerchan/playerstyle.css
+++ b/containerchan/playerstyle.css
@ -0,0 +1,39 @@
+/* This file is dedicated to the public domain; you may do as you wish with it. */
+body {
+    background: black;
+    color: white;
+    margin: 0px;
+}
+#playerheader {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    height: 24px;
+    padding: 0px 4px;
+    text-align: right;
+    font-size: 16px;
+}
+#playerheader a {
+    color: white;
+    text-decoration: none;
+}
+span.settings div {
+    background: black;
+    z-index: 1;
+    padding-right: 4px;
+}
+#playercontent {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 24px;
+    bottom: 0px;
+}
+video {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+    max-height: 100%;
+}
--- a/containerchan/post_reply.html
+++ b/containerchan/post_reply.html
@ -0,0 +1,126 @@
+{% filter remove_whitespace %}
+{# tabs and new lines will be ignored #}
+<div class="post reply" id="reply_{{ post.id }}">
+
+<p class="intro"{% if not index %} id="{{ post.id }}"{% endif %}>
+	<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
+	<label for="delete_{{ post.id }}">
+		{% if post.subject|length > 0 %}
+			{# show subject #}
+			<span class="subject">{{ post.subject|bidi_cleanup }}</span> 
+		{% endif %}
+		{% if post.email|length > 0 %}
+			{# start email #}
+			<a class="email" href="mailto:{{ post.email }}">
+		{% endif %}
+		{% set capcode = post.capcode|capcode %}
+		<span {% if capcode.name %}style="{{ capcode.name }}" {% endif %}class="name">{{ post.name|bidi_cleanup }}</span>
+		{% if post.trip|length > 0 %}
+			<span {% if capcode.trip %}style="{{ capcode.trip }}" {% endif %}class="trip">{{ post.trip }}</span>
+		{% endif %}
+		{% if post.email|length > 0 %}
+			{# end email #}
+			</a>
+		{% endif %}
+		{% if capcode %}
+			{{ capcode.cap }}
+		{% endif %}
+		{% if post.mod and post.mod|hasPermission(config.mod.show_ip, board.uri) %}
+			 [<a class="ip-link" style="margin:0;" href="?/IP/{{ post.ip }}">{{ post.ip }}</a>]
+		{% endif %}
+		{% if config.display_flags and post.modifiers.flag %}
+			 <img class="flag" src="{{ config.uri_flags|sprintf(post.modifiers.flag) }}"
+			 	style="{% if post.modifiers['flag style'] %}{{ post.modifiers['flag style'] }}{% else %}{{ config.flag_style }}{% endif %}"
+			 {% if post.modifiers['flag alt'] %}alt="{{ post.modifiers['flag alt'] | e('html_attr') }}" title="{{ post.modifiers['flag alt'] | e('html_attr') }}"{% endif %}>
+		{% endif %}
+		 <time datetime="{{ post.time|date('%Y-%m-%dT%H:%M:%S') }}{{ timezone() }}">{{ post.time|date(config.post_date) }}</time>
+	</label>
+	{% if config.poster_ids %}
+		 ID: {{ post.ip|poster_id(post.thread) }}
+	{% endif %}
+	 <a class="post_no" onclick="return document.querySelectorAll('div.banner').length ? highlightReply({{ post.id }}) : true;" href="{{ post.link }}">No.</a>
+	<a class="post_no" onclick="return document.querySelectorAll('div.banner').length ? citeReply({{ post.id }}) : true;" href="{{ post.link('q') }}">
+		{{ post.id }}
+	</a>
+	</p>
+	{% if post.embed %}
+		{{ post.embed }}
+	{% elseif post.file == 'deleted' %}
+		<img class="post-image deleted" src="{{ config.image_deleted }}" alt="" />
+	{% elseif post.file and post.file %}
+		<p class="fileinfo">File: <a href="{{ config.uri_img }}{{ post.file }}">{{ post.file }}</a> <span class="unimportant">
+		(
+			{% if post.thumb == 'spoiler' %}
+				Spoiler Image, 
+			{% endif %}
+			{{ post.filesize|filesize }}
+			{% if post.filewidth and post.fileheight %}
+				, {{ post.filewidth}}x{{ post.fileheight }}
+				{% if config.show_ratio %}
+					, {{ post.ratio }}
+				{% endif %}
+			{% endif %}
+			{% if config.show_filename and post.filename %}
+				, 
+				{% if post.filename|length > config.max_filename_display %}
+					<span class="postfilename" title="{{ post.filename|e }}">{{ post.filename|truncate(config.max_filename_display)|bidi_cleanup }}</span>
+				{% else %}
+					<span class="postfilename">{{ post.filename|e|bidi_cleanup }}</span>
+				{% endif %}
+			{% endif %}
+			{% if post.thumb != 'file' and config.image_identification %}
+				,
+				<span class='image_id'>
+				 <a href="http://imgops.com/{{ config.domain }}{{ config.uri_img }}{{ post.file }}">io</a>
+				{% if post.file|extension == 'jpg' %}
+					 <a href="http://regex.info/exif.cgi?url={{ config.domain }}{{ config.uri_img }}{{ post.file }}">e</a>
+				{% endif %}
+				 <a href="http://www.google.com/searchbyimage?image_url={{ config.domain }}{{ config.uri_img }}{{ post.file }}">g</a>
+				 <a href="http://www.tineye.com/search?url={{ config.domain }}{{ config.uri_img }}{{ post.file }}">t</a>
+				</span>
+			{% endif %}
+
+		)
+		</span>
+</p>
+	<a href="
+		{% if post.file|extension == 'webm' %}
+			{{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&amp;t={{ post.filename|e('url') }}&amp;loop=1
+		{% else %}
+			{{ config.uri_img }}{{ post.file }}
+		{% endif %}" target="_blank"{% if post.thumb == 'file' or post.modifiers['is_file'] == '1' or post.filename|extension == 'webm' %} class="file"{% endif %}>
+	{% if post.thumb|extension == 'webm' %}
+		<video autoplay class="post-image" src="{{ config.uri_thumb }}{{ post.thumb }}" poster="
+			{{ config.root }}
+			{% if config.file_icons[post.filename|extension] %}
+				{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
+			{% else %}
+				{{ config.file_thumb|sprintf(config.file_icons.default) }}
+			{% endif %}" style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px"></video>
+	{% else %}
+		<img class="post-image" src="
+			{% if post.thumb == 'file' %}
+				{{ config.root }}
+				{% if config.file_icons[post.filename|extension] %}
+					{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
+				{% else %}
+					{{ config.file_thumb|sprintf(config.file_icons.default) }}
+				{% endif %}
+			{% elseif post.thumb == 'spoiler' %}
+				{{ config.root }}{{ config.spoiler_image }}
+			{% else %}
+				{{ config.uri_thumb }}{{ post.thumb }}
+			{% endif %}" style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt="" />
+	{% endif %}
+	</a>
+	{% endif %}
+	{{ post.postControls }}
+	<div class="body">
+		{% endfilter %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% filter remove_whitespace %}
+		{% if post.modifiers['ban message'] %}
+			{{ config.mod.ban_message|sprintf(post.modifiers['ban message']) }}
+		{% endif %}
+	</div>
+</div>
+<br/>
+{% endfilter %}
--- a/containerchan/post_thread.html
+++ b/containerchan/post_thread.html
@ -0,0 +1,176 @@
+{% filter remove_whitespace %}
+{# tabs and new lines will be ignored #}
+
+<div id="thread_{{ post.id }}">
+
+{% if post.embed %}
+	{{ post.embed }}
+{% elseif post.file == 'deleted' %}
+	<img class="post-image deleted" src="{{ config.image_deleted }}" alt="" />
+{% elseif post.file and post.file %}
+	<p class="fileinfo">{% trans %}File:{% endtrans %} <a href="{{ config.uri_img }}{{ post.file }}">{{ post.file }}</a> <span class="unimportant">
+	(
+		{% if post.thumb == 'spoiler' %}
+			{% trans %}Spoiler Image{% endtrans %}, 
+		{% endif %}
+		{{ post.filesize|filesize }}
+		{% if post.filewidth and post.fileheight %}
+			, {{ post.filewidth}}x{{ post.fileheight }}
+			{% if config.show_ratio %}
+				, {{ post.ratio }}
+			{% endif %}
+		{% endif %}
+		{% if config.show_filename and post.filename %}
+			, 
+			{% if post.filename|length > config.max_filename_display %}
+				<span class="postfilename" title="{{ post.filename|e }}">{{ post.filename|truncate(config.max_filename_display)|bidi_cleanup }}</span>
+			{% else %}
+				<span class="postfilename">{{ post.filename|e|bidi_cleanup }}</span>
+			{% endif %}
+		{% endif %}
+		{% if post.thumb != 'file' and config.image_identification %}
+			, 
+			<span class='image_id'>
+			 <a href="http://imgops.com/{{ config.domain }}{{ config.uri_img }}{{ post.file }}">io</a>
+			{% if post.file|extension == 'jpg' %}
+				 <a href="http://regex.info/exif.cgi?url={{ config.domain }}{{ config.uri_img }}{{ post.file }}">e</a>
+			{% endif %}
+			 <a href="http://www.google.com/searchbyimage?image_url={{ config.domain }}{{ config.uri_img }}{{ post.file }}">g</a>
+			 <a href="http://www.tineye.com/search?url={{ config.domain }}{{ config.uri_img }}{{ post.file }}">t</a>
+			</span>
+		{% endif %}
+	)
+	</span></p>
+<a href="
+	{% if post.file|extension == 'webm' %}
+		{{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&amp;t={{ post.filename|e('url') }}&amp;loop=1
+	{% else %}
+		{{ config.uri_img }}{{ post.file }}
+	{% endif %}" target="_blank"{% if post.thumb == 'file' or post.modifiers['is_file'] == '1' or post.filename|extension == 'webm' %} class="file"{% endif %}>
+	{% if post.thumb|extension == 'webm' %}
+		<video autoplay class="post-image" src="{{ config.uri_thumb }}{{ post.thumb }}" poster="
+			{{ config.root }}
+			{% if config.file_icons[post.filename|extension] %}
+				{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
+			{% else %}
+				{{ config.file_thumb|sprintf(config.file_icons.default) }}
+			{% endif %}" style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px"></video>
+	{% else %}
+		<img class="post-image" src="
+			{% if post.thumb == 'file' %}
+				{{ config.root }}
+				{% if config.file_icons[post.filename|extension] %}
+					{{ config.file_thumb|sprintf(config.file_icons[post.filename|extension]) }}
+				{% else %}
+					{{ config.file_thumb|sprintf(config.file_icons.default) }}
+				{% endif %}
+			{% elseif post.thumb == 'spoiler' %}
+				{{ config.root }}{{ config.spoiler_image }}
+			{% else %}
+				{{ config.uri_thumb }}{{ post.thumb }}
+			{% endif %}" style="width:{{ post.thumbwidth }}px;height:{{ post.thumbheight }}px" alt="" />
+	{% endif %}
+	</a>
+{% endif %}
+<div class="post op"><p class="intro"{% if not index %} id="{{ post.id }}"{% endif %}>
+	<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
+	<label for="delete_{{ post.id }}">
+		{% if post.subject|length > 0 %}
+			{# show subject #}
+			<span class="subject">{{ post.subject|bidi_cleanup }}</span> 
+		{% endif %}
+		{% if post.email|length > 0 %}
+			{# start email #}
+			<a class="email" href="mailto:{{ post.email }}">
+		{% endif %}
+		{% set capcode = post.capcode|capcode %}
+		<span {% if capcode.name %}style="{{ capcode.name }}" {% endif %}class="name">{{ post.name|bidi_cleanup }}</span>
+		{% if post.trip|length > 0 %}
+			<span {% if capcode.trip %}style="{{ capcode.trip }}" {% endif %}class="trip">{{ post.trip }}</span>
+		{% endif %}
+		{% if post.email|length > 0 %}
+			{# end email #}
+			</a>
+		{% endif %}
+		{% if capcode %}
+			{{ capcode.cap }}
+		{% endif %}
+		{% if post.mod and post.mod|hasPermission(config.mod.show_ip, board.uri) %}
+			 [<a class="ip-link" style="margin:0;" href="?/IP/{{ post.ip }}">{{ post.ip }}</a>]
+		{% endif %}
+		{% if config.display_flags and post.modifiers.flag %}
+			 <img class="flag" src="{{ config.uri_flags|sprintf(post.modifiers.flag) }}"
+			 	style="{% if post.modifiers['flag style'] %}{{ post.modifiers['flag style'] }}{% else %}{{ config.flag_style }}{% endif %}"
+			 {% if post.modifiers['flag alt'] %}alt="{{ post.modifiers['flag alt'] | e('html_attr') }}" title="{{ post.modifiers['flag alt'] | e('html_attr') }}"{% endif %}>
+		{% endif %}
+		 <time datetime="{{ post.time|date('%Y-%m-%dT%H:%M:%S') }}{{ timezone() }}">{{ post.time|date(config.post_date) }}</time>
+	</label>
+	{% if config.poster_ids %}
+		 ID: {{ post.ip|poster_id(post.id) }}
+	{% endif %}
+         <a class="post_no" onclick="return document.querySelectorAll('div.banner').length ? highlightReply({{ post.id }}) : true;" href="{{ post.link }}">No.</a>
+        <a class="post_no" onclick="return document.querySelectorAll('div.banner').length ? citeReply({{ post.id }}) : true;" href="{{ post.link('q') }}">
+                {{ post.id }}
+        </a>
+	{% if post.sticky %}
+		{% if config.font_awesome %}
+			<i class="fa fa-thumb-tack"></i>
+		{% else %}
+			<img class="icon" title="Sticky" src="{{ config.image_sticky }}" alt="Sticky" />
+		{% endif %}
+	{% endif %}
+	{% if post.locked %}
+		{% if config.font_awesome %}
+			<i class="fa fa-lock"></i>
+		{% else %}
+			<img class="icon" title="Locked" src="{{ config.image_locked }}" alt="Locked" />
+		{% endif %}
+	{% endif %}
+	{% if post.bumplocked and (config.mod.view_bumplock < 0 or (post.mod and post.mod|hasPermission(config.mod.view_bumplock, board.uri))) %}
+		{% if config.font_awesome %}
+			<i class="fa fa-anchor"></i>
+		{% else %}
+			<img class="icon" title="Bumplocked" src="{{ config.image_bumplocked }}" alt="Bumplocked" />
+		{% endif %}
+	{% endif %}
+	{% if index %}
+		<a href="{{ post.root }}{{ board.dir }}{{ config.dir.res }}{{ config.file_page|sprintf(post.id) }}">[{% trans %}Reply{% endtrans %}]</a>
+	{% endif %}
+	{{ post.postControls }}
+	</p>
+	<div class="body">
+		{% endfilter %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% filter remove_whitespace %}
+		{% if post.modifiers['ban message'] %}
+			{{ config.mod.ban_message|sprintf(post.modifiers['ban message']) }}
+		{% endif %}
+	</div>
+	{% if post.omitted or post.omitted_images %}
+		<span class="omitted">
+			{% if post.omitted %}
+				{% trans %}
+					1 post
+				{% plural post.omitted %}
+					{{ count }} posts
+				{% endtrans %}
+				{% if post.omitted_images %}
+					 {% trans %}and{% endtrans %} 
+				{% endif %}
+			{% endif %}
+			{% if post.omitted_images %}
+				{% trans %}
+					1 image reply
+				{% plural post.omitted_images %}
+					{{ count }} image replies
+				{% endtrans %}
+			{% endif %} {% trans %}omitted. Click reply to view.{% endtrans %}
+		</span>
+	{% endif %}
+{% if not index %}
+{% endif %}
+</div>{% endfilter %}
+{% set hr = post.hr %}
+{% for post in post.posts %}
+	{% include 'post_reply.html' %}
+{% endfor %}
+<br class="clear"/>{% if hr %}<hr/>{% endif %}
+</div>
--- a/containerchan/posthandler.php
+++ b/containerchan/posthandler.php
@ -0,0 +1,49 @@
+<?php
+// Glue code for handling a Tinyboard post.
+// Portions of this file are derived from Tinyboard code.
+
+function postHandler($post) {
+    global $board, $config;
+
+    if ($post->has_file && $post->extension == 'webm') {
+        require_once dirname(__FILE__) . '/videodata.php';
+        $videoDetails = videoData($post->file_path);
+        if (!isset($videoDetails['container']) || $videoDetails['container'] != 'webm') return "not a WebM file";
+
+        // Set thumbnail
+        $thumbName = $board['dir'] . $config['dir']['thumb'] . $post->file_id . '.webm';
+        if ($config['spoiler_images'] && isset($_POST['spoiler'])) {
+            // Use spoiler thumbnail
+            $post->thumb = 'spoiler';
+            $size = @getimagesize($config['spoiler_image']);
+            $post->thumbwidth = $size[0];
+            $post->thumbheight = $size[1];
+        } elseif (isset($videoDetails['frame']) && $thumbFile = fopen($thumbName, 'wb')) {
+            // Use single frame from video as pseudo-thumbnail
+            fwrite($thumbFile, $videoDetails['frame']);
+            fclose($thumbFile);
+            $post->thumb = $post->file_id . '.webm';
+        } else {
+            // Fall back to file thumbnail
+            $post->thumb = 'file';
+        }
+        unset($videoDetails['frame']);
+
+        // Set width and height
+        if (isset($videoDetails['width']) && isset($videoDetails['height'])) {
+            $post->width = $videoDetails['width'];
+            $post->height = $videoDetails['height'];
+            if ($post->thumb != 'file' && $post->thumb != 'spoiler') {
+                $thumbMaxWidth = $post->op ? $config['thumb_op_width'] : $config['thumb_width'];
+                $thumbMaxHeight = $post->op ? $config['thumb_op_height'] : $config['thumb_height'];
+                if ($videoDetails['width'] > $thumbMaxWidth || $videoDetails['height'] > $thumbMaxHeight) {
+                    $post->thumbwidth = min($thumbMaxWidth, intval(round($videoDetails['width'] * $thumbMaxHeight / $videoDetails['height'])));
+                    $post->thumbheight = min($thumbMaxHeight, intval(round($videoDetails['height'] * $thumbMaxWidth / $videoDetails['width'])));
+                } else {
+                    $post->thumbwidth = $videoDetails['width'];
+                    $post->thumbheight = $videoDetails['height'];
+                }
+            }
+        }
+    }
+}
--- a/containerchan/settings.js
+++ b/containerchan/settings.js
@ -0,0 +1,81 @@
+/* This file is dedicated to the public domain; you may do as you wish with it. */
+
+// Default settings
+var defaultSettings = {
+    "videoexpand": true,
+    "videohover": false,
+    "videovolume": 1.0
+};
+
+// Non-persistent settings for when localStorage is absent/disabled
+var tempSettings = {};
+
+// Scripts obtain settings by calling this function
+function setting(name) {
+    if (localStorage) {
+        if (localStorage[name] === undefined) return defaultSettings[name];
+        return JSON.parse(localStorage[name]);
+    } else {
+        if (tempSettings[name] === undefined) return defaultSettings[name];
+        return tempSettings[name];
+    }
+}
+
+// Settings should be changed with this function
+function changeSetting(name, value) {
+    if (localStorage) {
+        localStorage[name] = JSON.stringify(value);
+    } else {
+        tempSettings[name] = value;
+    }
+}
+
+// Create settings menu
+var settingsMenu = document.createElement("span");
+settingsMenu.className = "settings";
+settingsMenu.innerHTML = '<span>[Settings]</span>'
+    + '<div style="display: none; text-align: left; position: absolute; right: 0px; margin-left: -999em; margin-top: -1px; padding-top: 1px;">'
+    + '<label><input type="checkbox" name="videoexpand">Expand videos inline</label><br>'
+    + '<label><input type="checkbox" name="videohover">Play videos on hover</label><br>'
+    + '<label><input type="range" name="videovolume" min="0" max="1" step="0.01" style="width: 4em; height: 1ex; vertical-align: middle; margin: 0px;">Default volume</label><br>'
+    + '</div>';
+
+function refreshSettings() {
+    var settingsItems = settingsMenu.getElementsByTagName("input");
+    for (var i = 0; i < settingsItems.length; i++) {
+        var control = settingsItems[i];
+        if (control.type == "checkbox") {
+            control.checked = setting(control.name);
+        } else if (control.type == "range") {
+            control.value = setting(control.name);
+        }
+    }
+}
+
+function setupControl(control) {
+    if (control.addEventListener) control.addEventListener("change", function(e) {
+        if (control.type == "checkbox") {
+            changeSetting(control.name, control.checked);
+        } else if (control.type == "range") {
+            changeSetting(control.name, control.value);
+        }
+    }, false);
+}
+
+refreshSettings();
+var settingsItems = settingsMenu.getElementsByTagName("input");
+for (var i = 0; i < settingsItems.length; i++) {
+    setupControl(settingsItems[i]);
+}
+
+if (settingsMenu.addEventListener) {
+    settingsMenu.addEventListener("mouseover", function(e) {
+        refreshSettings();
+        settingsMenu.getElementsByTagName("span")[0].style.fontWeight = "bold";
+        settingsMenu.getElementsByTagName("div")[0].style.display = "block";
+    }, false);
+    settingsMenu.addEventListener("mouseout", function(e) {
+        settingsMenu.getElementsByTagName("span")[0].style.fontWeight = "normal";
+        settingsMenu.getElementsByTagName("div")[0].style.display = "none";
+    }, false);
+}
--- a/containerchan/video.png
+++ b/containerchan/video.png
--- a/containerchan/videodata.php
+++ b/containerchan/videodata.php
@ -0,0 +1,173 @@
+<?php
+/* This file is dedicated to the public domain; you may do as you wish with it. */
+require dirname(__FILE__) . '/matroska.php';
+
+function matroskaSeekElement($name, $pos) {
+    return ebmlEncodeElement('Seek',
+        ebmlEncodeElement('SeekID', ebmlEncodeElementName($name))
+        . ebmlEncodeElement('SeekPosition', pack('N', $pos))
+    );
+}
+
+// Make video from single WebM keyframe
+function muxWebMFrame($videoTrack, $frame) {
+    $lenSeekHead = 73;
+    $lenCues = 24;
+
+    // Determine version for EBML header
+    $version = 2;
+    $videoAttr = $videoTrack->get('Video');
+    if (isset($videoAttr)) {
+        if ($videoAttr->get('StereoMode') !== NULL) $version = 3;
+        if ($videoAttr->get('AlphaMode') !== NULL) $version = 3;
+    }
+    if ($videoTrack->get('CodecDelay') !== NULL) $version = 4;
+    if ($videoTrack->get('SeekPreRoll') !== NULL) $version = 4;
+    if ($frame->name() == 'BlockGroup' && $frame->get('DiscardPadding') !== NULL) $version = 4;
+
+    // EBML header
+    $ebml = ebmlEncodeElement('EBML',
+        ebmlEncodeElement('DocType', "webm")
+        . ebmlEncodeElement('DocTypeVersion', chr($version))
+        . ebmlEncodeElement('DocTypeReadVersion', "\x02")
+    );
+
+    // Segment
+    $info = ebmlEncodeElement('Info',
+        ebmlEncodeElement('Duration', "\x41\x20\x00\x00")
+        . ebmlEncodeElement('MuxingApp', 'ccframe')
+        . ebmlEncodeElement('WritingApp', 'ccframe')
+    );
+    $tracks = ebmlEncodeElement('Tracks',
+        ebmlEncodeElement('TrackEntry', $videoTrack->content()->readAll())
+    );
+    $cues = ebmlEncodeElement('Cues',
+        ebmlEncodeElement('CuePoint',
+            ebmlEncodeElement('CueTime', "\x00")
+            . ebmlEncodeElement('CueTrackPositions',
+                ebmlEncodeElement('CueTrack', pack('N', $videoTrack->get('TrackNumber')))
+                . ebmlEncodeElement('CueClusterPosition', pack('N', $lenSeekHead + strlen($info) + strlen($tracks) + $lenCues))
+            )
+        )
+    );
+    if (strlen($cues) != $lenCues) throw new Exception('length of Cues element wrong');
+    $cluster = ebmlEncodeElement('Cluster',
+        ebmlEncodeElement('Timecode', "\x00")
+        . ebmlEncodeElement($frame->name(), $frame->content()->readAll())
+        . ebmlEncodeElement('Void', '')
+    );
+    $seekHead = ebmlEncodeElement('SeekHead',
+        matroskaSeekElement('Info', $lenSeekHead)
+        . matroskaSeekElement('Tracks', $lenSeekHead + strlen($info))
+        . matroskaSeekElement('Cues', $lenSeekHead + strlen($info) + strlen($tracks))
+        . matroskaSeekElement('Cluster', $lenSeekHead + strlen($info) + strlen($tracks) + $lenCues)
+    );
+    if (strlen($seekHead) != $lenSeekHead) throw new Exception('length of SeekHead element wrong');
+    $segment = ebmlEncodeElement('Segment', $seekHead . $info . $tracks . $cues . $cluster);
+
+    return $ebml . $segment;
+}
+
+// Locate first WebM keyframe of track $trackNumber after timecode $skip
+function firstWebMFrame($segment, $trackNumber, $skip=0) {
+    foreach($segment as $x1) {
+        if ($x1->name() == 'Cluster') {
+            $cluserTimecode = $x1->Get('Timecode');
+            foreach($x1 as $blockGroup) {
+                $blockRaw = NULL;
+                if ($blockGroup->name() == 'SimpleBlock') {
+                    $blockRaw = $blockGroup->value();
+                } elseif ($blockGroup->name() == 'BlockGroup') {
+                    $blockRaw = $blockGroup->get('Block');
+                }
+                if (isset($blockRaw)) {
+                    $block = new MatroskaBlock($blockRaw);
+                    if ($block->trackNumber == $trackNumber && $block->keyframe) {
+                        if (!isset($cluserTimecode) || $cluserTimecode + $block->timecode >= $skip) {
+                            return $blockGroup;
+                        } elseif (!isset($frame1)) {
+                            $frame1 = $blockGroup;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return isset($frame1) ? $frame1 : NULL;
+}
+
+function videoData($filename) {
+    $data = array();
+
+    // Open file
+    $fileHandle = fopen($filename, 'rb');
+    if (!$fileHandle) {
+        error_log('could not open file');
+        return $data;
+    }
+
+    try {
+        $root = readMatroska($fileHandle);
+        $data['container'] = $root->get('EBML')->get('DocType');
+
+        // Locate segment information and tracks
+        $segment = $root->get('Segment');
+        if (!isset($segment)) throw new Exception('missing Segment element');
+
+        // Get segment information
+        $info = $segment->get('Info');
+        if (isset($info)) {
+            $timecodeScale = $info->get('TimecodeScale');
+            $duration = $info->get('Duration');
+            if (isset($timecodeScale) && isset($duration)) {
+                $data['duration'] = 1e-9 * $timecodeScale * $duration;
+            }
+        }
+
+        // Locate video track
+        $tracks = $segment->get('Tracks');
+        if (!isset($tracks)) throw new Exception('missing Tracks element');
+        foreach($tracks as $trackEntry) {
+            if ($trackEntry->name() == 'TrackEntry' && $trackEntry->get('TrackType') == 1) {
+                $videoTrack = $trackEntry;
+                break;
+            }
+        }
+        if (!isset($videoTrack)) throw new Exception('no video track');
+
+        // Get track information
+        $videoAttr = $videoTrack->get('Video');
+        if (!isset($videoAttr)) throw new Exception('missing video parameters');
+        $pixelWidth = $videoAttr->get('PixelWidth');
+        $pixelHeight = $videoAttr->get('PixelHeight');
+        if (!isset($pixelWidth) || !isset($pixelHeight)) throw new Exception('no width or height');
+        if ($pixelWidth == 0 || $pixelHeight == 0) throw new Exception('bad PixelWidth/PixelHeight');
+        $displayWidth = $videoAttr->get('DisplayWidth', $pixelWidth);
+        $displayHeight = $videoAttr->get('DisplayHeight', $pixelHeight);
+        if ($displayWidth == 0 || $displayHeight == 0) throw new Exception('bad DisplayWidth/DisplayHeight');
+        $data['width'] = $displayWidth;
+        $data['height'] = $displayHeight;
+
+        // Extract frame to use as thumbnail
+        if ($videoAttr->get('AlphaMode') != NULL) {
+            if (!($pixelWidth % 2 == 0 && $pixelHeight % 2 == 0 && $displayWidth % 2 == 0 && $displayHeight % 2 == 0)) {
+                throw new Exception('preview frame blocked due to Chromium bug');
+            }
+        }
+        $trackNumber = $videoTrack->get('TrackNumber');
+        if (!isset($trackNumber)) throw new Exception('missing track number');
+        if (isset($data['duration']) && $data['duration'] >= 5) {
+            $skip = 1e9 / $timecodeScale;
+        } else {
+            $skip = 0;
+        }
+        $frame = firstWebMFrame($segment, $trackNumber, $skip);
+        if (!isset($frame)) throw new Exception('no keyframes');
+        $data['frame'] = muxWebMFrame($videoTrack, $frame);
+    } catch (Exception $e) {
+        error_log($e->getMessage());
+    }
+
+    fclose($fileHandle);
+    return $data;
+}