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