Timer on Module

A Former User

I’m back. Sorry for my prior mistypo and unsufficient post. I was typing that on my phone.

start: function() {
  this.timer = null  
  this.videoDom = null
},
getDom: function() {
  var container =  document.createElement("div")
  var video = document.createElement("video")
  video.id = "VIDEO"
  video.style.display = "none"
  video.autoplay = true
  video.loop = this.config.loop
  container.appendChild(video)
  this.videoDom = video
  return container 
// Just create DOMs in getDom(). It's better to control DOMs outside of getDom().
},
notificationReceived: function(noti, payload, sender) {
  if (noti == "DOM_OBJECT_CREATED") this.work()
//DOM_OBJECT_CREATED would be the best time to start your job. Your DOM would be created and be ready to work on that message.
},
work: function(src = null, interval = null) {
  clearTimer(this.timer)
  interval = (interval) ? interval : this.config.interval
  src = (src) ? src : this.config.videoSRC
  this.playVideo(src)
  this.timer = setTimeout(()=>{
    this.work()
  }, interval)
//setTimeout is better than setInterval.
// you can repeat this function by interval. you can change interval and src with parameters of this function.
},
playVideo: function(src) {
  this.videoDom.src = src
  if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
  this.videoDom.play()
  // assign src to your videoDom and play it.
}

Not tested on real device, so maybe somthig is missed, but this is basic approach.
I didn’t use updateDom because there is no need to redraw whole module just for playing video.

dsmtweaker

@sean Thank you, and everyone else for all the help. It’s refreshing to find a forum that doesn’t automatically start bashing beginners.

I think my knowledge is just not ready for something this advanced yet. I used your code, and tried changes here and there to make it work, but still no luck. I am no longer getting any errors in the console. But nothing happens(ie- no video ever loads/plays) this is where I got the code so far…

Module.register(“MMM-htmlvideo”,{

// Default module config.
defaults: {
	videoSRC: 'https://www.mid-americantitle.com/wp-content/uploads/output_HD7205.mp4',
	loop: true,
		},

// get stylesheet
getStyles: function() {
	return ["htmlvideo.css"];
},



start: function() {
  this.timer = null  
  this.videoDom = null
},
getDom: function() {
 var container =  document.createElement("div")
 var video = document.createElement("video")
 video.src = this.config.videoSRC;
video.id = "VIDEO"
video.style.display = "none"
video.autoplay = true
 video.loop = this.config.loop
 container.appendChild(video)
 this.videoDom = video
 return container 
// Just create DOMs in getDom(). It's better to control DOMs outside of getDom().
},
notificationReceived: function(noti, payload, sender) {
 if (noti == "DOM_OBJECT_CREATED") this.work()
//DOM_OBJECT_CREATED would be the best time to start your job. Your DOM would be created and be ready to work on that message.
},
work: function(src = null, interval = null) {
 clearTimer(this.timer)
 interval = (interval) ? interval : 30000
 src = (src) ? src : this.config.videoSRC
  this.playVideo(src)
  this.timer = setTimeout(()=>{
   this.work()
  }, interval)
//setTimeout is better than setInterval.
// you can repeat this function by interval. you can change interval and src with parameters of this function.
},
playVideo: function(src) {
this.videoDom.src = src
 if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
  this.videoDom.play()
  // assign src to your videoDom and play it.
},

});

I tried changing “interval” with actual numbers, as well as changing the source in multiple locations. Still just get a black screen.

A Former User

@dsmtweaker
Sorry there were another mistypes. DOM_OBJECT_CREATED => DOM_OBJECTS_CREATED (and clearTimer => clearTimeout)

use this. tested.

Module.register("test",{
  defaults: {
    videoSRC: 'https://www.mid-americantitle.com/wp-content/uploads/output_HD7205.mp4',
    loop: true,
    interval: 36000,
  },

  start: function() {
    this.timer = null
    this.videoDom = null
  },

  getDom: function() {
    var container =  document.createElement("div")
    var video = document.createElement("video")
    video.id = "VIDEO"
    video.style.display = "none"
    video.autoplay = true
    video.loop = this.config.loop
    container.appendChild(video)
    this.videoDom = video
    return container
  },
  notificationReceived: function(noti, payload, sender) {
    if (noti == "DOM_OBJECTS_CREATED") this.work()
  },
  work: function(src = null, interval = null) {
    clearTimeout(this.timer)
    interval = (interval) ? interval : this.config.interval
    src = (src) ? src : this.config.videoSRC
    this.playVideo(src)
    this.timer = setTimeout(()=>{
      this.work()
    }, interval)
  },
  playVideo: function(src) {
    this.videoDom.src = src
    if (this.videoDom.style.display == "none") this.videoDom.style.display = "block"
    this.videoDom.play()
  },
})

Anyway, your video is already repeating by loop: true, why you need to repeat it with timer?

dsmtweaker

@sean You are a genius, thank you so much.

Extra bonus, do you know of anyway to use a local source, instead of a web source?

IE- videoSRC: “/home/pi/content/videos/video1.mp4”

It’s not necessary, I just figured running something locally instead of from the web
would help reduce lag/buffer/tearing etc.

dsmtweaker

@sean said in Timer on Module:

Anyway, your video is already repeating by loop: true, why you need to repeat it with timer?

Because I don’t want it to loop. I want it to play in intervals. Like maybe every 15 minutes it runs the video(once)

A Former User

@dsmtweaker
If your local content locates under MagicMirror and it’s sub directory, you can contact via http.
~/MagicMirror/YOUR_RESOURCE => http://localhost:8080/YOUR_RESOURCE
~/MagicMirror/modules/MMM-SOMETHING/SOMEWHERE/SOME => http://localhost:8080/modules/MMM-SOMETHING/SOMEWHERE/SOME

But other location… hmmm I’m not sure whether symbolic_link would work. If not so, you need another approach. - more complex… just to move your content under MagicMirror would be simpler.