Popcorn popcorn.js 자막/캡션 용 켜기/끄기 버튼

Question

popcorn.js를 사용하여 내 비디오에 자막/캡션을 추가하고 있습니다. 자동으로 비디오에 표시됩니다. 현재 HTML 및 자바 스크립트를 사용하여 맞춤 동영상 컨트롤을 만들고 있습니다. 캡션을 켜고 끄기 위해 만든 버튼이 필요합니다. 여기

내 HTML 버튼 및 비디오입니다

다음

<input type="button" value="Captions" id="captions" onclick="Captions()" class="button"/> 

<video id="video" width="896" height="504" data-setup="{}" > 
<source src="video/MyVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> 
<source src="video/MyVideo.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'> 
<source src="video/MyVideo.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' /> 
<p>Your browser doesn't support HTML5. Maybe you should upgrade.</p> 
</video> 

내가 자바 스크립트에 새로 온 사람

document.addEventListener("DOMContentLoaded", function() { 

     var popcorn = Popcorn("#video");true; 


     popcorn.subtitle({ 
      start: .5, 
      end: 2.5, 
      text: "Subtitle Text" 

     popcorn.subtitle({ 
      start: 2.5, 
      end: 9.5, 
      text: "Or captions" 
     }); 
     }, false); 

팝콘

를 사용하여 내 자바 스크립트의 일부이다 (현재의 onclick 기능 "캡션"비어) 그래서 어떤 도움을 주시면 감사하겠습니다.

업데이트 : 캡션이 자동으로 재생되지 않도록하려면 어떻게해야합니까? 동영상 재생이 시작되면 동영상을 종료하고 싶습니다.

Answer 1

팝콘은 특정 플러그인을 켜고 끌 수있는 enable 및 disable 방법이 있습니다.

이벤트 리스너 기능 내에서 팝콘 인스턴스를 정의 했으므로 거기에 클릭 핸들러를 설정해야합니다. 그래서, 당신의 HTML에 대한 ...

<input type="button" value="Captions" id="captions" class="button"/> 

그리고 스크립트

...

document.addEventListener("DOMContentLoaded", function() { 

    var popcorn = Popcorn("#video"); 
    var showSubtitles = true; 
    document.getElementById('captions').addEventListener('click', function() { 
     //toggle subtitles 
     showSubtitles = !showSubtitles; 
     if (showSubtitles) { 
      popcorn.enable('subtitle'); 
     } else { 
      popcorn.disable('subtitle'); 
     } 
    }, false); 

    /* fill in your subtitles here... */ 
}, false); 

여기

공식 문서 : http://popcornjs.org/popcorn-docs/media-methods/#disable