2013-03-25 4 views
2

유성을 사용하여 일련의 맞춤 html5 비디오 컨트롤을 조작하려고합니다. 내 템플릿 코드가 완전히 다음과 같이 구성되어 다음과 같이meteor 세션이 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 

같은 결과가 발생합니다.

해결책 : I (감사 skeetmtp)를 유지하여 일정한 지역에 비디오를 배치 시도하고 비디오와 포스터를 계속 나를 허용되는 일정한 영역을 사용하는 것이 가장 좋은 방법 것으로 나타났습니다.

답변

2

Meteor는 videoPlaying이 변경 될 때마다 전체 "비디오"템플릿을 다시 작성하고 있습니다. 사용자 정의 html5 비디오가이 템플릿 안에 있다고 생각합니다. 보존 http://docs.meteor.com/#constant

  • 또는 사용 : http://docs.meteor.com/#template_preserve
  • 을하지 않고 당신이 중 하나 (가능하면)

    • 사용자 정의 HTML 주위에 별도의 템플릿에
    • 를 사용하여 일정한 영역을 넣어 시도해야 html 코드 (특히 사용자 정의 비디오 컨트롤)에 대한 자세한 정보가 있으면 더 이상 당신을 도울 수 없습니다.

    +0

    제안 해 주셔서 감사합니다. 지금 알려 드리겠습니다. 방금 내 질문 끝에 데모 코드에 대한 링크를 추가했습니다. –

    +0

    'Template.video.preserve [ 'video']'이 문제를 해결하는 것 같지만 포스터를 삭제해야만했습니다. 이는 불행합니다. –

    관련 문제