javascript - JavaScript ロジックとデータを使用して DOM 要素を動的に作成する

Question

映画のリストを表示するシンプルな高速アプリがあり、それらのいずれかをクリックすると、プレーヤーで別のページが開きます。このスクリプトをロードして、要素内にビデオ プレーヤーを挿入する必要がありました。

ここでは、このエンドポイントでプレーヤー レイアウトのビデオ オブジェクトを渡します

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

ここで、このプレーヤ レイアウトがロードされたときに渡したビデオ データを使用して、この JS コードを実行します。

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();
      });
      };