') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); GitHub - kjunichi/processing-video-js: A JavaScript port of the Processing video library and an example how to write cross mode libraries for Processing 2.0 · GitHub
Skip to content
BranchesTags

Latest commit

History

18 Commits

Folders and files

NameName
Last commit message
Last commit date
resources
resources
src
src
tests
tests
.gitignore
.gitignore
README
README
build.xml
build.xml
todo.txt
todo.txt

Repository files navigation

import processing.video.*;
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
This is an attempt at writing a JavaScript companion to an existing
Java library, namely the Processing video library.
One goal is to have video sketches run in JavaScript mode out of the box. Another is to come up with a recommendation on how to write or
wrap and package JavaScript libraries to make them available inside Processing 2.0 JavaScript mode (powered by Processing.js).
Note: Capture will currently not be implemented as it's not supported
by browsers yet.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Differences to the Java processing.video.Movie class
- new Movie( <PApplet>sketch, <String>path ) accepts multiple paths to support fallback HTML5 formats:
new Movie( this, "video.mp4", "video.webm", "video.ogv" )
- Movie.speed() does not accept a negative value (will stop)
- Sources coming from remote locations (not same domain / port) will
only work when CORS is set up correctly:
https://developer.mozilla.org/en-US/docs/HTTP_access_control
- Movie.pixels[]
are read-only at the moment, use Movie.get() to manipulate pixels
- Movie.speed() does not work in FireFox because of a Bug
https://bugzilla.mozilla.org/show_bug.cgi?id=495040
- Movie.jump() does only work in Chrome if your server is able to serve "206 partial content" (check the response header of the video request)
- Movie.setSourceFrameRate( <float>fps )
HTML5 video does not have a way to see the fps of a video source,
so you will have to set that yourself (default is 25.0). This value is used for Movie.frameRate() and returned by Movie.getSourceFrameRate()
- Movie.getElement()
will return the DOM <video> element used to play the movie
- Movie.getCanvas()
will return the DOM <canvas> element used to copy the image off of the <video> element
- Movie.getFilename()
returns the source (if loaded) that is actually being played. It's a
way to find out which of multiple sources (mp4/webm/ogv) has been loaded.
- new Movie({ sources:<array> OR element: <DOM video>,
listener:<object>,
[
poster:<string>path,
image: <DOM image>
] })
for JavaScript only usage, Movie constructor also accepts an options object.
sources ["video.mp4", "video.ogv", ...]
element optional DOM video node, no need to provide sources then
listener {}, should implement movieEvent(Movie)
poster optional, path to an image to use as poster-frame
image either <img> or "new Image()", renders the video into an image.src,
useful if you are rendering to a texture in three.js
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Some work hours and content provided by http://mint.gs

About

A JavaScript port of the Processing video library and an example how to write cross mode libraries for Processing 2.0

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages