Any idea for placing my videofile on speeddial page background?

LonM

You will need a javascript mod for this. Learn how to use these

The following code will work:

(function videobg(){
    "use strict";

    const VIDEOFILE = "http://localhost:8000/test.mp4"; /*path to video*/

    /**
     * Initialise the mod
     * Create the html and place it before the header div so that it appears "behind" the UI
     */
    function initMod(){
        const browser = document.getElementById("header");
        if(browser){
            browser.insertAdjacentHTML('beforebegin', `<video
                src="${VIDEOFILE}"
                autoplay loop muted disablepictureinpicture disableremoteplayback
                style="height: 100vh; width: 100vw; position: absolute; object-fit: fill;">
                </video>`)
        } else { setTimeout(initMod, 500); }
    }

    /* Start 500ms after the browser is opened */
    setTimeout(initMod, 500);
})();

Kunsite

@LonM said in Any idea for placing my videofile on speeddial page background?:

You will need a javascript mod for this. Learn how to use these

The following code will work:

I tried, but it did not work. May be it is not work with local file? Local path to video works in html, in js tried to put https direct link, it is not working also.
In html video working (if I will spicify page in homepage settings).
How can I did it in windows.html? With you js (putting source = js in window .html) is not working

Hadden89

@LonM cool , would be perfect if titlebar/horizontal tabs animation would be opt-out, as it doesn't blend well with luminous videos, but I am aware these are part of the header

(didn't manage to make it work with file:// ... so I used the simplest big buck sample on the net)

https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4

sgunhouse

For the record, the majority of Opera's animated themes are in webm format. Beyond that, I can't help.

Kunsite

@sgunhouse said in Any idea for placing my videofile on speeddial page background?:

For the record, the majority of Opera's animated themes are in webm format. Beyond that, I can't help.

If Vivaldi can play webm - I can convert video to it and in any video format needed. Tell me, how I can make vivaldi play webm in background of speeddial?

LonM

@Hadden89
I needed to put it on a localhost webserver.

I would suggest using that if possible rather than a web-accessible resource, because you never know if someone might maliciously swap it out for something unpleasant, or if the videofile disappears one day

LonM

@Kunsite If you can, try using a localhost webserver. If your machine has python installed you can start a very simple one using the command python -m http.server in the directory where your videofile is stored.

Kunsite

@LonM said in Any idea for placing my videofile on speeddial page background?:

@Kunsite If you can, try using a localhost webserver. If your machine has python installed you can start a very simple one using the command python -m http.server in the directory where your videofile is stored.

Thanks. But why vivaldi is not working with local file? Wokring only if I will up http server. Very sad, for only one feature I must hold http server :(((((

LonM

@Kunsite It is kind of annoying. I have the same problem loading some custom rss feeds stored on a file://. It should work regardless, but something is broken with how the browser accesses certain files.

tam710562

@Kunsite You can put the file in vivaldi's installation folder and you can use the host that vivaldi creates

Example
C:\Users\{User}\AppData\Local\Vivaldi\Application\7.4.3682.3\resources\vivaldi\sample.mp4
and the path will be
chrome-extension://mpognobbkildjkofajifpdfhcoklimli/sample.mp4

Note: Vivaldi will delete this folder every time it updates, so you must copy the file again every time you update to a new version.

Or you can change the code of @LonM like below to load local files

(async function videobg() {
  'use strict';

  const VIDEOFILE = 'D:/sample.mp4'; /*path to video*/
  const arrayBuffer = await vivaldi.mailPrivate.readFileToBuffer(VIDEOFILE);
  const blob = new Blob([arrayBuffer]);
  const videoUrl = URL.createObjectURL(blob);

  /**
   * Initialise the mod
   * Create the html and place it before the header div so that it appears "behind" the UI
   */
  function initMod() {
    const browser = document.getElementById('header');
    if (browser) {
      browser.insertAdjacentHTML('beforebegin', `<video
        src="${videoUrl}"
        autoplay loop muted disablepictureinpicture disableremoteplayback
        style="height: 100vh; width: 100vw; position: absolute; object-fit: fill;">
        </video>`)
    } else { setTimeout(initMod, 500); }
  }

  /* Start 500ms after the browser is opened */
  setTimeout(initMod, 500);
})();

Kunsite

@tam710562 said in Any idea for placing my videofile on speeddial page background?:

@Kunsite You can put the file in vivaldi's installation folder and you can use the host that vivaldi creates

Example
C:\Users{User}\AppData\Local\Vivaldi\Application\7.4.3682.3\resources\vivaldi\sample.mp4
and the path will be
chrome-extension://mpognobbkildjkofajifpdfhcoklimli/sample.mp4

Note: Vivaldi will delete this folder every time it updates, so you must copy the file again every time you update to a new version.

Or you can change the code of @LonM like below to load local files

(async function videobg() {
'use strict';

const VIDEOFILE = 'D:/sample.mp4'; /path to video/
const arrayBuffer = await vivaldi.mailPrivate.readFileToBuffer(VIDEOFILE);
const blob = new Blob([arrayBuffer]);
const videoUrl = URL.createObjectURL(blob);

/**

Initialise the mod

Create the html and place it before the header div so that it appears "behind" the UI
*/
function initMod() {
const browser = document.getElementById('header');
if (browser) {
browser.insertAdjacentHTML('beforebegin', <video src="${videoUrl}" autoplay loop muted disablepictureinpicture disableremoteplayback style="height: 100vh; width: 100vw; position: absolute; object-fit: fill;"> </video>)
} else { setTimeout(initMod, 500); }
}

/* Start 500ms after the browser is opened */
setTimeout(initMod, 500);
})();

I will write to myself for the future. But for now (it is very strange) I will not start any http server, but working first custom.js on this theme with string like

const VIDEOFILE = "http://localhost:8000/20240627_085425.mp4"; /*path to video*/

I do not know, how, but it is working! Thanks for another method also.