How to show Captions in an external container using JWPlayer v8

Question

Our videos use the lower third of the page for introductions, etc. much like TV News stations do. When captions are on, they're blocking all of that, thus creating a LOT of complaints from the communities that need the captions. I've tried tinkering with the CSS, but with a responsive layout, resizing the player wreaks havoc, often putting them out of sight altogether.

Is there a setting that can be changed, or technique to use, that will keep the captions at the top and in view when resized, OR in an external container?

Answer 1

Problem: the JW player 608 live captions are not formatted cleanly. To solve this, disable the JW caption display and format our own window, named "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>

Here is where I show the player, and ccbuffer is a div right below it

    <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 is deprecated. Use MutationObserver, which is less stressful on the client. Let's hook the 'captionsChanged' event from JW. if track is 0 then no captions are selected and we disconnect the observer. If captions are selected, then we use jquery to pull the text out of the jw-text-track-cue element, and format it into a nice 3 line display in our ccbuffer window.

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

So when the user enables captions, the ccbuffer window will slide open and display a clean 3 line representation of the CC text.