friday commented 6 years ago

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

Automated captions: Feeding one word at a time, generated with google's speech-recognition API
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.
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.

dzcpy commented 5 years ago

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

aramecto commented 5 years ago

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 commented 5 years ago

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

svinkle commented 5 years ago

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 commented 5 years ago

Yes @svinkle Hence this issue.

svinkle commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@sampotts may want to add a response to this.

laurensV commented 5 years ago

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 commented 4 years ago

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

hathawayweb commented 4 years ago

Has any progress been made with this?

explorier commented 4 years ago

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 commented 4 years ago

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

redware commented 3 years ago

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

@oyoutubevideo.ctitle

}

@section scripts{

<script>

    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 commented 3 years ago

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 commented 3 years ago

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.