流星会议不适用于 html5 视频

Question

我正在尝试使用流星来操作一组自定义 html5 视频控件。我的模板代码完全由以下内容组成：

Template.video.created = ->
  Session.set 'videoPlaying', false

Template.video.events
  'click .video-button-play': ->
    video = $('video')[0]
    if video.paused then video.play() else video.pause()
    Session.set 'videoPlaying', not video.paused

Template.video.helpers
  isPlaying: ->
    true

相关html如下：

<div class="video-button video-button-play">
  {{#if isPlaying}}
    <i class="icon-pause"></i>
  {{else}}
    <i class="icon-play"></i>
  {{/if}}
</div>

上述方法的工作原理是视频在正确的时间停止和开始，如果我从控制台查询会话数据，它就可以工作。然而，当我从助手那里读取会话数据时，一切都变糟了——有些点击什么都没有，有些重新启动视频，有些只是播放音频。特别疯狂的是，甚至像这样记录会话：

Template.video.helpers
  isPlaying: ->
    console.log Session.get('videoPlaying')
    true

导致同样的问题。

解决方案：我尝试使用保留并将视频放置在恒定区域（感谢 skeetmtp），发现使用恒定区域是最好的解决方案，因为它允许我继续使用带有视频。

Answer 1

每当 videoPlaying 发生变化时，Meteor 都会重建整个“视频”模板，我猜您的自定义 html5 视频在此模板中。 你应该尝试任何一个（如果可能的话）

• 将其放入单独的模板中
• 在您的自定义 html 周围使用一个常量区域：http://docs.meteor.com/#constant
• 或使用保留：​​http://docs.meteor.com/#template_preserve

如果没有关于您的 html 代码的更多信息（特别是自定义视频控件），我无法为您提供更多帮助。