Sky News Youtube and Subtitles

[Stephen_Knott]

Hi,

Has anyone successfully been able to use the YouTube iFrame script to display a YouTube video and the closed captions that are normally accessible via the standard YouTube player interface?

Specifically I’m trying to play Sky News via Xibo, but as we want the sound to be off we want the subtitles to be displayed.

I’ve got the following code in the HTML and Script sections - any ideas anyone? Appreciate any suggestions. Thanks!

HTML Section:

<!-- BROWSER=edge -->
<div id="player"></div>

Script Section:

<script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var player;
    var playerState = -1;
    var readyCalled = false;
    
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          suggestedQuality: 'hd720',
          height: '758',
          width: '1350',
          videoId: '9Auq9mYxFEE',
          cc_load_policy: '1',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        player.captions.active = true;
    }
    function onPlayerReady(event) {
        readyCalled = true;
        event.target.playVideo();
    }
    function onPlayerStateChange(event) {
        if (readyCalled && playerState === 3 && event.data === -1) {
            setTimeout(function() { player.playVideo(); }, 1000);
        }
        playerState = event.data;
    }
</script>

[Stephen_Knott]

I’ve added the playerVars as per the example at https://xibo.org.uk/docs/setup/autoplay-embedded-youtube-videos but it still doesn’t work. Any ideas anyone??

function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          suggestedQuality: 'hd720',
          height: '758',
          width: '1350',
          videoId: '9Auq9mYxFEE',
          playerVars: {
          	'cc_load_policy': 1
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
        player.captions.active = true;
    }

[Stephen_Knott]

Ok so some interesting update - with the playerVars and a bit of a refresh on the client devices (ViewSonic screens with some sort of embedded Android device using the latest version of the Xibo app) the subtitles now show, but the video doesn’t…!?

Anyone seen anything like this before?

Thanks,

[Stephen_Knott]

Finally figured it out - the layout region or embedded widget was set for transparent background. Took this off and all working correctly using the code above.

Hope this helps someone else.