MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

MMM-Videoplayer - Play video files on your mirror


  • Module Developer

    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.
    Screenshot

    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.


  • 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


  • Module Developer

    @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? 🙂


  • Module Developer

    @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).


  • Module Developer

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


  • Module Developer

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



  • 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!


  • Module Developer

    @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… 🙂



  • @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!


  • Module Developer

    @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. 🙂


Log in to reply