0

popcorn.jsを使用して、ビデオに字幕/キャプションを追加しています。これらは自動的にビデオに表示されます。現在、htmlとJavaScriptを使用してカスタムビデオコントロールを作成しています。キャプションのオンとオフを切り替えるために作成したボタンが欲しいのですが。

これが私のhtmlボタンとビデオです（現在、onclick関数「Captions」は空です）

 <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>

これがポップコーンを使った私のJavaScriptの一部です

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 );

私はJavaScriptを初めて使用するので、助けていただければ幸いです。

更新：キャプションが自動再生されないようにするにはどうすればよいですか。動画の再生が始まったらオフにしてほしい。

4

1 に答える 1

0

Popcornには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

于 2013-01-09T06:08:10.890 に答える