Closed Captioning in Church Online Platform

How to add closed captioning links to the Church Online Platform v3 (sites that end in .churchonline.org not those that end in .online.church). This requires you having two video embeds available, one with closed captioning and one without.

We use LivingAsOne and have 2 web encoders to do this. One of them is being fed with a feed from our switcher without captions, the other has audio going to a computer's mic which is on https://webcaptioner.com/ giving us captions in realtime. They are keyed out on the switcher and overlaid and sent to the second web encoder.

With that we now have two LA1 embed links. One with captions, one without. Now how do we get this on our site for users?

----------------------------------------------------

Method 1: High/Low
This doesn't work on mobile devices. Use Method 2 if you wan that. Use the built in "high" and "low" embed fields to embed "normal" and "caption" feeds. Having an embed code in both video fields will activate code that puts a "watch in low quality" and "watch in high quality" link respectively on your page. We can use JavaScript to change that text to read "Turn Captions On" and "Turn Captions Off" instead.

Edit your ChOP theme template (themes -> edit -> HTML -> template) and around line 118 or so, find:
    <div class="row full-width event-details">
      <div class="medium-7 columns">
        <div>
          <h2>{{ event.title }} <small>{{ event.speaker }}</small></h2>
          <p>{{ event.description }}</p>
          {{ component.next_service_time }}
        </div>
        <div class="share">
          {% if settings.show_social == '1' %}
            <h6>{{ 'share' | translate }}</h6>
            {{ component.share }}
            {% endif %}
          {{ component.quality_switch }}
        </div>
      </div>

We're swapping the shortcode {{ component.quality_switch }} with the code it usually pulls, adding our own id attribute to it of "captiontoggle" and moving it all above the Event Title so it is just under the player window, so replace that code with:
    <div class="row full-width event-details">
      <div class="medium-7 columns">
        <div>
          <div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch" style="margin: -15px 0 10px;"></div>
          <h2>{{ event.title }} <small>{{ event.speaker }}</small></h2>
          <p>{{ event.description }}</p>
          {{ component.next_service_time }}
        </div>
        <div class="share">
          {% if settings.show_social == '1' %}
            <h6>{{ 'share' | translate }}</h6>
            {{ component.share }}
            {% endif %}
        </div>
      </div>

Now we need to edit our high and low embed codes for the video on the event. Here is my regular feed with code to relabel "watch low quality" with "turn captions on". You'll notice I added a script before the embed code that holds a function called "ccrewrite2" and it looks for the div on the page with the ID "captiontoggle" which we set in our template above.

It then looks for the parent of that div and replaces the innerHTML of it's child. I couldn't get this to work any other way (like just replacing the outerHTML of captiontoggle) as they have unknown code that runs based on the data-behavior="quality_switch" tag and removing that broke the links.

Other than my script here before the embed code, you'll notice I added an onload="ccrewrite2()" to the script my embed code already had in it. This means that every time the video embed is called, it runs that code to relabel the link "turn captions on." (I'm curious if I simplified this by unwrapping my script in the function tag and removing the onload from the second script if it would still run the code correctly, but I no longer have this in place to test.)

change your default feed to:
<script>
function ccrewrite2() {
  var xcc = parent.document.getElementById("captiontoggle");
  var ycc = xcc.children[0];
  ycc.innerHTML = "turn captions on";
  }
</script>
<!-- Insert your normal Embed Code here -->
<div id="la1-video-player" data-embed-id="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"></div>
<script onload="ccrewrite2()" type="application/javascript" src="https://control.livingasone.com/webplayer/loader.min.js"></script>
<!-- End of your Embed Code -->

change your low feed with code to relabel "watch high quality" with "turn captions off":
<script>
function ccrewrite1() {
  var xcc = parent.document.getElementById("captiontoggle");
  var ycc = xcc.children[0];
  ycc.innerHTML = "turn captions off";
  }
</script>
<!-- Insert your captioned Embed Code here -->
<div id="la1-video-player" data-embed-id="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"></div>
<script onload="ccrewrite1()" type="application/javascript" src="https://control.livingasone.com/webplayer/loader.min.js"></script>
<!-- End of your Embed Code -->

----------------------------------------------------------------------

Method 2: Preview Theme
We set up a second ChOP theme and use their "preview" link for that them to show the captioned embed. This works on desktop and mobile, but involves a dedicated theme for captions that doesn't close the video player based on the ChOP Schedule... This means "on demand" rewatching is possible outside of your service times if they have this link bookmarked or left open from the weekend. Not ideal, but it works. However the "turn captions on" link isn't visible on the normal page outside of service times, so that helps cut down on traffic on the caption page when it shouldn't be there.

