I was watching some 360º video an nostr multimedia player doesn't support that but what if...
function is360Video(event) {
return event.tags.some(tag =>
tag[0] === 'imeta' &&
tag[1] === 'projection' &&
['equirectangular', '360', 'spherical'].includes(tag[2])
) || event.tags.some(tag =>
tag[0] === 'm' &&
tag[1]?.includes('projection=equirectangular')
);
}
function upgrade360Videos() {
document.querySelectorAll('video').forEach(video => {
if (video.dataset.processed) return;
const event = findEventForVideoElement(video); // you need to map video → event
if (!event || !is360Video(event)) return;
video.dataset.processed = "true";
video.pause();
const container = video.parentElement;
const canvas = document.createElement('canvas');
canvas.style.width = '100%';
canvas.style.height = '100%';
container.style.position = 'relative';
container.appendChild(canvas);
init360Player(video.src, canvas); // your Three.js sphere code
video.style.display = 'none'; // hide the flat player
});
}
// Run on DOM changes (most clients use React/Virtual DOM)
const observer = new MutationObserver(upgrade360Videos);
observer.observe(document.body, { childList: true, subtree: true });
upgrade360Videos(); // initial run
["imeta", "projection", "equirectangular"]
Well that's all the suggested from LLMs