Marionette js：如何渲染 HTML5/javascript 视频播放器

Question

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

这些播放器的嵌入方式似乎与一般客户端 MVC 框架格格不入。玩家想要将自己渲染到 DOM。您实例化一个播放器对象并将一个 DOM 元素传递给它的构造函数。喜欢...

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

然后播放器将自己渲染到“DOM 中的某个位置”。

这不会与 Marionette 中的视图渲染冲突 - 区域管理器显示视图吗？

换句话说，这个“玩家渲染自身”的东西，乍一看，似乎与木偶想要渲染的概念相冲突。它希望其区域管理器将视图映射到 DOM 元素。它不希望某些玩家在 DOM 中粘贴东西。

它想做...

    someRegion.show(someView);

我并没有想通我的 HTML5 视频播放器的位置？在视图内？

当我把它放在一个视图中然后尝试显示它时，比如......

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

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

我想我只是对 Marionette js 想要我用这个媒体播放器做什么缺乏概念上的理解。我正在寻求理解和最佳实践。

Answer 1

Marionette 区域经理想要显示 Marionette 视图。时期。他们不关心这些视图的作用。

换句话说，您可以让视图创建 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);

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