2

我正在尝试使用流星来操作一组自定义 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），发现使用恒定区域是最好的解决方案，因为它允许我继续在视频中使用海报。

4

1 回答 1

2

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

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

于 2013-03-25T23:21:28.647 回答