Question

我正在使用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>

以下是我使用Popcorn的一些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的新手，所以任何帮助都会受到赞赏。

更新：如何获取，以便字幕不会自动播放。当视频开始播放时，我希望它们关闭。

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

爆米花popcorn.js开/关按钮的字幕/标题

1 个答案: