Dynamically create DOM element with JavaScript logic and data

Question

I have a simple express app which shows the list of the movie and on clicking any of them opens another page with the player. I needed load this piece of script to inject video player inside the element.

here, in this endpoints pass the video object on the player layout

router.get('/video/:id', (req, res) => {
    videoController.singleVideo(req, (err, data) => {
        if (err) return res.redirect('/');
        return res.render('player', {video: data });
    });
});

Now, I want to run this piece of JS code with the video data I passed when this player layout is loaded.

const playVideo = (video) => {
  window.location = 'http://localhost:8080/video/'+id;



     const conf = {
        key: '',
        source: {
          dash: video.dashSrc,
          hls: video.hlsSrc,
          progressive: video.videoSrc,
          poster: video.thumbSrc,
        },

      };

      const player = bitmovin.player('my_player');

      player.setup(conf).then(() => {
        player.play();
      });
      };

Answer 1

You could use an immediately invoked function expression (IIFE) on the "player" template that you are rendering to check that data has been passed and then execute the function you require.

(function() {
  const playVideo = (video) {...}

  if (video !== undefined) { playVideo(video); }
}());