MMM-Videoplayer - Play video files on your mirror

[Snille]

Description:

This Module adds a video player in any of the regions, you define what files to play.

Screenshots:

Simple video showing the module when playing a video and whats happen when hiding / showing it.

Download:

https://github.com/Snille/MMM-Videoplayer

Custom-CSS

If you want to change the size of the player.

.MMM-Videoplayer video {
    width: 1080px;
    height: 1920px;
}

Tip:
Let’s say run the module in “fullscreen_below” and have a mirror in portrate mode (as in the CSS example above). You many want to turn the player 90 degrees…
Then set the CSS to:

.MMM-Videoplayer video {
    width: 1080px;
    height: 1920px;
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}

Normally you just need to add the line:

    transform:rotate(90deg);

But for comparability reasons, you can add all of them. :)

And, as you will probably notice with the above CSS code. The video player will not really “fill” the whole background when you turn it 90 degrees. So, then you need to to this:

.MMM-Videoplayer video {
    position: absolute;
    transform:rotate(90deg);
    transform-origin: bottom left;
    width: 100vh;
    height: 100vw;
    margin-top: -100vw;
    object-fit: cover;
}

Also, if you have other stuff in the same region (in my case “fullscreen_below”), it’s a good idea to add the video module before any other module in the same region in the config, Then when you actually display the video module it pops up “on top of” all other stuff. :)

Version 0.4

• Added “hideonstart” - If set to true, the player will hide it self when a clip is loaded (and just started playing (clip will be paused when the player is hidden)). Then when the player is shown again it will continue play the clip and hide itself again when the next clip is loaded (and just starts playing) and so on…

Version 0.3

• Added more “notification” commands (“REPLAY” and “NEXT”).
• Also fixed so all videos will be played when in radom, before a video is played again (if in loop mode).

Version 0.2

• Added a video list option (you can define multiple video files).
• Added a option to “randomize” the videos played from the list.

Version 0.1

• Initial release.

[feigi]

Hey there,

Your module is exactly what i am looking for.

But somehow, it does not display the movie at all.

I tried several ways with the config file, but was not able to get it to work.

So far i only tested with your Demo Vid, but nothing else.

This is what i currently have in my config.js:

            {
                    module: 'MMM-VideoPlayer',
                    position: 'bottom_left',
                    config: {
                    }
            },

I downloaded the Module using ‘git clone’ into the modules directory. I did not do anything else.

I do not get a config error, so everything seems proper, but just no Video.

Do you have any idea?

Thank you very much!

Cheers,
Feigi

[Snille]

@feigi Hmm… I’ll have to test on my test rig tomorrow, maybe something is broken… What are you running on? I have not tried it on a RPi, so I don’t know if the Pi can handle the video-tag correctly… Is there anyone else here who can test it on a Pi? :)

[Snille]

@feigi Hmm… I found that I had forgotten a comma in the example configs… But It looks like you have that comma in your config. I tried it on a “clean” install (on both development and master branch) and with your config and it works. What does the log say? (pm2 log).

[Snille]

Added some new stuff in v0.2. See first post… :)

[Snille]

Added some new stuff again in v0.3. See first post…

[dherl0623]

Awesome module! I’m using it to play the old Windows 98 Mystery (Haunted House) Screensaver. I just ripped the video off of YouTube, reduced the quality and it plays perfectly! Thanks again!

[Snille]

@dherl0623 Thank you! :) I’m going to use it soon to play spooky stuff from AtmosFX on Halloween, It’s going to be timed with module scheduler over whole day. Suddenly a ghost appear in the background… :)

[dherl0623]

@Snille That’s awesome! I just downloaded a leaves falling video from them! What would be the best way to play this fullscreen in the background behind all of the elements? Using the CSS in your example above is putting it over top of all of the other modules. Thanks again!

[Snille]

@dherl0623 Hm… I’m using the player in the region “fullscreen_below”. I have this player first in the config of all things that “can” show in the same region (that way it will always end up above the other things in the same region):

