Dom 木偶js：如何呈现HTML5/javascript视频播放器

一些流行的、商用的HTML5视频播放器本质上是一大块JavaScript。JWPlayer就是其中之一。我用了一个不同的，但它的设置类似

这些玩家的嵌入方式通常与客户端MVC框架不一致。玩家希望将自己呈现给DOM。实例化一个播放器对象并将DOM元素传递给它的构造函数。像

    mediaPlayer = new CommercialVideoPlayer("some-place-in-DOM");

然后，玩家将自己呈现到“DOM中的某个地方”

这是否与木偶中的视图渲染冲突—区域管理器显示视图

换言之，“玩家渲染自身”这件事，在我的第一眼看来，似乎与木偶想要渲染的概念相冲突。它希望其区域管理器将视图映射到DOM元素。它不希望一些玩家在DOM中粘贴东西

它想做

    someRegion.show(someView);

我不是在绞尽脑汁想我的HTML5视频播放器放在哪里？在视野之内

当我把它放在一个视图中，然后试图显示它，就像

    videoRegion.show(videoView);//media player is inside videoView

…我一无所获，因为木偶的区域经理和玩家正在为谁能在哪里渲染而争吵

---

我想我只是对木偶js希望我用这个媒体播放器做什么缺乏概念上的理解。我正在寻找一种理解和最佳实践。

木偶区域经理希望显示木偶视图。时期他们不关心这些观点的作用

换句话说，您可以让视图创建DOM元素，然后显示视频播放器，如：

var VideoView = Marionette.ItemView.extend({
  template: _.template('<div id="video-player"></div>'),

  onShow: function(){
    this.mediaPlayer = new CommercialVideoPlayer("some-place-in-DOM");
  }
});

var myVideoView = new VideoView();

videoRegion.show(myVideoView);

var VideoView=marionete.ItemView.extend({
模板：u.模板（“”），
onShow:function（）{
this.mediaPlayer=新的商业视频播放器（“DOM中的某个地方”）；
}
});
var myVideoView=new VideoView（）；
videoRegion.show（myVideoView）；

---

以上是未经测试的伪代码，但应该可以让您朝着正确的方向前进。

似乎是合乎逻辑的。但是不起作用，因为虽然木偶不关心视图的作用，但玩家是这样做的。除非它的容器div（id=“video player”）存在于DOM中，否则它不想呈现自己。在onShow中，它还没有被插入DOM中。我已经通过完全删除木偶并将播放器嵌入普通html页面来测试了这一点。如果我删除播放器的容器div，“video player”，我得到的错误与运行上面的木偶演示代码时得到的错误相同。这是两个第三方库发生冲突的案例之一。有点鸡和蛋的问题，我需要一些木偶的方式来渲染我的模板，然后我的玩家才能找到容器元素。我的错。其他小错误。我想这可能有用。现在查，是的。这很有效。我忘了在你的itemView周围设计额外的div提线木偶。默认情况下，它没有大小，因此我的视频播放器没有出现。在itemView中添加了类名：“fullsize”，并在其中给它一些大小。一切都好。非常感谢你的洞察力。