YouTube subtitles / captions

[friday]

YouTube uses 2-3 type of captions depending on how you define it

1. Automated captions: Feeding one word at a time, generated with google's speech-recognition API
2. Track-based captions: Feeding one line at a time. Captions are uploaded manually as files (for example vtt-files) or created using YouTube's transcript editor.
3. Annotations (#383): These are more for uploaders to post corrections and promote other videos. They are not suitable for subtitles and I think they should be considered something else entirely. I just listed them here to make this clear since there's been some confusion about this in past issues. In addition, this feature has been removed (old videos still support it).

YouTube's embed API doesn't support getting captions. It is possible with a different API, but it requires API keys, and is not free. I think the reason for this could be in order not to create a free back door to the Google Web Speech API, since YouTube is using it, or a version of it internally.

http://terrillthompson.com/blog/713

However, for 2, it is possible to get a full transcript with the cues in as VTT or XML format, with no authentication:

https://www.youtube.com/api/timedtext?v=XJGiS83eQLk&type=list https://www.youtube.com/api/timedtext?v=XJGiS83eQLk&lang=en

Notes about this:

• Replace XJGiS83eQLk and en with your data (obviously)
• Add the parameter fmt=vtt to get VTT. This also serves the correct mimetype.
• If the track has a name that must also be specified. This may also be required for other parameters. Ex: https://www.youtube.com/api/timedtext?fmt=vtt&v=tnsB6YCHVXA&lang=en&name=English
• http://video.google.com/timedtext also works for YouTube ids.

This should be relatively easy to implement, but new methods would be needed to fetch and parse the files, and then for triggering events to show them (since we can't use TextTracks and cuechange).

2 also seems to support using the iframe API to show and hide captions and switch languages: https://stackoverflow.com/a/22725755/633921 (I haven't verified this), but that would be using the YouTube captions, not Plyr's own stylable captions. To simply disable them there is another way in #568.

Update: Discovered the fmt=vtt parameter that could simplify this.

[yf-hk]

How about integrating this module for Youtube? https://github.com/cgiffard/Captionator

[aramecto]

Hello, thanks for the great video player! I tried to create youtube video example using vtt file but did not work, here is my example

var options = { controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions','settings', 'fullscreen'], loadsprite: false, iconUrl: "/sites/all/themes/gesso/images/bg/plyr-edits-new.svg", hideControls: true, clickToPlay: true, settings: [ 'captions', 'quality', 'speed'], captions: { active: false, language: 'auto', update: true }, };

window.players = Plyr.setup($(".plyr-video-player, .plyr-video-player2").toArray(), options);

const track = document.createElement('track'); Object.assign(track, { label: 'Armenian', srclang: 'am', default: false, src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt' });

$.each(window.players, function(index, player){ player.media.appendChild(track); });

I uploaded video to my youtube chanel and created captions. I only see my created captions(youtube). What I made wrong?

[friday]

@aramecto: It's not supported. Youtube uses iframes, so there's no video element Plyr can access and add captions to.

[svinkle]

I was just testing plyr's caption feature and noticed the YouTube player on the homepage doesn't have the CC option. Am I correct in assuming, because of the above API limitations, plyr doesn't support captions for YouTube embedded video?

[friday]

Yes @svinkle Hence this issue.

[svinkle]

@friday Thanks for confirming. Would you happen to know if there's been any movement on this issue since creating the ticket?

The reason I ask is Shopify is adopting plyr as its default video player for an upcoming feature. We need to make sure our content offering is accessible to our Merchants customers and having captions from YouTube is key.

After reading the issue description, it seems like if the Merchant were to create a vtt file (or have a service create one for them) we should be able to allow uploading this file for use with plyr. Is this correct? If yes, I can report this back to our dev team to allow a vtt file upload feature on our end.

[friday]

After reading the issue description, it seems like if the Merchant were to create a vtt file (or have a service create one for them) we should be able to allow uploading this file for use with plyr.

No, the opposite. We can get vtt files from the youtube api if the video has captions. vtt files can be added to HTML5 video. Youtube embeds is using an iframe Plyr cannot control, so separate logic is needed. Code is needed to fetch the vtt files, parsing and triggering the pre-existing methods to show/hide the captions.

No work is being done on this I think. I'm no longer involved in Plyr development though, so I could have missed something.

[friday]

@sampotts may want to add a response to this.

[laurensV]

I am also interested in this feature. Maybe start with just allowing external captions for youtube video's instead of retrieving the vtt file from the youtube video.

[rafaell-lycan]

+1. As I'm having the same need here, how to upload a new caption file from the computer?

[hathawayweb]

Has any progress been made with this?

[explorier]

I'm also wondering what the status of this is? May be helpful to add a bit in the documentation regarding the current state of YT/Plyr caption integration (or non-integration as the case seems to be?). Otherwise, building out a custom player for a client now and Plyr has been a lifesaver. Captions work perfectly with Vimeo as of now!

[explorier]

Addendum to my previous comment - captions do not work safely with Vimeo either. See #877.

[redware]

Hello - Just a comment really - now I see that youtube captions are not supported. I nearly got everything I wanted to display a bunch of YouTube videos on a single page. I am using the div strategy and worked out how to set the options after a few hours (I am not a javascript natural).

Everything working perfectly but as others have pointed out - it seems the captions toggle button is deactivated for youtube videos - using youtube directly lets you use the automatically generated captions.

@model seniorsoftwaremvc.Models.VideosModel

@section head{

<link rel="stylesheet" href="https://cdn.plyr.io/3.6.4/plyr.css" />

}

Videos

VIDEOS

Using Senior Software

            @for (int i = 0; i < Model.ovideos.Length; i++)
            {
                var oyoutubevideo = Model.ovideos[i];
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body text-center">
                            <p class="lead mb-20">@oyoutubevideo.ctitle</p>
                            <div>
                                <div id="xx" class="js-player" data-plyr-provider="youtube" data-plyr-embed-id="@oyoutubevideo.cyoutube" controls data-plyr-config='{ "title": "Example Title" }'></div>
                            </div>
                        </div><!-- / column -->
                    </div><!-- / card-body -->
                </div>
            }
        </div><!-- / column -->
    </div><!-- / card-body -->
</div>

@section scripts{

    const controls = [
        'play', // Play/pause playback
    ];

    //const player = new Plyr('#xx', controls);
    //var instances = Plyr.setup({
    //    // Output to console
    //    debug: true,
    //    captions: { defaultActive: true },
    //    tooltips: { controls: true }
    //});

// const players = Plyr.setup('.js-player');

    const players = Array.from(document.querySelectorAll('.js-player')).map(p => new Plyr(p, {
        controls: [
            'play-large', // The large play button in the center
          //  'restart', // Restart playback
          //  'rewind', // Rewind by the seek time (default 10 seconds)
         //   'play', // Play/pause playback
          //  'fast-forward', // Fast forward by the seek time (default 10 seconds)
          //  'progress', // The progress bar and scrubber for playback and buffering
         //   'current-time', // The current time of playback
         //   'duration', // The full duration of the media
            'mute', // Toggle mute
            'volume', // Volume control
            'captions', // Toggle captions
        //    'settings', // Settings menu
          //  'pip', // Picture-in-picture (currently Safari only)
            //'airplay', // Airplay (currently Safari only)
            //'download', // Show a download button with a link to either the current source or a custom URL you specify in your options
            'fullscreen', // Toggle fullscreen
        ]
    }));

    for (i = 0; i < players.length; i++) {
        players[i].play();
        console.log("OK" + players[i].isEmbed);
        var oplayer = players[i];
        console.log(oplayer.playing);
        oplayer.controls = controls;

// oplayer.toggleControls(true); console.log(oplayer.currentTime); oplayer.on('playing', event => { console.log('Playing...'); }); } }

[gurupras]

I'm very interested in getting this implemented. With minimal work, I've been able to get the toggle-captions button to show up and the <track> elements set up. However, nothing shows up. I suspect this is because there is no proper <video> element and thus the tracks don't auto-update as the video plays.

A quick look at the vimeo code seems to point to a cuechange event triggered by the Vimeo API. The YouTube API doesn't have anything similar.

I'm not sure where to start, so if someone could point that out, I'm happy to work on this. Currently, I'm thinking that we'll need to manually update cues based on timeupdate or currentTime. Let me know if this is not the right way forward or if Plyr already does this.

[gurupras]

Alright. I was able to make some progress. I had to throw in a VTT parser library (vtt.js) but I was able to get captions to show up for YouTube. Here's a demo of it using plyr v3.6.8: https://codepen.io/gurupras/pen/mdwxzrB

I'm not sure what a PR for this would/should look like. If anyone has any ideas, let me know.

[tovutifunk]

@gurupras

I'm not seeing that reflected in this codepen.

[zenbug]

So I take it it's still not possible to show captions on a YouTube video? None of the suggestions in this thread seem to work.

[ranuss]

+1 as this is a killer. Is there any progress made?

[mark-c-woodard]

I'll +1 this thread, having captions support for YouTube would be huge!