0

私は現在、video.js-Library を使用する Meteor アプリケーションを開発しています。

次のテンプレートがあります。

template(name='foo')
  .video.embed-responsive.embed-responsive-16by9
    with richMediaContent
      video#video.video-js.vjs-default-skin.vjs-big-play-centered(controls='' preload='auto')
        source(src='{{video.videoUrl}}' type='video/mp4')
        p.vjs-no-js {{i18n 'videoTagNotSupported'}}

テンプレートがレンダリングされた後の video.js-Library の初期化は正常に機能します。

Template.foo.onRendered ->
  videojs document.getElementsByClassName('video-js')[0], {}

ただし、同じテンプレートが別のビデオ (別の richMediaContent) でレンダリングされる場合、videojs-Library は再初期化されません。

新しいビデオが読み込まれるたびに onRendered-Call が呼び出されるように、既に video-Part を独自のテンプレートに移動して foo-Template に含めようとしました。しかし、これはうまくいかないようです。

ビデオが変更された場合にライブラリを再初期化する方法を知っていますか?

前もって感謝します！

4

1 に答える 1

1

新しい答え

実際、ルートが変更されても同じテンプレートを使用する場合、そのテンプレートは再度レンダリングされないため、js プラグインの呼び出しが 2 回トリガーされることはありません。代わりにできることはonAfterAction、ルート定義内で呼び出しでjs プラグインを呼び出すことです。

Router.route('/video/:_id', {
  name: 'video_page',
  template: 'foo',
  // ...
  onAfterAction: function () {
    videojs document.getElementsByClassName('video-js')[0], {}
  }
});

前の回答

あなたは万能を探していると思いますthis.autorun。onRendered 関数の最後は、次のようになります (純粋な JavaScript で入力します)。

this.autorun(function () {
  var video = Session.get("video"); // reactive data
  videojs document.getElementsByClassName('video-js')[0], {}
});

アイデアは、最初の行に、自動実行関数内に、リアクティブ データを取得する方法を含める必要があるということです。その場合、リアクティブなセッションを使用します。コレクションもリアクティブなので、別の方法はVideos.findOne();. これは、その要素を取得する方法によって異なります。video

これにより、リアクティブ データが変更されるたびに、 のコールバックthis.autorunが再度実行され、ビデオ プラグインがリセットされます。

于 2015-04-29T15:12:43.250 に答える