sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.59k stars 2.93k forks source link

External captions on Vimeo or YouTube #521

Open Hammin opened 7 years ago

Hammin commented 7 years ago

Hi. Is it possible to add external captions when data type is youtube or vimeo? Greetings. Thank you very much for offering Plyr.

Players affected:

gtaschuk commented 7 years ago

Seems to be a duplicate of #383 - but I'm also interested.

sampotts commented 6 years ago

Will manage this in #383 . Vimeo captions are now supported as of v3 đź‘Ť

friday commented 6 years ago

I think there's been some confusion about this. Would recommend #1090 over #383 for further discussion.

friday commented 6 years ago

Reopened, since I think this is either "bigger" or lower level than YouTube caption support, and that it needs it's own space in order not to be forgotten. It's possible to fix this without adding YouTube support for captions, and supporting this may help to add support for YouTube captions (#1090).

Plyr could potentially handle captions for any provider (live streams not included) by providing some way to support VTT files with iframes. Perhaps this could also be used to override HTML5 media textTracks, which would solve an issue currently solved by introducing the captions.update argument.

This could be achieved by parsing vtt files and triggering events similar to cuechange. Alternatively I'm sure a hidden html5 media element could be used somehow, but this would be a bit of a hack.

Parsing VTT (and SRT) is relatively easy, but would add some complexity to the code. The more formats supported, the more complexity added, so I don't think this should be a goal to support them all.

Why:

rubenswieringa commented 5 years ago

@friday (or @sampotts) could you provide some insight into why external captions (captions that don’t already belong to the video) are currently not supported for Youtube videos?

I might be interested in implementing some of it if I understood the considerations for it not already being supported.

friday commented 5 years ago

@rubenswieringa

Normal HTML5 video implements captions. Plyr uses this API to listen to events to show and hide cues (lines of text), while the actual HTML5 captions remain hidden (but not disabled, since we need the events).

Vimeo and YouTube may also be using this API for their implementations. Plyr can access approximately the same information via Vimeo's wrapper APIs, but not the raw original text track nodes, the original events or the original video elements.

In order to add support for external subtitles you would probably have to fetch the caption, and parse it (since there's no HTML5 video to add it to as a track). Then you would need to listen to timeupdate and trigger the show/hide events when the cues should be shown.

I don't expect that to be very hard. The parsing logic for VTT is very simple. Plyr doesn't have an API for adding captions that works for non-html-elements though.

rubenswieringa commented 5 years ago

@friday

Thank you for the (very concise) explanation, will be spending some time today looking into it and will keep you posted.

rubenswieringa commented 5 years ago

Update: I spent a little less time on it last week than I would have liked to, but I did make some progress. The whole thing should indeed not be too difficult.

The rest of the year for me will be slightly hectic with moving between countries and the holidays, but I hope to be able to spend some more time on it. Probably will be 2019 before I have a PR ready for review though.

friday commented 5 years ago

There's no rush though. Even if you did this super quickly, Sam doesn't have the time to keep up with the PR's and issues as they happen. You may want to ask him about this specifically before spending much time on it.