Кнопка включения/выключения Popcorn popcorn.js для субтитров/титров

Я использую popcorn.js, чтобы добавить некоторые субтитры/заголовки к своему видео. Они автоматически показаны на видео. В настоящее время я создаю пользовательские элементы управления видео, используя html и JavaScript. Я хотел бы, чтобы кнопка, которую я создал, включала и выключала субтитры.

Вот моя html-кнопка и видео (в настоящее время функция onclick «Подписи» пуста)

 <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 с использованием Popcorn

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, поэтому буду признателен за любую помощь.

Обновление: как мне сделать так, чтобы субтитры не воспроизводились автоматически. Я бы хотел, чтобы они были выключены, когда видео начинает воспроизводиться.


javascript button html5-video caption popcornjs
person Noob_C    schedule 04.01.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В 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

person brianchirls    schedule 09.01.2013
comment
Боже мой спасибо большое!! Оно работает!! Единственное, подписи появляются автоматически. Как настроить так, чтобы они отображались только при нажатии на кнопку? Спасибо!! - person Noob_C; 09.01.2013
comment
Кроме того, как я могу сделать так, чтобы кнопка включала и отключала субтитры в различных состояниях. Извините, я знаю, что это так просто, но я новичок в JavaScript. - person Noob_C; 09.01.2013
comment
Хорошо, я разобрался с субтитрами и субтитрами. Я добавил document.getElementById(captions).value = captions off; ниже popcorn.enable('subtitle'); Мне все еще нужна помощь с отсутствием автоматических субтитров. - person Noob_C; 09.01.2013
comment
Хорошая работа, выяснить, как изменить текст. Отключить по умолчанию легко. Просто запустите popcorn.disable('subtitle'); сразу после загрузки событий субтитров. (Вы также должны иметь возможность запускать его раньше - была ошибка, которая не позволяла вам это сделать, но я считаю, что она была исправлена.) - person brianchirls; 10.01.2013
comment
Большое спасибо! К вашему сведению, всем, кто читает этот ответ, вы ставите popcorn.disable('subtitle'); после ваших субтитров, но перед }, false); Мне также пришлось внести некоторые коррективы и переключить popcorn.enable и popcorn.disable, чтобы кнопки работали правильно. - person Noob_C; 10.01.2013
comment
О да, это верно. Если вы собираетесь начать с отключенными субтитрами, вы хотите установить showSubtitles = false в начале. Или поменять все местами, как вы сделали. - person brianchirls; 11.01.2013