Help with how to select html elements (MarkdownPostProcessor doesn't work). Workaround using a timer for video autoplay

Here’s my dumb autoplay plugin to autoplay and loop ALL videos (I don’t want to use media-extended and have to manually add ![[example.mp4#play&loop]] to everything).

import { Plugin } from "obsidian";

export default class AutoplayPlugin extends Plugin {
  async onload() {
	console.log("LOADED");
	this.registerInterval(
		window.setInterval(() => {
			const videoElements = activeDocument.querySelectorAll("video");
			videoElements.forEach((videoElement) => {
				// Set the autoplay and loop attributes for each video element
				videoElement.autoplay = true;
				videoElement.loop = true;
				videoElement.play();
			});
		}, 1000)
	  );
  }
}

I’m using a timer to set autoplay=true and loop=true every 1 second, because I don’t know how else to trigger this. Also using activeDocument to hit the pop out windows too.

I tried a markdown postprocessor, but it did not do anything for video elements.

this.registerMarkdownPostProcessor((element, context) => {
	const videoElements = element.querySelectorAll("video");
	videoElements.forEach((videoElement) => {
		videoElement.autoplay = true;
		videoElement.loop = true;
		videoElement.play();
	});
});

In the postprocessor, a console.log(element) shows stuff like callout blocks, but not video embeds.

1 Like

Moved from “Plugin ideas” to “Developers & API”.

sweet, somehow I missed the existence of this forum

I tried to use this code snippet in the obsidian plugins folder and i couldn’t activate it (failed to load plugin) :sweat_smile:
Any luck? I need it :pleading_face:

You’ll want to clone this repo and follow the steps here, including npm commands

Then use the snippet as main.ts content

1 Like