{"id":16255107,"url":"https://github.com/m90/seethru","last_synced_at":"2025-12-12T04:18:58.831Z","repository":{"id":3063872,"uuid":"4086353","full_name":"m90/seeThru","owner":"m90","description":"HTML5 video with alpha channel transparencies","archived":true,"fork":false,"pushed_at":"2024-10-10T14:33:47.000Z","size":5038,"stargazers_count":478,"open_issues_count":5,"forks_count":66,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-10-09T05:27:26.208Z","etag":null,"topics":["alpha-channel","canvas-element","hacktoberfest","html5-video"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"shadowsocks/shadowsocks-windows","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m90.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2012-04-20T12:40:18.000Z","updated_at":"2025-09-27T00:16:43.000Z","dependencies_parsed_at":"2024-10-30T14:14:42.825Z","dependency_job_id":null,"html_url":"https://github.com/m90/seeThru","commit_stats":{"total_commits":328,"total_committers":11,"mean_commits":"29.818181818181817","dds":"0.11280487804878048","last_synced_commit":"87801f6b4839f0e9280c25ce4722fc2403456c7b"},"previous_names":["m90/jquery-seethru"],"tags_count":32,"template":false,"template_full_name":null,"purl":"pkg:github/m90/seeThru","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m90%2FseeThru","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m90%2FseeThru/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m90%2FseeThru/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m90%2FseeThru/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m90","download_url":"https://codeload.github.com/m90/seeThru/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m90%2FseeThru/sbom","scorecard":{"id":608684,"data":{"date":"2025-08-11","repo":{"name":"github.com/m90/seeThru","commit":"5091cf16472d2a355b707f913a1f2d3a651b3c4e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/8 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/test.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Info: Possibly incomplete results: error parsing shell code: a command can only contain words and redirects; encountered (: bin/converter.js:0","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/m90/seeThru/test.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/m90/seeThru/test.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/test.yml:13","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 30 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"19 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T02:09:46.016Z","repository_id":3063872,"created_at":"2025-08-21T02:09:46.016Z","updated_at":"2025-08-21T02:09:46.016Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280458129,"owners_count":26334037,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpha-channel","canvas-element","hacktoberfest","html5-video"],"created_at":"2024-10-10T15:28:12.923Z","updated_at":"2025-10-22T15:21:04.157Z","avatar_url":"https://github.com/m90.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Before you start\n\nUnless you still need to support Internet Explorer, __you probably do not need this library (which dates back to 2012) anymore__. Using WebM and HEVC video formats, you can have native transparent HTML5 video in all browsers as of late 2020.\n\nCheck out the ongoing discussion in [__this issue__][34] for more information.\n\n---\n\n# seeThru - HTML5 video with alpha channel transparencies\n\n[![Build Status](https://travis-ci.org/m90/seeThru.svg?branch=master)](https://travis-ci.org/m90/seeThru)\n\n\u003e This package adds \"support\" for the lacking alpha channel in HTML5 `\u003cvideo\u003e` elements. Formerly known as \"jquery-seeThru\"\n\nYour HTML5 video source is re-rendered into a canvas-element, adding the possibility to use transparencies in your video. Alpha information is either included in the video's source file (moving) or in a seperate `\u003cimg\u003e`-element (static).\n\nThe package also ships with a simple CLI tool for automatically converting your RGBA video sources into the correct format.\n\n## Download / Installation\n\nnpm:\n```sh\n$ npm install seethru\n```\n\nyarn:\n```sh\n$ yarn add seethru\n```\n\nbower:\n```sh\n$ bower install seethru\n```\n\nCDN:\n```html\n\u003cscript src=\"https://unpkg.com/seethru@4/dist/seeThru.min.js\"\u003e\u003c/script\u003e\n\u003c!-- or --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/seethru@4/dist/seeThru.min.js\"\u003e\u003c/script\u003e\n```\n\nAlternatively, you can download and use the version(s) in the `/dist` folder.\n\n## Word of warning\n\nThis approach is a **cheap hack**! Due to the lack of alpha support in HTML5 video it is one of the few ways to use video with alpha, so it might be the only viable option in some cases, but please don't expect it to work like a charm when processing 30fps 1080p video (or multiple videos) on an old machine with 39 browser tabs opened. Test your usage thoroughly on old machines as well and if you're not satisfied with the speed, maybe think about using a purely native solution. Also: the mobile support of this approach is **very limited**.\n\n## Table of contents\n - \u003ca href=\"#video-setup\"\u003eVideo Setup\u003c/a\u003e\n - \u003ca href=\"#basic-script-usage\"\u003eBasic Script Usage\u003c/a\u003e\n - \u003ca href=\"#options\"\u003eOptions\u003c/a\u003e\n - \u003ca href=\"#additional-methods\"\u003eAdditional methods\u003c/a\u003e\n - \u003ca href=\"#usage-as-a-jquery-plugin\"\u003eUsage as a jQuery-plugin\u003c/a\u003e\n - \u003ca href=\"#examples\"\u003eExamples\u003c/a\u003e\n - \u003ca href=\"#preparing-video-sources-using-seethru-convert\"\u003ePreparing video sources using `seethru-convert`\u003c/a\u003e\n - \u003ca href=\"#preparing-video-sources-in-adobe-after-effects\"\u003ePreparing video sources in Adobe After Effects\u003c/a\u003e\n - \u003ca href=\"#cross-domain-issues-with-canvas-elements\"\u003eCrossDomain issues with canvas elements\u003c/a\u003e\n - \u003ca href=\"#binding-mouse-events-to-your-video\"\u003eBinding mouse events to your video\u003c/a\u003e\n - \u003ca href=\"#mobile-devices--tablets\"\u003eMobile devices \u0026 tablets\u003c/a\u003e\n - \u003ca href=\"#browser-support\"\u003eBrowser support\u003c/a\u003e\n - \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\n## Video setup\n\nIn default configuration the script assumes that the alpha information is added underneath the original video track (in the exact same dimensions: a video of 400x300 target dimensions will have a 400x600 source file). The alpha information should be a black and white image, with white being interpreted as fully opaque and black being fully transparent (colored input will be averaged).\n\nFor optimal results the color channel should be un-premultiplied. (see the Wikipedia article on **[Alpha Compositing][15]** for more info on what that is all about). If you need a tool to un-premultiply your imagery you can use **[Knoll Unmult][16]** which is available for quite a lot of packages. If there is no way for you to supply unmultiplied sources, you can use the [`unmult` option](#options), that comes with a severe performance penalty due to un-premultiplying at runtime.\n\nFor a basic introduction of how to encode and embed video for HTML5 pages see the great **[Dive into HTML5][14]**\n\n### Example image:\n\nNote the jagged edges in the color channel(s) due to un-premultiplying:\u003cbr/\u003e\n![Example image][5]\u003cbr/\u003e\nput over a greenish/blueish background results in\u003cbr/\u003e\n![Example image][6]\u003cbr/\u003e\n**[Live Demo][1]**\n\n### Static Mask\n\nIt is also possible to source the alpha information from an `\u003cimg\u003e`-element. The script lets you use either the luminance information of the RGB channels (i.e. the image) or the image's alpha channel (see options for how to choose). In case the image does not fit your video's dimensions it will be stretched to fit those.\n\n**[Live Demo][2]**\n\n## Basic script usage\n\nTo use the script include the source:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"seeThru.min.js\"\u003e\u003c/script\u003e\n```\n\nand then pass your video element (either a selector or an actual DOMElement) and your options to `seeThru.create(el[, options])`:\n\n```js\nvar transparentVideo = seeThru.create('#my-video');\n```\n\nIf you specify dimension-attributes for your video, they will be considered, in case they are left unspecified, the dimensions of the source file will be used (video with alpha included will of course turn out to be halved in height).\n\nFor testing you can download and use the example videos in the repo's **[media folder](https://github.com/m90/seeThru/tree/master/media)**.\n\n## Options\n\nThere are a few options you can pass when building an instance:\n\n - `start` defines the video's behavior on load. It defaults to `external` which will just display the first frame of the video and wait for the caller to initiate video playback. Other options are `clicktoplay` which will display the first frame of the video until it is clicked.\n - `end` defines the video's behavior when it has reached its end. It defaults to `stop`. Other possibilities are `rewind` which will jump back to the first frame and stop. If you use `start: 'clicktoplay'` along with `rewind` or `end` the video will be clickable again when finished.\n - `staticMask` lets you use the content of an `\u003cimg\u003e` node as alpha information (also black and white). The parameter expects a CSS selector (preferrably ID) that refers directly to an image tag, like `#fancy-mask`. In case the selector matches nothing or a non-image node the option is ignored.\n - `alphaMask` specifies if the script uses either the black and white information (i.e. `false`) or the alpha information (i.e. `true`) of the element specified in the `mask` parameter. Defaults to `false`.\n - `height` can be used to control the height of the rendered canvas. Overrides the attributes of the `\u003cvideo\u003e`-element\n - `width` can be used to control the width of the rendered canvas. Overrides the attributes of the `\u003cvideo\u003e`-element\n - `poster` can be set to `true` if you want the video to be replaced by the image specified in the `\u003cvideo\u003e`s `poster`-attribute when in a paused state\n - `unmult` can be used if your source material's RGB channels are premultiplied (with black) and you want the script to un-premultiply the imagery. Note that this might have really bad effects on performance, so it is recommended to work with unpremultiplied video sources\n - `videoStyles` is the CSS (in object notation) that is used to hide the original video - can be updated in order to work around autoplay restrictions. It defaults to `{ display: 'none' }`\n - `namespace` is the prefix that will be used for the CSS classnames applied to the created DOM elements (buffer, display, posterframe), defaults to `seeThru`\n\nThis might look like this:\n\n```js\nseeThru.create('#my-video');\n```\n\nor\n\n```js\nseeThru.create('#my-video', { staticMask: '#image-with-alpha', alphaMask: true });\n```\n\n## Additional methods\nOn the returned `seeThru`-Object these methods are available:\n\n - `.ready(fn)` lets you safely access the instance's methods as it will make sure the video's metadata has been fully loaded and the script was able to initialize. It will be passed the `seeThru` instance as 1st argument, the used video as 2nd argument, and the canvas representation as the 3rd one. To ensure consistent behavior this will always be executed asynchronously, even if the video is ready when called.\n - `.updateMask(selectorOrElement)` lets you swap the alpha source for a video that uses static alpha information. The value for the `alphaMask` option will be kept from initialisation.\n - `.revert()` will revert the `\u003cvideo\u003e` element back to its original state, remove the `\u003ccanvas\u003e` elements, all attached data and event listeners/handlers\n - `.play()` and `.pause()` are convenience methods to control the playback of the video\n - `.getCanvas()` lets you get the visible canvas element so you can interact with it\n\nExample:\n```js\nseeThru\n    .create('#my-video', { width: 400, height: 300 })\n    .ready(function (instance, video, canvas) {\n        canvas.addEventListener('click', function () {\n            instance.revert();\n        });\n        video.addEventListener('ended', function () {\n            instance.revert();\n        });\n    });\n```\n\n## Usage as a jQuery-plugin\n\nIf `window.jQuery` is present the script will automatically attach itself to jQuery as a plugin, meaning you can also do something like:\n\n```js\n$('#my-video').seeThru().seeThru('play');\n```\n\nIf your jQuery is *not* global (AMD/browserify) but you still want to attach the script as a plugin you can use the `attach`  method exisiting on `seeThru`.\n\n```js\nvar $ = require('jquery');\nseeThru.attach($);\n```\n\n## Examples\n\n- **[Moving alpha][1]**\n- **[Static alpha][2]**\n- **[Swapping alpha sources][3]**\n- **[Video listening to external JS calls][4]**\n- **[Video playing on hover][26]**\n\n## Preparing video sources using `seethru-convert`\n\nThe package ships with a CLI tool (`seethru-convert`) that can prepare your video sources for you. Pass a video with alpha information (Animation-compressed `.mov`s should work best here - also make sure the video actually contains information on the alpha channel) and it will automatically separate alpha and RGB information and render them side by side into the target file.\n\nTo install the CLI tool globally:\n\n```sh\n$ npm install seethru -g\n```\n\nTo use the script you need to have [`ffmpeg` and `ffprobe`][31] installed. The executables needs to be in your `$PATH` (`%PATH` for Windows). Alternatively you can pass overrides for the executables used using the `--ffmpeg-path` and `--ffprobe-path` options.\n\nNow you are ready to go:\n\n```sh\n$ seethru-convert --in myvideo.mov --out myvideo-converted.mov\n```\n\nIdeally you should be doing this conversion on your uncompressed / high-quality video source once, and then convert the output into whatever files you need (mp4, ogg et. al.) afterwards.\n\n## Preparing video sources in Adobe After Effects\n\nYou can also use standard video editing software to prepare the sources. This walkthrough shows how to do it using Adobe After Effects.\n\nPut your animation with alpha in a composition:\n![After Effects walkthru 1][20]\u003cbr/\u003e\nDouble the composition's height:\n![After Effects walkthru 2][21]\u003cbr/\u003e\nDuplicate your footage layer, align them, and use the second instance as Alpha Track Matte for a white solid:\n![After Effects walkthru 3][22]\u003cbr/\u003e\nMake sure you are using an unmultiplied (straight) version of your color source:\n![After Effects walkthru 4][23]\u003cbr/\u003e\n\n## Cross Domain issues with canvas-elements\n\nNote that the canvas API is subject to cross domain security restrictions, so be aware that the video source files have to be served from the same domain (i.e. if the document that is calling `seeThru` is on `www.example.net` the video files have to be requested from `www.example.net` as well), otherwise you will see a DOM Security Exception. Also note that this also applies to subdomains, therefore you cannot mix www and non-www-URLs.\n\nThis can be worked around when using **[CORS][28]** or by using **[Blob URLs][32]**:\n\n````js\nfunction loadAsObjectURL(video, url) {\n    var xhr = new XMLHttpRequest();\n    xhr.responseType = 'blob';\n    xhr.onload = function (response) {\n        return video.src = URL.createObjectURL(xhr.response);\n    };\n    xhr.onerror = function () { /* Houston we have a problem! */ };\n    xhr.open('GET', url, true);\n    xhr.send();\n    video.onload = function () { return URL.revokeObjectURL(video.src); };\n}\n\nvar video = document.querySelector('video');\nvideo.addEventListener('loadedmetadata', function () {\n    seeThru.create(video);\n});\nloadAsObjectURL(video, 'https://www.example.net/video.mp4');\n````\n\n## Binding mouse events to your video\n\nTo mimic a behavior as if the original video was still visible it will echo all mouse events fired by the canvas representation.\n\nThe events that are echoed are: `mouseenter mouseleave click mousedown mouseup mousemove mouseover hover dblclick contextmenu focus blur`\n\n## Mobile devices \u0026 tablets\n\nSupport for mobile browsers is patchy due to some forcing any video to open in an external player or requiring user interaction. [As of iOS 10][33], a video will work with seeThru if:\n\n- the video has a `playsinline` attribute\n- the video has no audio track or a `muted` attribute\n\n```html\n\u003cvideo id=\"video\" autoplay loop playsinline muted\u003e\u003c/video\u003e\n```\n\nIn any case you will need to add the `playsinline` attribute to the `\u003cvideo\u003e` tag. If a video has audio, adding the `muted` attribute will enable `playsinline`.\n\n## Browser support\n\nThe script is tested on Chrome, Firefox, Safari, Opera and IE 9.0+.  \nSee caniuse.com for browsers that support **[`\u003ccanvas\u003e`][24]** and **[`\u003cvideo\u003e`][25]**  \n\n## License\n\nAll source code is licensed under the **[MIT License][11]**, demo content, video and imagery is available under **[CC-BY-SA 3.0][12]**\n\n## Thank you\n\nThanks to **[Jake Archibald][7]**, who had the original idea for this approach, **[Kathi Käppel][8]** who designed the lovely Mr. Kolor from the demo and Sebastian Lechenbauer for making fun of my git dyslexia.\n![Footer image][10]\n\n[1]: https://m90.github.io/seeThru/moving-alpha/\n[2]: https://m90.github.io/seeThru/static-alpha/\n[3]: https://m90.github.io/seeThru/swap-alpha/\n[4]: https://m90.github.io/seeThru/external/\n[5]: https://m90.github.io/seeThru/img/seeThruDemo.png\n[6]: https://m90.github.io/seeThru/img/seeThruResult.png\n[7]: https://www.jakearchibald.com\n[8]: http://www.kathikaeppel.com/\n[10]: https://m90.github.io/seeThru/img/footer.png\n[11]: https://www.opensource.org/licenses/mit-license.php\n[12]: https://creativecommons.org/licenses/by-sa/3.0/\n[14]: http://www.diveintohtml5.info/video.html\n[15]: https://en.wikipedia.org/wiki/Alpha_compositing\n[16]: http://www.redgiantsoftware.com/products/all/knoll-unmult-free\n[18]: https://paulirish.com/2011/requestanimationframe-for-smart-animating/\n[20]: https://m90.github.io/seeThru/img/seeThru_AE_01.jpg\n[21]: https://m90.github.io/seeThru/img/seeThru_AE_02.jpg\n[22]: https://m90.github.io/seeThru/img/seeThru_AE_03.jpg\n[23]: https://m90.github.io/seeThru/img/seeThru_AE_04.jpg\n[24]: https://caniuse.com/#feat=canvas\n[25]: https://caniuse.com/#feat=video\n[26]: https://m90.github.io/seeThru/hover/\n[28]: https://www.html5rocks.com/en/tutorials/cors/\n[29]: https://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video\n[30]: https://nodejs.org\n[31]: https://ffmpeg.org\n[32]: https://caniuse.com/#feat=bloburls\n[33]: https://webkit.org/blog/6784/new-video-policies-for-ios/\n[34]: https://github.com/m90/seeThru/issues/47\n[35]: https://caniuse.com/#feat=webm\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm90%2Fseethru","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm90%2Fseethru","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm90%2Fseethru/lists"}