Create a copy of your theme and add "with captions" or whatever to the end of the name so you know which is which.

We need to force the new theme's video embed to have the cc feed and not what the video embed code is from the event page. So edit the template (themes -> edit -> HTML -> template) and look for the shortcode of {{ component.video }} around line 76...
      <div class="medium-8 columns no-padding-right" role="content">
        {{ component.video }}
        {{ component.slides }}
      </div>

on the preview theme, change that to (obviously swap your embed code instead of mine):
      <div class="medium-8 columns no-padding-right" role="content">
        <!--change out component.video and embed caption feed -->
        <div class="co-video">
            <!-- Insert your captioned Embed Code here -->
            <div id="la1-video-player" data-embed-id="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb"></div>
            <script type="application/javascript" src="https://control.livingasone.com/webplayer/loader.min.js"></script>
            <!-- End of your Embed Code -->
        </div>
        <!-- end changeout -->
        {{ component.slides }}
      </div>

Now your copied theme should always have captions on (but remember it also exists outside the functionality of the ChOP schedule so it no longer closes when it shouldn't be active). We need to insert links to direct people to turn captions on/off... Though we aren't using the high/low quality video embeds, we are using the quality switch code for our link placement just like in method 1 above. So edit the template and around line 127 or so, find (AND you need to do this to your normal template around line 121 or so as well):
    <div class="row full-width event-details">
      <div class="medium-7 columns">
        <div>
          <h2>{{ event.title }} <small>{{ event.speaker }}</small></h2>
          <p>{{ event.description }}</p>
          {{ component.next_service_time }}
        </div>
        <div class="share">
          {% if settings.show_social == '1' %}
            <h6>{{ 'share' | translate }}</h6>
            {{ component.share }}
            {% endif %}
          {{ component.quality_switch }}
        </div>
      </div>

We're swapping the shortcode {{ component.quality_switch }} with the <div> code it usually pulls, adding our own id attribute to it of "captiontoggle" and moving it all above the Event Title so it is just under the player window, so replace that code with:
    <div class="row full-width event-details">
      <div class="medium-7 columns">
        <div>
          <div id="captiontoggle" class="co-quality-switch" data-behavior="quality_switch" style="margin: -15px 0 10px;"></div>
          <h2>{{ event.title }} <small>{{ event.speaker }}</small></h2>
          <p>{{ event.description }}</p>
          {{ component.next_service_time }}
        </div>
        <div class="share">
          {% if settings.show_social == '1' %}
            <h6>{{ 'share' | translate }}</h6>
            {{ component.share }}
            {% endif %}
        </div>
      </div>

Though mobile doesn't run any code INSIDE that div, that div is still displayed and now that we have an id on it (captiontoggle) we can use that to put in our captioning on/off links. So let's do just that. At the bottom of your copied theme template, find:
  {{ organization.google_analytics_code }}
</body>

and change it to (obviously putting your info in for YOURCHURCH):
  {{ organization.google_analytics_code }}
  <script>
    var xcc = parent.document.getElementById("captiontoggle");
    xcc.innerHTML =  "<a href='https://YOURCHURCH.churchonline.org/' class='co-quality-switch'>turn captions off</a>";
  </script>
</body>

Now your captioned page will have a working "Turn Captions Off" link. You can click "preview" next to your captioned theme to see this. In fact, you need to preview it so we can get that URL... it should look something like: https://YOURCHURCH.churchonline.org/?preview=true&theme=##### Note that URL for our last step, adding a link to the captions theme from our normal theme.

Go to the Events tab and edit your event, click the video tab to see your embed codes, and for the default embed code (and mobile if you have one in there, though you don't need one most likely), add this script to your code (obviously putting your theme preview link in and your normal embed code):
<script>
  var xcc = parent.document.getElementById("captiontoggle");
  xcc.innerHTML =  "<a href='https://YOURCHURCH.churchonline.org/?preview=true&theme=#####' class='co-quality-switch'>turn captions on</a>";
</script>
<!-- Insert your normal Embed Code here -->
<div id="la1-video-player" data-embed-id="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"></div>
<script type="application/javascript" src="https://control.livingasone.com/webplayer/loader.min.js"></script>
<!-- End your Embed Code here -->

So this adds the "Turn Captions On" link to your page ONLY WHEN this event's video is live (based on your schedule on ChOP) which is nice! The end result is now that all devices see a "Turn Captions On" link under the video player, and when clicked, are redirected to your copied theme preview link that has the video player swapped out with the hard-coded captioning embed. That theme in turn, has a "Turn Captions Off" link that redirects back to the normal theme.