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.