{
	disabled: false,
	module: 'MMM-Videoplayer',
	position: "fullscreen_below",
	classes: "scheduler turn90",
	config: {
		random: true,
		loop: true,
		notification: "VIDEOPLAYER1",
		videolist: ["http://your.site.com/video/clip1.mp4", 
					"http://your.site.com/video/clip1.mp4", 
					"http://your.site.com/video/clip2.mp4", 
					"http://your.site.com/video/clip3.mp4", 
					"http://your.site.com/video/clip4.mp4", 
					"http://your.site.com/video/clip5.mp4", 
					"http://your.site.com/video/clip6.mp4", 
					"http://your.site.com/video/clip7.mp4", 
					"http://your.site.com/video/clip8.mp4", 
					"http://your.site.com/video/clip9.mp4", 
					"http://your.site.com/video/clip10.mp4", 
					"http://your.site.com/video/clip11.mp4"],
		module_schedule: [
			{from: '0 6 31 9 *', to: '5 6 31 9 *'},
			{from: '2 7 31 9 *', to: '7 7 31 9 *'},
			{from: '4 8 31 9 *', to: '9 8 31 9 *'},
			{from: '6 9 31 9 *', to: '11 9 31 9 *'},
			{from: '8 10 31 9 *', to: '13 10 31 9 *'},
			{from: '10 11 31 9 *', to: '15 11 31 9 *'},
			{from: '12 12 31 9 *', to: '17 12 31 9 *'},
			{from: '14 13 31 9 *', to: '19 13 31 9 *'},
			{from: '16 14 31 9 *', to: '21 14 31 9 *'},
			{from: '18 15 31 9 *', to: '23 15 31 9 *'},
			{from: '20 16 31 9 *', to: '25 16 31 9 *'},
			{from: '22 17 31 9 *', to: '27 17 31 9 *'},
			{from: '24 18 31 9 *', to: '29 18 31 9 *'},
			{from: '26 19 31 9 *', to: '31 19 31 9 *'},
			{from: '28 20 31 9 *', to: '33 20 31 9 *'},
			{from: '30 21 31 9 *', to: '35 21 31 9 *'},
			{from: '32 22 31 9 *', to: '37 22 31 9 *'},
			{from: '34 23 31 9 *', to: '39 23 31 9 *'},
		]
	}
},

Then I have set the “classes” on this player to “scheduler turn90”, the first class is for the MMM-ModuleScheduler to work and the second is for the player to be turned 90 degrees and set to full screen.
My CSS entry for this player looks like this:

/* MMM-Videoplayer ----------------------------------*/
.MMM-Videoplayer video {
    width: 1080px;
    height: 1920px;
}

.turn90 video {
    position: absolute;
    transform:rotate(90deg);
    transform-origin: bottom left;
    width: 100vh;
    height: 100vw;
    margin-top: -100vw;
    object-fit: cover;
}
/*****************************************************/

That’s it. :)

[feigi]

@Snille
Thank you very much for your answer. Sorry for my late reply, but i did not have time to cover this through the week.

I updated to the latest version and disabled all other modules on my rPI.

But none the less, it does not load the (or any other video).

I dont see any errors:
[2020-10-25 19:30:29.738] [LOG] Starting MagicMirror: v2.12.0
[2020-10-25 19:30:29.749] [LOG] Loading config …
[2020-10-25 19:30:29.758] [LOG] Loading module helpers …
[2020-10-25 19:30:29.761] [LOG] No helper found for module: MMM-VideoPlayer.
[2020-10-25 19:30:29.762] [LOG] All module helpers loaded.
[2020-10-25 19:30:29.981] [LOG] Starting server on port 8080 …
[2020-10-25 19:30:30.000] [LOG] Server started …
[2020-10-25 19:30:30.001] [LOG] Sockets connected & modules started …
[2020-10-25 19:30:30.145] [LOG] Launching application.

Did already someone had success to test this on rPI?
Or what could i do for some more debug?

Cheers,
Feigi

[sdetweil]

@feigi which version, there are 3? google search ‘mmm-videoplayer github’

Snille’s version does not have a node_helper.js file
the others do

[Snille]

@feigi Yes, as @sdetweil said, I’m not using a “node_helper” at all. It’s not needed for the player. It looks like it’s loading as it should. If you don’t see the video, try putting it in another region just to see if it plays. I have only tested the player on my mirror (Ubuntu server with XFCE desktop on a Intel NUC machine) and on a Ubuntu server (running in a container (LXC) then accessing the mirror from a Windows 10 machine in Chrome). And both of them are working… But I can imagine that the RPi may struggle…

[feigi]

@Snille Yes, i use your Version. The content of my cloned folder on the rPI is identical to your folder on github. So i am using the same Version.
Why its showing that its trying to load a node_helper, i have no idea. I dont even know what that is :) I just started the MM without any other modules than yours and did not see an Error and just wanted to show that.

But its ok if this is not possible to play on a rPI. Was worth a try!

Thanks anyway for your support and the great work! :)

[sdetweil]

@feigi said in MMM-Videoplayer - Play video files on your mirror:

Why its showing that its trying to load a node_helper

the system ALWAYS tries and reports… nothing worrisome…

[BKeyport]

One minor note - in your readme on github, there’s no install instructions. I’d add that…

Seems to be good otherwise.

[Snille]

@BKeyport Oh! Good point! I’ll fix that. Thank you! :)

[Snille]

Added a new function in v0.4. See first post…

[elitecybernet]

@Snille i had tried your mmm videoplayer, im curious is it no sound for playing video ?Or i need to do something on my config? I want to play with hdmi sound in my monitor.

thank for your support. good job

[Snille]

@elitecybernet Hi! Yes, default is “no sound”, because if you set it to yes, it will not “autoplay”. But you can just change the option: muted to false.

{
  module: 'MMM-Videoplayer',
  position: 'middle_center',
  config: {
    muted: false,
  }
},

Like so… :)