Как изменить позиции заголовка с помощью JWPlayer v8 - PullRequest
Новая
       6

Как изменить позиции заголовка с помощью JWPlayer v8

0 голосов
/ 29 сентября 2019

Наши ролики используют нижнюю треть страницы для введения и т. Д., Так же, как и телевизионные новостные станции. Когда подписи включены, они блокируют все это, создавая множество жалоб от сообществ, которым нужны подписи. Я пытался поработать с CSS, но с адаптивным макетом изменение размера плеера приводит к хаосу, часто полностью скрывая их.

Есть ли параметр, который можно изменить, или методику, которая будет держать заголовки сверху и на виду при изменении размера, ИЛИ во внешнем контейнере?

enter image description here

Ответы [ 2 ]

1 голос
/ 30 октября 2019

Проблема: заголовки проигрывателя JW 608 отформатированы неправильно. Чтобы решить эту проблему, отключите отображение заголовка JW и отформатируйте наше собственное окно с именем "ccbuffer" 

<style type="text/css">
    .jw-captions {
           display: none !important;
    }
    #ccbuffer {
        border: 2px solid white !important;
        border-radius: 4px;
        background-color: black !important;
        display: flex;
        height: 120px;
        margin-top: 6px;
        font: 22px bold arial, sans-serif;
        color: white;
        justify-content: center;
        align-items: center;
    }
</style>

Здесь я показываю проигрыватель, а ccbuffer - это div под ним 

    <div id="myPlayer">
        <p style="color: #FFFFFF; font-weight: bold; font-size: x-large; border-style: solid; border-color: #E2AA4F">
            Loading video...
        </p>
    </div>
    <div id="ccbuffer" />

DOMSubtreeModified устарела. Используйте MutationObserver, который менее стрессовый для клиента. Давайте подключим событие 'captionsChanged' из JW. если трек равен 0, тогда заголовки не выбраны, и мы отключаем наблюдателя. Если заголовки выбраны, то мы используем jquery, чтобы вытащить текст из элемента jw-text-track-cue и отформатировать его в красивый трехстрочный дисплей в нашем окне ccbuffer. 

<script>
    var observer;

    jwplayer().on('captionsChanged', function (event) {
        if (event.track == 0) {
            observer.disconnect();
            $('#ccbuffer').hide('slow');
        }
        else {
            $('#ccbuffer').show('slow');

            // select the target node
            var target = document.querySelector('.jw-captions');

            // create an observer instance
            observer = new MutationObserver(function(mutations) {
                $('.jw-text-track-cue').each(function(i) {
                    if (i == 0)
                        $('#ccbuffer').html( $(this).text() );
                    else
                        $('#ccbuffer').append("<br/>" + $(this).text() );
                });
            });

            // configuration of the observer:
            var config = { attributes: true, childList: true, characterData: true }

            // pass in the target node, as well as the observer options
            observer.observe(target, config);
        }
    });

    $(document).ready(function () {
        $('#ccbuffer').hide();
    });

</script>

Так что когдапользователь включает подписи, окно ccbuffer откроется и отобразит чистое трехстрочное представление текста CC.

image of jw player with captions

1 голос
/ 01 октября 2019

Хотя внешний контейнер будет оптимальным, при размещении надписей в верхней части проигрывателя, по крайней мере, всегда будет видна нижняя треть.

Во всех других ответах, касающихся этого, предлагается указать значение в пикселях длявершина класса jw-caption. При изменении размера игрока это не работает, поэтому использование процента вместо этого помогло мне как временному решению.

.jw-captions{ top:-80%!important; }

Makeshift External Captions Container

Используя jQuery, текст заголовка может быть захвачен с помощью этого кода и CSS: 

$("body").on('DOMSubtreeModified', ".jw-captions", function() {
    $('#captions_external').text( $(this).text() )
});

.jw-captions{
   display:none !important;
}

Однако пока я не могу зафиксировать событие отключения подписи илиТаким образом, недостатком является то, что подписи всегда включены. ( маленькие шаги .... )

...