31:T89f,md`# (Attempt at) Embedding a Video Into an SVG

${md` ## Disclaimer I've come to realize that foreignObject support across browsers is really, ${'really'.split('').map((s,i)=>`${s}`)} bad, and even worse for videos. Consider this notebook a party trick and move on ... to [these neat SVG filter helpers](https://observablehq.com/@mootari/svg-filter-scales)! --- This message uses a sans-serif font to emphasize how serious I am. If that still hasn't put you off, please click ${(()=>{const a=html`👉here`;a.onclick=()=>{ let n, o=0;const s=' move on ',l=s.length,walk=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false); while(n=walk.nextNode()) { if(!n.parentNode.matches || !n.parentNode.matches('p,span,b,h1,h2,h3,pre,a,small,code,em,strong,li,label,option,div')) continue; const c=n.data.trim().split(''); for(let i=0; i < c.length;i++) c[i]=s[(o+i)%l]; n.data = c.join(''); o+=n.data.length; }};return a})()}.`}

--- Videos can be embedded directly into an SVG by wrapping them in a [\`\\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject) element. The example below applies a [color filter](https://observablehq.com/@mootari/svg-filter-scales) to the embedded \`foreignObject\` element and its children. ***Note:*** *The filter currently does not work in Safari.* **Todos:** - Add example for UI elements and [scaling/responsive layout](https://www.sarasoueidan.com/blog/mimic-relative-positioning-in-svg/) - Allow webcam input - Fix Safari filter issues (or document bug reports) Context / discussion: [Vector Graphics overlay on top of Image or Video element](https://talk.observablehq.com/t/vector-graphics-overlay-on-top-of-image-or-video-element/3935) Video source: [imgur.com](https://imgur.com/a/belo053) --- `32:[{"id":"a1cb7c2d8c7a82427667af8052a1428755a9f0f33bfe715e9b4b31673cfa7c8b875c83bf40b7ca4d02cba4543c64736435b70efa0c69ed5fb0d151f06aa9dcc3","href":"https://static.observableusercontent.com/files/a1cb7c2d8c7a82427667af8052a1428755a9f0f33bfe715e9b4b31673cfa7c8b875c83bf40b7ca4d02cba4543c64736435b70efa0c69ed5fb0d151f06aa9dcc3","name":"video.mp4","type":"video/mp4","lastModified":1601884658401.12,"size":7357637}] 2f:{"title":"(Attempt at) Embedding a Video Into an SVG","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"viewof scale = select({\n title: 'Color scale',\n options: [{value:'', label:'- unfiltered -'}].concat(Object.keys(scales)),\n value: 'Magma',\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"viewof options = checkbox({\n options: [\n {value:'invert',label:'flip color scale'},\n {value:'quantize',label:'posterize colors'},\n {value:'cors',label:'embed an external video'},\n ],\n value: ['quantize'],\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"video = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"colorFilter = !scale\n ? ''\n : filter('color', scales[scale], {\n invert: options.includes('invert'),\n steps: options.includes('quantize') ? 5 : null,\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"videoSrc = options.includes('cors') ? 'https://i.imgur.com/bG8t8iJ.mp4' : FileAttachment('video.mp4').url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"// Use a global playback offset to avoid restarts when changing options.\nvideo.querySelector('video').addEventListener('play', function() {\n this.currentTime = Date.now()/1000 % this.duration;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"import {select, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import {filter, scales} from '@mootari/svg-filter-scales'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}