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

Answer 1

您可以在您正在呈现的“播放器”模板上使用立即调用的函数表达式 (IIFE) 来检查数据是否已传递，然后执行您需要的函数。

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

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